Yep, I’ve been a bit frustrated with the relative lack of flexibility in Lovelace too, but it’s still early pretty days in the UI’s development.
Interestingly I thought I’d just have a little experiment today.
I created a file in the www folder called styles.js with the following code:
var cssId = 'myCss'; // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = '/local/stylesheet.css';
link.media = 'all';
head.appendChild(link);
}
Then added it to ui-lovelace.yaml using this:
- url: /local/styles.js
type: js
I then created a stylesheet.css file that the .js references to in the www folder with this test code:
paper-button{
text-align: right !important;}
In firefox, the css is applied to the front end! Trouble is, if I make a change to the CSS code, it doesn’t show unless I clear the browsers cache and reload the page (which then requires a user login etc).
It feels like this is kinda moving in the right direction?!?!?!?
3 Likes
Sounds like you’ve made some progress!
Clearing the cache isn’t entirely necessary. In Chrome I just force a hard refresh (Ctrl+F5). I’m not sure what the shortcut is in Firefox but that should work.
Unfortunately doing a hard refresh doesn’t work. There must be some caching or something going on somewhere as the changes made in the .css file are only reflected if you clear the site data from the browser. Obviously that’s not an option. It’s nearly as quick to restart Hassio!
If you add a version number to the Lovelace include, it should recache with the new files. That’s how it works with other Lovelace cards at least, but not sure if it includes the referenced css.
- url: /local/styles.js?v=0.1
type: js
for instance
@Martin_Granger
This does indeed seem to work, but instead of using your styles.js I simply put:
- url: /local/stylesheet.css?v=0.495
type: css
And changing the number would load a new version of the CSS file.
The hideous abomination below was made by having this in the stylesheet:
body{
–primary-background-color: blue !important;
–paper-card-background-color: green !important;
}
I could not properly figure out which ids to use for rounding the corners etc, but I am sure you might have a better grip on which css to override. Do let me know!
Super interesting - I’ll have a play!
re the version number etc - do you have to put that version number on or within the .css file?
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 
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!
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