This is driving me crazy.
I can make changes to Firefox fine, but both Safari & Chrome do not load the CSS file!
Bumped!
Would love to see a CSS include key inside the ui-lovelace.yaml to load custom CSS. 
Did you find a solution to this problem? After quickly setting this up I’m having the same result here… 
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.
5 Likes
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.
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
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 
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?
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. 
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.
[Off Topic]
you’re = you are
Is basically:
Did you mean “your”?
But back [On topic]:
I’m missing custom CSS…
1 Like
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