I am new to home assistant, coming from OpenHAB.
Trying to change the default ‘orange’ color for icons when on to ‘green’
I have spent two weeks pouring over these forums and tried dozens of suggestions to change the color. Most are complex of statements that ultimately don’t work.
By default if a thing (light switch for example) is ‘on’ the icon changes to orange.
I thought that changing the ‘accent’ color of the default theme would do it, but no matter what I change then to a switch turned on still has an orange icon.
This seems like a simple find the ‘orange’ definition and change it to ‘green’ but where eludes me.
Do you want to change the “on” color only for this particular row, this particular card, or globally in HA Frontend?
Globally, I want all icons to turn green instead of orange through all my dashboards.
Define the variables in a custom theme..
For instance, for a “switch” domain it should be like “state-switch-on-color” (untested).
Surely there is someplace in existing default configuration that defines the ‘orange’ that could be changed?
This place is called a “source code”:
Users are supposed to override this in a custom theme. (not to mention card-mod)
That looks promising, however I can not find that path. Using SMB to browse the file share or using the editor in HA.
I’m assuming I need to get access to the source code from your comment?
No, you misunderstood.
Colors are hard-coded in a source code.
Users are not supposed to change this code.
Moreover, they normally do not have an access to this code.
Of course, you can take source code, change smth, but then you will need to compile/build/etc to create ready HA executable files - but you will need programming skills to do this.
I gave you the link mainly to show how these default color variables are defined.
If you need to customize colors globally in your HA setup - you need to create a custom theme.
Take this as a starting point: to create a custom theme:
- Add this into “configuration.yaml”:
frontend:
themes: !include_dir_merge_named themes
- Create “themes” folder in your main “/config” folder.
- Create an empty file “my_theme.yaml” in this “themes” folder.
- Put this into your “my_theme.yaml” file:
my_theme:
state-switch-active-color: var(--green-color)
state-input_boolean-on-color: var(--green-color)
state-binary_sensor-on-color: var(--green-color)
- Restart HA.
- Select my_theme in settings:
- Then you will get your customized look:
I created the .yaml file, copied your code exactly, restarted HA, selected the new theme.
No change, switches still turn orange.
Was I suppose to change anything?
If you followed my post properly - it should work.
Ok, sorry, you are right. It does work for switch.xxxxx , I was checking light.xxxxx
What do I need to add to make the icon green when the entity is a light.xxxxx?
I use Kasa switches. Some are dimmers, some are just on/off.
Every entity in my dashboard that is an on/off turns green with your code, everything that is a dimmer remains orange.
state-light-active-color: var(--green-color);
I appreciate your help and am making some progress but still have some issues.
I added the line state-light-active-color: var(–green-color); to my theme.
After a restart the icon just remained the same. So I changed the variable to an absolute value for green.
I have also added some other suggestions to effect the slider
Now the on/off dot turns green but the icon doesn’t.
Here is my theme, what am I doing wrong?
Light icons are processed differently because each physical light may have own color, brightness.
yes, but if they are dimers only they will show a orange icon when on.
here is my current theme as text. I can’t seem to copy from the HA editor when using an iPad, but from Mac it works much easier!
theme is named 'Jess;
jess:
Base settings
primary-color: “#00ff00” # Green for the primary theme color
state-switch-active-color: “00ff00”
state-input_boolean-on-color: “00ff00”
state-binary_sensor-on-color: “00ff00”
state-light-active-color: “00ff00”
state-icon-active-color: “#00ff00” # Ensures brightness-adjusted lights also turn green
paper-item-icon-color: “#7d7d7d” # Default icon color (gray)
paper-item-icon-active-color: “#00ff00” # Green for active lights
switch-checked-button-color: “#00ff00” # Green switch button
switch-checked-track-color: “#ccffcc” # Light green switch track
toggle-button-color: “#00ff00” # Toggle button green when active
slider-color: “#00ff00” # Green slider when active
slider-secondary-color: “#ccffcc” # Light green for inactive slider track
OK, I have been playing around with it and this works! I need to remove commented out lines. Now if I could get ‘var(–green-color)’ to be 00ff00 ( a brighter green) it would be perfect!
jess:
Base settings
primary-color: “#00ff00” # Green for the primary theme color
#state-switch-active-color: “00ff00”
#state-input_boolean-on-color: “00ff00”
#state-binary_sensor-on-color: “00ff00”
state-switch-active-color: var(–green-color)
state-input_boolean-on-color: var(–green-color)
state-binary_sensor-on-color: var(–green-color)
#state-light-active-color: “00ff00”
state-light-active-color: var(–green-color)
state-icon-active-color: “#00ff00” # Ensures brightness-adjusted lights also turn green
paper-item-icon-color: “#7d7d7d” # Default icon color (gray)
paper-item-icon-active-color: “#00ff00” # Green for active lights
switch-checked-button-color: “#00ff00” # Green switch button
switch-checked-track-color: “#ccffcc” # Light green switch track
toggle-button-color: “#00ff00” # Toggle button green when active
slider-color: “#00ff00” # Green slider when active
slider-secondary-color: “#ccffcc” # Light green for inactive slider track