Better support for themes

[denysdovhan]

Better support for themes

[bremor]

Guys, try using https://github.com/thomasloven/lovelace-card-mod with the following added into your vacuum lovelace code:
Comes out looking pretty good.

style: |
  :host .preview {
    background: var(--card-background-color);
  }
  .preview .status-text {
    color: var(--primary-text-color);
  }
  .preview .header {
    color: var(--primary-text-color);
  }
  .preview .vacuum-name {
    color: var(--primary-text-color);
  }
  .preview .stats {
    color: var(--primary-text-color);
    border-top: 1px solid var(--disabled-text-color);
  }
  .preview .stats .stats-block {
    border-right: 1px solid var(--disabled-text-color);
  }
  :host ha-icon {
    color: var(--primary-text-color);
  }

[tomlut]

It should definitely use the theme card background colour by default.

[Hassiopeia]

I'm sorry, I found my main issue was that the vacuum-card.js was cached from the first time I loaded it. After I cleared my browser cache and reloaded, the changes I made to the vacuum-card.js took effect. The same for the iOS mobile app, I needed to go to App Configuration inside the Companion app and Reset Frontend Cache.

The issue still exists for themes with rounded corners, but that's not a big deal for me. I'll just need to modify your vacuum-card.js upon each release to match the theme I use. screenshot below.

[Magalex2x14]

I just want to confirm that with the Slate theme, replacing --primary-color with --background-color brings the colours of the card in order.

I also slightly reduced the height of the card.

[denysdovhan]

I don't believe I can make changes that would fit everyone's needs. I think we might introduce some kind of style option, like picture elements card have, so people can tweak the look of the card as they want. However, I don't think it's possible right now.

[BradleyFord]

Ok, that is clear thanks for that.
So if people can submit a pull request that could help to solve or improve the situation then I assume it would be well appreciated.

[BeerDiet]

I would support a version of this card which swaps those colors to get defaults that fit in better for both the default and for custom themes.

Me too, and I really like the updates you've suggested. Currently, I'm hosting this card away from HACS because these changes aren't being made to the "official" vacuum card and I got tired of having to go in and make your suggested changes after each update. I saw the PRs and there seems to be some strange gatekeeping going on here. Colors on cards should be seamlessly applied from themes, full stop.

[myhomeiot]

My version using https://github.com/thomasloven/lovelace-card-mod:

style: |
  ha-card {
    --primary-color: var(--primary-color);
    --text-primary-color: var(--text-primary-color);
  }
  :host ha-icon {
    color: var(--paper-item-icon-color);
  }
  .toolbar {
    color: var(--paper-item-icon-color);
  }
  .preview .stats {
    border-top: 1px solid var(--divider-color);
  }
  .preview .stats .stats-block {
    border-right: 1px solid var(--divider-color);
  }

[GizmoLibre]

Hello. Can we make the background of the card transparent? I don't want it to be a specific color, since i am using a multiple colored background from a Kibibit lovelace theme. I would like to have it displayed like my other cards. Thanks.

[Hassiopeia]

Those are controlled by .toolbar paper-icon-button. It’s set to use var(—primary-color), but I commented that out and it used my theme default for buttons. I’m considering commenting all of the hard coded color variables out of the vacuum-card.js so it will use my default theme’s.

[cobch]

Yes, such an theme option Will be gorgeous!

[murmelbahn]

I'm sorry, I found my main issue was that the vacuum-card.js was cached from the first time I loaded it. After I cleared my browser cache and reloaded, the changes I made to the vacuum-card.js took effect. The same for the iOS mobile app, I needed to go to App Configuration inside the Companion app and Reset Frontend Cache.

The issue still exists for themes with rounded corners, but that's not a big deal for me. I'll just need to modify your vacuum-card.js upon each release to match the theme I use. screenshot below.

So to be clear you changed the following in the vacuum-card.js:

  .preview {
    background: var(--primary-color);
    cursor: pointer;
    overflow: hidden;
    position: relative;
  }

to:

  .preview {
    background: var(--background-color);
    cursor: pointer;
    overflow: hidden;
    position: relative;
  }

I've tried this with the midnight theme and it still uses the blue color from your screenshot instead of the background color. This happens in the ios app and in chrome browser. I did delete the cache and I even tried it in incognito mode of chrome but it still shows the "wrong" color. I also resetted the front end cache in the app. So maybe I did an error in the js file?

[RestOp]

I am using clear-dark theme and also changed
background: var(--primary-color);
to
background: var(--background-color);
and now looks good

Please explain what line of code did you changed. It do not works for me ((

[BradleyFord]

These changes all seem to make the card much better.
It would be great if out could use the theme colors as default, but then we can override with configuration options

[denysdovhan]

If someone is interested, please make a PR with style option that would allow overriding style variables, like --backgroud-color, --text-color, etc, with corresponding fallbacks.

[theone11]

I am using clear-dark theme and also changed
background: var(--primary-color);
to
background: var(--background-color);
and now looks good

[alexander-bauer]

I would support a version of this card which swaps those colors to get defaults that fit in better for both the default and for custom themes.

Me too, and I really like the updates you've suggested. Currently, I'm hosting this card away from HACS because these changes aren't being made to the "official" vacuum card and I got tired of having to go in and make your suggested changes after each update. I saw the PRs and there seems to be some strange gatekeeping going on here. Colors on cards should be seamlessly applied from themes, full stop.

I authored that PR, and I've come around a little to seeing where @denysdovhan is coming from -- viewed next to the default media player card, the mainline styling makes sense. That said, I don't use the default media player either, and think it would stand out starkly with the themes that I use.

I'm an advocate for an easy-to-configure default style / alternate style, where the default is the current default, and the alternate is PR #68. Configurability is great, but I think there's value in presenting a suggested "easy path" that can be presented in the main README. I don't have the know-how to implement that switching, though; if anyone does and has the time, I would gladly accept those changes in my fork and update the PR.

---

@KenCote As an aside: I don't really want to encourage using a fork that I'm not putting any effort into keeping up to date, but it is currently possible to point HACS at my fork of this repository, and get the PR version.

[pizzakid25]

I was able to keep the corners rounded matching my theme by placing the card by itself in a Vertical Stack In Card.

Before and After:

type: 'custom:vertical-stack-in-card'
cards:
  - type: 'custom:vacuum-card'
    entity: vacuum.rosie
    stats:
      default:
        - entity_id: sensor.rosie_area_cleaned
          subtitle: Area Cleaned
          unit: ft²
        - entity_id: sensor.rosie_time_cleaned
          subtitle: Time Cleaned
        - entity_id: sensor.rosie_last_run
          subtitle: Last Ran
    actions:
      - service: vacuum.clean_spot
        service_data:
          entity_id: vacuum.rosie
        name: Spot Clean
        icon: 'mdi:selection-marker'
    show_toolbar: true
    show_status: true
    show_name: true
    compact_view: false
    image: >-
      http://mobileimages.lowes.com/product/converted/810841/810841013059.jpg

[denysdovhan]

Actually, the theme uses --primary-color which is a generic variable between different themes. It works fine for me with default and midnight themes.

[Hassiopeia]

I see that the themes I usually use have --primary-color referencing --accent-color, specifically the noctis and noctis-grey themes. When I try the card with other themes, it does display the --primary-color as expected. If I change the --primary-color in the theme's yaml, it will change it on the card, however that negatively effects other elements of the theme. When I attempt to change the variable used in the vacuum-card.js to a different value e.g. --background-color, it isn't respected and still displays --primary-color. I would have thought that changing the .preview background in vacuum-card.js to a different variable would have changed the display color. I tested with the midnight theme and it also displays as bright blue, I would have expected it to match the background of all the other cards. I would suggest changing the .preview background to use a background color variable so that it would be more suitable for a variety of themes.

I found another issue with this card and themes while testing the above. The card doesn't respect some themes that have rounded corners. I know this was an issue with for other custom cards, however I'm not sure how they resolved it.

Example where I changed the .preview background of vacuum-card.js to --background-color and restarted, but it's still displaying as --primary-color :

Example where --primary-color is being displayed, but it's ugly, hence the idea of changing .preview background to use a background color variable rather than primary. Also an example of the rounded corners not being applied to the card.

My example of the card using midnight theme:

[Hassiopeia]

Looking through several theme's yaml files, it looks like this variable is the standard for card backgrounds var(--paper-card-background-color)

[BradleyFord]

It would still be useful to have some ability to override the colours? is this possible.

But with that said, it is a nice step up from my previous vacuum card

[winterscar]

Chipping in here with my own issue (let me know if I should raise a new one), but with the synthwave-hass theme, the icons in the toolbar are just barely visible:

[marciogranzotto]

I agree. It looks way too weird with my theme

[chickenbeef]

@murmelbahn Did you delete the .gz file that's in the same folder as vacuum-card.js (if you installed via HACS)?

[Hassiopeia]

@murmelbahn That is what I did, but I have the manual install to the www folder, not the HACS install method. Since originally posting I've comment out most of the color variables so they're not hard coded in the js file. That way it uses whatever the theme is.

[murmelbahn]

@murmelbahn Did you delete the .gz file that's in the same folder as vacuum-card.js (if you installed via HACS)?

This was the problem. Thank you. After I delted the gz file the changes took effect.

@murmelbahn That is what I did, but I have the manual install to the www folder, not the HACS install method. Since originally posting I've comment out most of the color variables so they're not hard coded in the js file. That way it uses whatever the theme is.

Okay, I will try out this too. The only downside on this is that we have to change the js file everytime @denysdovhan is publishing an update of the card.

[BradleyFord]

@denysdovhan Is their any potential for you to make changes in this area?

It just seems that everyone is talking about this and likes your work, but we don't see any more comments from yourself but other commits are moving forward.

[WesSec]

I'm also vowing for the background color instead of the primary, but i understand both sides of the story!

[Hassiopeia]

Or would it be possible to create a theme option that if set to true would remove the style variables altogether? I'd be happy to test, but I'm not skilled enough to make those changes myself.

[alexander-bauer]

I am currently using the clear-dark theme as well, and found that without changes the card renders like so:

A style option or a change to the default variable would be much appreciated by me!

[firstof9]

Mine looks like this:

The background is 100% transparent for the buttons.

[tomlut]

That's what I see too. I have removed the card due to these styling issues.

[firstof9]

Styling issue I can work with until fixed I like my new card setup:

[firstof9]

Just looks like line 198 needs to be changed to

    background: var(var(--vacuum-card-toolbar-background), var(--primary-background-color));

to solve the issue, and allow you to specify vacuum-card-toolbar-background in your theme to adjust the color independently.

[alexander-bauer]

@firstof9 It looks like that's how the mini-media-player card does it. I think there are a handful more variables that we'd want to make adjustable the same way, though, if we went that route: text color, icon color, and toolbar color are the ones I've seen so far.

I have to worry about relying on themes to add those styling variables just for this card, though. I think this card looks good by default on the standard theme, but it's undeniable that it looks very different from other cards: every built-in Lovelace card uses the paper-white background, and uses the blue primary color for emphasis and buttons.

I would support a version of this card which swaps those colors to get defaults that fit in better for both the default and for custom themes.

[edwardscaleb9]

Those are controlled by .toolbar paper-icon-button. It’s set to use var(—primary-color), but I commented that out and it used my theme default for buttons. I’m considering commenting all of the hard coded color variables out of the vacuum-card.js so it will use my default theme’s.

Has this css class changed? All I can find now is .toolbar ha-icon-button and .toolbar paper-button and neither of those seem to be working.

[Xitro01]

to have it displayed like my other cards. Thanks.

Use card-mod (can be installed through HACS) and add the following code to your card:
card_mod:
style: >
.preview { background: unset !important; } .toolbar { background: unset
!important; } ha-card { border-radius: var(--ha-card-border-radius, 4px)
!important; }

It will end up something like this:

Hopefully support for this will be implemented by default, with a configuration switch.

[GitHubGoody]

@denysdovhan I'm new to HA. Thank you for developing this card. Is a fix for the styling issues (especially the blue tone covering the entire card) in the works or should I implement one of the workarounds mentioned above?

[github-actions]

🎉 This issue has been resolved in version 2.4.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[GitHubGoody]

@denysdovhan Awesome! Thank you.

[charleseweber]

For anyone who's trying to remove the hard corners, but hasn't had luck with the card-mod adjustments mentioned above, I was able to get this to work (make sure you have card-mod installed):

type: custom:vacuum-card
style: |
  ha-card {
    --vc-background: none;
    --vc-toolbar-background: none;
  }