I had some time to update the card so I added a few things:
Hi all, quick question. I’ve begun using a “night mode” for HA as I’m adding control panel tablets around the house. The white bar at the top of the airvisual card really sticks out at night. I’m wondering if there’s any way to get the white bar at the top to play nicely with the theme and turn dark too, or otherwise just go away altogether so I can use something like a markdown card for the title… Any ideas?
That’s a good idea. I played around with the CSS to remove the hard-coded color values and replace with theme-selected values and it works, though it’s not that pretty. Find updated release here:
Later, I’ll add the ability to hide the title that holds the city and name, so that you can replace with button-card or something else.
Edit: I should mention that I only tested against this dark theme. If you can share the theme you use, I can take a look at it to make sure it works on your theme.
Wow that was quick! I’d say it’s an improvement, though I think I’d prefer the title bar to take on the normal dark card color as it’s background rather than the color of the airvisual card reflecting the pollution level… Or if it does, probably better to use a dark font rather than white. Here’s what it looks lik enow.
Looks like it’s not working properly on your theme…
I use a different dark theme and have been using the CSS variables from that to color the font and background. I suspected not all themes will have the same variable names, so I guess I need to find a different way.
Can you share the theme you use? So I can see the names of the CSS variables?
I’ll add in the option to turn off the title soon, so you can use another card as title.
Here’s the theme I’m using if it helps:
The card was updated again with ability to hide the title. In your Lovelace UI config, add the option hide_title: true to hide the title.
I haven’t found a good way to fix the background color, but I think a workaround is to add this line of code to your Home Assistant theme:
background-color: 'var(--secondary-background-color)'
My card looks for the variable background-color, which is now defined if you add that line of code to your theme. I tested the theme and it looks like it works.
Thanks, I tried both suggestions and they both worked… In the end I went with hide_title as it didn’t really need a title and I already had the temperature in the view in a weather card.
How is everyone getting rounded corners with this card? I have rounded corners in my theme, and when adding the them to this card I get nothing. I’ve also tried using the card-mod plugin and then adding css the card with no luck as well!
Hi,
When using
type: entities
entities:
- sensor.u_s_air_pollution_level
- sensor.u_s_air_quality_index
- sensor.u_s_main_pollutant
I can see the data i’m requesting, however when i’m adding to my lovelace
resources:
- type: js
url: /community_plugin/air-visual-card/air-visual-card.js
and
- title: Test 2
path: test-2
badges: []
cards:
- type: 'custom:air-visual-card'
air_pollution_level: sensor.us_air_pollution_level
air_quality_index: sensor.us_air_quality_index
main_pollutant: sensor.us_main_pollutant
temp: weather.dark_sky
city: San Francisco
Nothing is displayed in my lovelace interface but i’m not getting any error 
look at the name of your sensors vs. the names you used in the Lovelace configuration. One is sensor.u_s and the other is sensor.us…
Thanks for noticing this issue. It’s working perfectly 
I just went to a theme with rounded corners, now I’m wondering how everyone got them too ;-). Anyone want to share the magic?
I’m getting the following on .106.5:
can’t define property “icons”: Object is not extensible
Any ideas?
Hello
I have a problem with the air visual card plugin. I have the HA 0.107.4 version, I have added air visual card in the integration and the API key in config.yaml.
When I add a plugin on the main screen I have this error:
Same problem here.
Same problem here too. Cannot get the card. And I know it doesn’t matter, but tried using both u_s and us.
Did you move the resources from ui-lovelace.yaml to configuration.yaml as described here https://www.home-assistant.io/blog/2020/03/18/release-107/ and https://www.home-assistant.io/lovelace/dashboards-and-views/ ?
Working for me on .107.7. I am on the latest version and did the migration from ui-lovelace.yaml to configuration.yaml as described above.
I got mine to work but I could not figure out how you got the half white and the other half green? Also how did you round the edges?
…
air_pollution_level: sensor.u_s_air_pollution_level
air_quality_index: sensor.u_s_air_quality_index
city: ‘Lexington, VA’
country: US
main_pollutant: sensor.u_s_main_pollutant
temp: weather.openweathermap
type: ‘custom:air-visual-card’
…
