Lovelace instant'ish CSS changes

Share your Projects! Dashboards & Frontend
22

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.

dark_theme:
      # 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
views:
  - background: center / cover no-repeat url("/local/background_light2.jpg")
    badges: []
    cards:
      - 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'
                tap_action:
                  action: call-service
                  service: script.turn_on
                  service_data:
                    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
                tap_action:
                  action: call-service
                  service: script.turn_on
                  service_data:
                    entity_id: script.home_mode_day
                theme: dark_theme_lighter_card
                type: entity-button
              - entity: script.night_night
                icon: 'mdi:weather-night'
                tap_action:
                  action: call-service
                  service: script.turn_on
                  service_data:
                    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
                hold_action:
                  action: more-info
                icon: 'mdi:shield-remove-outline'
                name: Oops
                tap_action:
                  action: toggle
                theme: dark_theme_pink_icons
                type: entity-button
              - entity: alarm_control_panel.ha_alarm
                name: Security
                tap_action:
                  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
                tap_action:
                  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
                    tap_action:
                      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
2 Likes
23

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.

24

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

25

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
26

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

27

I posted all the code just above

1 Like
28

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?

29

Here you go - three that I have used:

background_light
background_light1366×768 68.9 KB
background_light2
background_light21920×1264 461 KB
bg3
bg31920×1080 118 KB

6 Likes
30

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

31

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:

32

Might or might not be exactly what people are looking for in this thread, but Lovelace Theme Maker allows for at least the theme elements to be adjusted dynamically.

33

[Off Topic]

you’re = you are

Is basically:

Did you mean “your”?

But back [On topic]:

I’m missing custom CSS…

1 Like
34

It’s the same for most browsers. You can also do ctrl + r to reload the page which sometimes works. I typically bash out a combination of the two to dirty the cache.

Otherwise, a unique QueryString is the way to go eg: ?v=1.0.0