User specific vs global frontend theme impacts

Configuration Frontend
1

With help from @Ildar_Gabdullin I’ve made progress on colorizing icons based on entity state, now I’m seeking further assistance on the side-effects of creating my own theme.
What I wanted to do was to set icons red or green based on state, e.g.

I added mycolors theme to my configuration.yaml:

# Themes
frontend:
  themes:
    mycolors:
       state-binary_sensor-door-on-color: red
       state-binary_sensor-door-off-color: green
       state-binary_sensor-moisture-on-color: red     
       state-binary_sensor-moisture-off-color: green
       state-binary_sensor-problem-on-color: red     
       state-binary_sensor-problem-off-color: green
       state-binary_sensor-update-on-color: red     
       state-binary_sensor-update-off-color: green
       state-binary_sensor-firmware-on-color: red     
       state-binary_sensor-firmware-off-color: green

…but this had the unfortunate side-effect of killing some of the features of the default theme, (e.g. dark mode), I also discovered that I need to set my theme for every user on every device on every browser.

I think that what I want to do is add my color changes to the system wide default theme. How do I find the location of the global default theme?

I found many themes here: Themes - Home Assistant Community but even the ones called default would need to be installed for every user/device.

Icon color is controlled by device class e.g: state-binary_sensor-firmware-on-color where device class = firmware, is there a corresponding text parameter such as state-binary_sensor-firmware-on-textcolor?

thanks!

2

Here:
Add you variables into this theme:

my_theme:
  my-theme-common-color:  red
  modes:
    light:
      my-theme-dependent-color:  black
    dark:
       my-theme-dependent-color:  white

Also you can leave these “light” & “dark” sections empty (here) to only add your theme-independent colors.

Instead of of theme, you may add your variables to ANY currently used theme (i.e. default if not set) by using an external JS - here.

No. You will have to define for yourself which text and where you need to style for these particular “door” entities. Then you will have to use either card-mod (for every card where you need to style) or a custom card-mod theme (which will style all cards of particular type).

1 Like
3

A new project for the weekend. Thank you!! :joy:

Next day:
The theme update worked with the combination you suggested:

# Themes
frontend:
  themes:
     my_theme:
       my-theme-common-color:  red
       modes:
        light:
          my-theme-dependent-color:  black
        dark:
          my-theme-dependent-color:  white
       state-binary_sensor-door-on-color: red
       state-binary_sensor-door-off-color: green
       state-binary_sensor-moisture-on-color: red     
       state-binary_sensor-moisture-off-color: green
       state-binary_sensor-problem-on-color: red     
       state-binary_sensor-problem-off-color: green
       state-binary_sensor-update-on-color: red     
       state-binary_sensor-update-off-color: green
       state-binary_sensor-firmware-on-color: red     
       state-binary_sensor-firmware-off-color: green

so… I removed all that to try the external js method.
In configuration.yaml I added:

frontend:
  extra_module_url:
    - /local/mycolors/globalcolor.js

in /config/www/mycolors I added
-rwxr--r-- 1 root root 1066 Feb 18 09:56 globalcolor.js

globalcolor.js contains:

customElements.whenDefined('home-assistant-main').then(() => {
  const UIelement = customElements.get('home-assistant-main');
  const { html, css } = UIelement.prototype;
  
  const newStyle = css`
    :host {
      --state-binary_sensor-door-on-color: red;
      --state-binary_sensor-door-off-color: green;
      --state-binary_sensor-moisture-on-color: red;    
      --state-binary_sensor-moisture-off-color: green;
      --state-binary_sensor-problem-on-color: red;     
      --state-binary_sensor-problem-off-color: green;
      --state-binary_sensor-update-on-color: red;     
      --state-binary_sensor-update-off-color: green;
      --state-binary_sensor-firmware-on-color: red;     
      --state-binary_sensor-firmware-off-color: green;
    }`;

  const newStyles = [].concat(UIelement.styles, newStyle);
  Object.defineProperty(UIelement, 'styles',        {value: newStyles, configurable: true, enumerable: false});
  Object.defineProperty(UIelement, 'elementStyles', {value: newStyles, configurable: true, enumerable: false});
});

No joy this time, no errors in the log, no new colors settings.

If I haven’t exceeded my “ask” limit, I could use another suggestion. thanks.

1 Like
4

Have you rebooted after adding a new “extra_module_url” entry?
Have you purged a cache?

1 Like
5

Yes :wink:

oops… no, but I have now!! thanks again (again)

Changing the text color, may be too far out on the limb of diminishing returns for now. I’ll let this one “rest” for a while:

6

…but my “global” color settings (with the external js method) do not take effect when I connect using the Home Assistant Companion App (even after I cleared the application cache on my phone)

App version:

    Installation method    Home Assistant OS
    Core                            2026.1.3
    Supervisor                     2026.02.2
    Operating System                    17.1
    Frontend                      20260107.2
    Companion app      2026.2.1-full (20142)

Colors are set as expected from a desktop or phone browser, from local IP or Duck DNS external IP.

Are there any specific Companion app settings I need to update?
[Settings → Companion app → didn’t lead to anything obvious]

Found it: Settings → Companion app → Troubleshooting → Reset frontend cache

It works!.. done for now.

7

Erm, I believed you already did that)))

8

me too… it turns out that there is a right way and a wrong to clear the cache.

My first/failed attempt was,

from Android Settings → Apps → Home Assistant → Storage → Clear Cache

Before Cache Cleared:

image
image357×675 21.5 KB

Cache CLEARED:

image
image363×675 21 KB

The correct method is to use the Companion App to clear (aka reset) the Frontend Cache :wink:

9

Yes, easy to be confused…