Home Assistant Community

Lovelace instant'ish CSS changes


No, just in the Lovelace.yaml

It just tricks the browser into thinking its a whole new file, so for instance if you increase to say ?v=2, and then go back to ?v=1 it would then load an old cached one. Basically it will cache each and every one of those files per number. It’s a workaround to purging browser cache.



Like it! Glad I started a ?v=001 then :smiley:

An issue I’m having is that firefox is showing the correct behavior and the CSS is updating, but Chrome doesn’t seem to.

It seems that Chrome isn’t loading the CSS file. This is on OSX and Android. Any ideas why this would be the case?



My CSS only contained that entry, and that worked without issue on chrome for me (on macOS Sierra).

If you open the developer tools in chrome and look at the Styles section bottom left you should see the stylesheet that is loaded if encapsulated in the body (since that is what I tested). As in, it would say stylesheet.css?v=0.491

Maybe try the exact that I had above?



This is driving me crazy.

I can make changes to Firefox fine, but both Safari & Chrome do not load the CSS file!




Would love to see a CSS include key inside the ui-lovelace.yaml to load custom CSS. :slight_smile:



Did you find a solution to this problem? After quickly setting this up I’m having the same result here… :expressionless:

1 Like


Nope - gave up on styling things. I now just use the stock cards with a nice background and a theme I found on the forums.



nice clean layout!

same problem here btw, my css loads in firefox but not chrome. I read somewhere that you may have to add meta charset utf-8 somewhere. I think i can be applied in the js file, but i’m not sure I know how to include that.



Would you like to share you’re config?

1 Like


Hi @Martin_Granger i’ve had a good look but can’t find anyone sharing a theme similar to yours, do you have a repo we could look at or could paste theme in this thread? Thanks, looks great!

1 Like


Sure - It’s fairly simple stuff though:
The theme is not mine - I found it somewhere on the forum. Also, I’m now using the Lovelace UI editor to do everything frontend. Just for clarity, I don’t use custom cards as these do not work on my Kindle fire 7 tablet which I use as my primary interface in the house.

      # Main colors
  primary-color: '#383C45'                                                        # Header
  accent-color: '#5eb3e4'                                                         # Accent color
  dark-primary-color: 'var(--accent-color)'                                       # Hyperlinks
  light-primary-color: 'var(--accent-color)'                                      # Horizontal line in about
      # Text colors
  primary-text-color: '#b8b8b8'                                                   # Primary text colour, here is referencing dark-primary-color was #fff
  text-primary-color: 'var(--primary-text-color)'                                 # Primary text colour
  secondary-text-color: '#5294E2'                                                 # For secondary titles in more info boxes etc.
  disabled-text-color: '#7F848E'                                                  # Disabled text colour
  label-badge-border-color: 'green'                                               # Label badge border, just a reference value
      # Background colors
  primary-background-color: '#383C45'                                             # Settings background
  secondary-background-color: '#383C45'                                           # Main card UI background
  divider-color: 'rgba(0, 0, 0, .12)'                                             # Divider
      # Table rows
  table-row-background-color: '#353840'                                           # Table row
  table-row-alternative-background-color: '#3E424B'                               # Table row alternative
      # Nav Menu
  paper-listbox-color: 'var(--primary-color)'                                     # Navigation menu selection hoover
  paper-listbox-background-color: '#2E333A'                                       # Navigation menu background
  paper-grey-50: 'var(--primary-text-color)'
  paper-grey-200: '#414A59'                                                       # Navigation menu selection
      # Paper card
  paper-card-header-color: 'var(--accent-color)'                                  # Card header text colour
  paper-card-background-color: '#434954'                                          # Card background colour
  paper-dialog-background-color: '#434954'                                        # Card dialog background colour
  paper-item-icon-color: 'var(--primary-text-color)'                              # Icon color
  paper-item-icon-active-color: '#F9C536'                                         # Icon color active
  paper-item-icon_-_color: 'green'
  paper-item-selected_-_background-color: '#434954'                               # Popup item select
  paper-tabs-selection-bar-color: 'green'
      # Labels
  label-badge-red: 'var(--accent-color)'                                          # References the brand colour label badge border
  label-badge-text-color: 'var(--primary-text-color)'                             # Now same as label badge border but that's a matter of taste
  label-badge-background-color: '#2E333A'                                         # Same, but can also be set to transparent here
      # Switches
  paper-toggle-button-checked-button-color: 'var(--accent-color)'
  paper-toggle-button-checked-bar-color: 'var(--accent-color)'
  paper-toggle-button-checked-ink-color: 'var(--accent-color)'
  paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
  paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
  paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'
      # Sliders
  paper-slider-knob-color: 'var(--accent-color)'
  paper-slider-knob-start-color: 'var(--accent-color)'
  paper-slider-pin-color: 'var(--accent-color)'
  paper-slider-active-color: 'var(--accent-color)'
  paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
  paper-slider-secondary-color: 'var(--secondary-background-color)'
  paper-slider-disabled-active-color: 'var(--disabled-text-color)'
  paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'
      # Google colors
  google-red-500: '#E45E65'
  google-green-500: '#39E949'

##The following is my lovelace config for the first card:

title: My House
  - background: center / cover no-repeat url("/local/background_light2.jpg")
    badges: []
      - cards:
          - cards:
              - entities:
                  - entity: group.lounge
                    name: Living room
                  - entity: group.kitchen
                  - entity: group.hall_downstairs
                    icon: 'mdi:stairs'
                    name: Hall Downstairs
                  - entity: group.downstairs_toilet
                    icon: 'mdi:toilet'
                    name: Toilet
                  - entity: group.outside
                  - name: Heating
                    type: section
                  - entity: switch.boiler_bot
                    service: light.toggle
                show_header_toggle: false
                theme: dark_theme
                title: Downstairs
                type: entities
              - entities:
                  - entity: group.master_bedroom
                    name: Master bedroom
                  - entity: group.erins_bedroom
                    name: Erin's bedroom
                  - entity: group.hall_upstairs
                    icon: 'mdi:stairs'
                    name: Hall upstairs
                  - entity: group.clares_office
                    icon: 'mdi:desk-lamp'
                  - entity: group.ensuite
                    icon: 'mdi:toilet'
                show_header_toggle: false
                theme: dark_theme
                title: Upstairs
                type: entities
            type: horizontal-stack
        id: b9541a3cd52a451cba3a5633fbb21117
        type: vertical-stack
      - cards:
          - cards:
              - entity: script.good_morning
                icon: 'mdi:weather-sunset-up'
                  action: call-service
                  service: script.turn_on
                    entity_id: script.good_morning
                theme: dark_theme_lighter_card
                type: entity-button
              - entity: script.home_mode_day
                icon: 'mdi:weather-sunset-down'
                name: Dusk
                  action: call-service
                  service: script.turn_on
                    entity_id: script.home_mode_day
                theme: dark_theme_lighter_card
                type: entity-button
              - entity: script.night_night
                icon: 'mdi:weather-night'
                  action: call-service
                  service: script.turn_on
                    entity_id: script.night_night
                theme: dark_theme_lighter_card
                type: entity-button
            type: horizontal-stack
        id: 4d85748ae90b4d33b492c8eb19f92efd
        type: vertical-stack
      - cards:
          - cards:
              - entity: script.night_time_panic
                  action: more-info
                icon: 'mdi:shield-remove-outline'
                name: Oops
                  action: toggle
                theme: dark_theme_pink_icons
                type: entity-button
              - entity: alarm_control_panel.ha_alarm
                name: Security
                  action: navigate
                  navigation_path: /lovelace/2
                theme: dark_theme
                type: entity-button
              - entity: script.earlybird
                hold_action: more-info
                icon: 'mdi:alarm'
                name: Early Bird
                  action: toggle
                theme: dark_theme
                type: entity-button
            type: horizontal-stack
          - cards:
              - entities:
                  - entity: input_boolean.martin_occupancy
                    icon: 'mdi:account-circle'
                    name: Guest mode
                    show_state: true
                      action: toggle
                theme: dark_theme
                type: glance
              - entity: sensor.house_temperature
                graph: line
                name: Inside
                theme: dark_theme
                type: sensor
              - entity: sensor.simple_time_date
                icon: 'mdi:clock'
                name: Time
                theme: dark_theme
                type: sensor
            id: scene_panel
            type: horizontal-stack
        id: 4d85748ae90b4d33b492c8eb19f92efdMJG
        type: vertical-stack
    icon: 'mdi:home'
    id: 10
    theme: dark_theme
    title: Home
1 Like


Since you are trying to change styles instantly but you devs havent figured this out yet, here is my 2 cents:
Create different themes with your desired styles and call for the theme you like using automations.

For example:
I have my regular dark theme.
When I arm the alarm, the theme changes to orange.
When I disarm the alarm the theme changes to green for a minute and then goes back to the original dark theme.

I know it is not very cool like the attempts you made in the previous posts, but I am not a developer. So, this is what I would do as a workaround.



Thats a great tip!

The topic was actually started due to me wanting to change more complex elements that can’t (as far as I’m aware) be changed using the theme file. Things like rounded corners on cards and alpha (see through cards) values.

The other issue was the fact that themes are very long winded in their creation requiring multiple restarts.

My idea was to simple edit the CSS of HA making instant changes



I get what you are saying. Good luck with that. Would love to see that happening.

In the meantime:

Here is a transparent card value :slight_smile:

paper-card-background-color: “#1d1d1d00

All you have to do for a transparent card is to add 00 to the end of the color code.

1 Like


Hi. please can you link to that theme you’re using? Or name it so I can search myself



I posted all the code just above

1 Like


thanks, I think one of the elements of a nice looking interface is a bg that matches the theme… and it’s really what makes this one, I can’t find a match on google any links/upload?


Trying to get a background loaded

Here you go - three that I have used:


Clear Theme

really appreciate it, thanks for sharing. and sorry for derailing this thread’s topic



I’m trying to make a custom theme but I ran into an issue. I used the new variable for the box shadow and i love it. Altough the html element with class column is messing it up. There is overflow-x: hidden css on it and it cuts off my shadows. I see no reason why it’s there tough. I don’t need instant css but just something that eventually works on all browsers. I tried to load a external css file in the uilovelace yaml but it is only visible if i press f5 repeatedly. Wich is weird as it is set important and is prefixed so it should overrule all non important inline css. Anyone got a way to get one line of css injected after the dom is loaded?
And does anyone know why this is happening and explain it a bit? I’m a webdesigner and I’m baffled by this behavior. Never seen something so stubborn in ignoring my css. :grin: