Overriding Themes

Configuration
1

Hi,

I have installed a few themes through HACS and I would like to know what the best way would be to override a few colours. I have done it straight on the yaml file but obviously this gets overwritten when the themes gets updated through HACS.

Would there be a way to override a few variables in a separate files that could stay intact through updates?

Thanks

G

2

TBH copy the theme and then rename and edit as you wish. You can always compare via your user profile.

3

Did you manage to achieve this? My scenario is slightly different - I want to define some global colour variables to use as thresholds wherever I use the custom mini-graph-card to display room temperatures. I’d rather not hardcode the css colour string every time I set it.

Creating a copy of the theme introduces a whole bunch of new issues because it’s now forked and creates a maintenance overhead with every update of the original.

4

In my configuration.yaml:


# Enables the frontend
frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /local/ThemeOverride.js

ThemeOverride.js:

/*
Idea stolen from https://gist.github.com/thomasloven/2a37152725c582fec4420ecedb65ebe3

Add this to your configuration.yaml
frontend:
  extra_module_url:
    - /local/ThemeOverride.js

And put the following into <config-dir>/www/ThemeOverride.js
*/

document.documentElement.style.setProperty('--ha-card-border-radius', '10px');

As an example…

2 Likes
5

Excellent, this is working for me too now. Thanks @DavidFW1960!

1 Like
6

Another way is to create a CSS file with colors and add it as a resource to Dashboard

on the file system it’s .home-assistant/www/community/my-project/

in the UI the path would be /hacsfiles/my-project/colors.css

you could define colors globally

:root {
  --my-var: #efb60b;
  ...
}