Icon Colors Different in Desktop vs Mobile

[CaptTom (Tom)]

I see a very different look on a Desktop or Laptop from what I see on a mobile device. Here’s the desktop view:

Here’s the same thing on a mobile (Android) device:

The energized devices (lights and heat) are blue on the mobile, yellow on the desktop. The sliders are colored when “on” with the mobile and gray with the desktop.

To me, the mobile version looks a lot better. I find it easier to recognize the status at a glance with this.

Does anyone know how I can get the desktop version to look more like the mobile version? I’m running HA 0.105.5 on Hass.io on a Raspberry Pi 3B+.

Thank you!!

PS: I know there have been some changes, and apparently more to come, with the whole icon color change debate. I don’t really mind whose opinion wins out. What’s important is that the user (me) can choose which method to use, and that they look similar whether on a mobile device or desktop. For reference here are some links about the icon color change issue:

All Icons and Switches Grayed Out

I really don’t know when this started, and it’s only a minor annoyance, but I’m hoping maybe there’s an obvious fix… In Lovelace, all the little icons next to the entries, and the slider bars for switches, are grayed out. They used to be blue when “on” or “true.” Here’s an example: [image] In this example, “Study Lamp” and “Heat 1st” are both “On.” The slider, the lightning bolt icon and the check mark (tick mark) icon used to be colored blue in this state. I’ve not really played much with L…

Icon color change

Hi All, Im using custom_ui and lot of icons get right color. Now I want add 1 based on temperature. sensor.dark_sky_temperature: friendly_name: Current Temperature templates: icon_color: >- if (state < '-23') return 'rgba(255,0,255,1)'; if (state < '-18') return 'rgba(139,0,139,1)'; if (state < '-12') return 'rgba(128,0,128,1)'; if (state < '-7') return 'rgba(0,0,255,1)'; if (state < '-1') return 'rgba(135,206,236,1)'; if (state < '4') return 'rgba(0…

Change Icon with State Change

homeassistant: customize: binary_sensor.garage_door_one: icon: mdi:garage binary_sensor.garage_door_two: icon: mdi:garage I have been searching for a couple of weeks now and can’t seem to find the answer. It seems like it should be easy…and probably is, I just can’t find it. I want to use to different icons “garage-open” and “garage” and possibly “garage-alert” depending on the state. Any help to point me in the right direction would be appreciated. Thanks

[petro]

You’re using the default theme on mobile and you changed your theme on desktop. Change your theme back to default on desktop.

[CaptTom (Tom)]

Thank you! I had no idea you could set different themes for mobile and desktop.

Would you mind explaining how? I went to “Configure UI” and hit the edit (pencil) icon for the view that these cards are on. It was backend-selected so I changed it to default. No difference in behavior.

I went to each card and selected “edit.” One has “theme: default” and the other has no theme entry.

I did this both on the desktop (laptop) and on a mobile device. No difference.

[petro]

Go to your profile/user, and in there is the currently selected theme.

FYI, themes are set based on profile/user and device based. So each user on a specific device can have a separate theme.

[CaptTom (Tom)]

@petro

Go to your profile/user, and in there is the currently selected theme.

That was it, thanks!!!