Hi,
I like the default theme, however I can’t find a way to automatically change it to dark mode at night and to light mode at day time. I can’t even set it using the “Services” tab under “Developer Tools”.
The main reason is that I can’t find the name of the default theme which is a required key.
Is it even possible to automatically change the mode of the default theme?
No. The light/dark setting comes from the device viewing Home Assistant.
If you want to change the theme based on sunrise/sunset you have to create two themes yourself. Set the theme in your profile to backend selected and automate switching of the two themes.
You can base your day and night themes on the default light and dark themes using modes.
e.g.
frontend:
themes:
day:
modes:
light:
night:
modes:
dark:
automation
trigger:
- platform: state
entity_id: sun.sun
action:
- service: frontend.set_theme
data:
name: "{{ 'Day' if states.sun.sun.state == "above_horizon" else 'Night' }}"Hi Tom,
Between this thread and this one I haven’t been able to automate my theme switching from light to dark based onthe sun. The theme I am using is mushroom but it does not seem the want to change. if I keep the theme dark in the automation it will work with changing themes but as soon as I choose light at the scheduled time it would enable theme switching or change the mode (dark/light).
Seems like you mentioned above this is solved but I am unable to replicate (noting I am new to HA).
Cheers
@tom_l hello, what is the current way to achieve the same goal?
frontend:
themes:
day:
modes:
light:
night:
modes:
dark:
doesn’t work with 2023.12.3 -
2023-12-19 11:41:03.815 ERROR (MainThread) [homeassistant.config] Invalid config for 'frontend' at configuration.yaml, line 162: expected a dictionary for dictionary value 'frontend->themes->day->modes->light', got None, please check the docs at https://www.home-assistant.io/integrations/frontend
Invalid config for 'frontend' at configuration.yaml, line 165: expected a dictionary for dictionary value 'frontend->themes->night->modes->dark', got None, please check the docs at https://www.home-assistant.io/integrations/frontend
I replaced light: with light: {} and did the same with dark.
But set_theme doesn’t change the interface. Looks like it is not enough just to change the theme, some solution is need to apply it.
Has this option been removed? It’s even referenced in the current frontend docs, but I’m not seeing the ‘Backend-selected’ option on any of my devices. I feel like I have to be doing something really stupid…
Edit: I gather the name of this option was simply renamed to ‘Use default theme’ and the docs weren’t updated accordingly. However, I still am unable to force light/dark mode. Here’s what I have in my config:
frontend:
themes:
day:
primary-color: coral
modes:
light:
secondary-text-color: olive
night:
primary-color: coral
modes:
dark:
secondary-text-color: slategray
But setting either of these as the default theme doesn’t change the light/dark mode of any of my devices. Am I misunderstanding things?
Seems to have been renamed “Use Default Theme”.
Yeah, I eventually sussed that out.
But does HA no longer have the ability to set light/dark mode for a device?
I’m not sure as I theme everything for my night and day themes
Maybe it depends on your device being in day/night mode?
That is how the default day/night themes switch. The documentation certainly does not imply that this is necessary.
I think this is the issue. I’m explicitly relying on dark/light mode to display the correct image for my picture element card and I thought/was hoping HA could change this. Seems it can’t (would love someone to prove me wrong).
Whoa! Yeah it does.
I added light mode to my day theme and dark to my night theme.
Day theme did not look any different but but when I switched to my night theme it was totally messed up with the default HA light theme as my desktop does not have a day / night setting.
I’m confused, are you saying you got it to change the light/dark setting?
Kind of.
Because my desktop has no day/night setting that HA can use to switch between light and dark modes it was stuck on light mode, even though I specified the dark mode in my night theme.
This is utterly ridiculous that it’s been an ongoing issue for literally a freakin decade. The settings are hidden away in non relevant areas. For Christ’s sake how difficult is it to add in the dashboards section a button for light, dark or device settings? Seriously.
Non relevant?
The dashboard is not for profile settings. Settings are set in your profile.
Also, since 2013 is a bit of a long bow to draw. There was no frontend in 2013.
Me too I now migrated from using separate dark and light themes to just one theme with a dark and a light mode. And I also want to switch modes from my automations so my wall mounted tablets go light at day and dark at night.
But as you have discovered in the discussion above, HA out of the box cannot control the dark/light mode setting of the connected client browsers (…while it was in fact possible to switch between themes using the service frontend.set_theme).
The solution I found is browser_mod. It can control the light/dark mode setting of connected clients. If you leave the device_id empty in the service calls you can switch the mode for all connected clients:
# activate light mode
service: browser_mod.set_theme
data:
dark: light
target:
device_id:
# activate dark mode
service: browser_mod.set_theme
data:
dark: dark
target:
device_id:
Thanks for your solution !
I am not able to get that to work in an automation. I think my syntax might be off somehow. Do you have a full example of how you got it to work in an automation with browser_mod??
I am not doing this through automations but through Node Red, so I can’t really help you on the automation way. But you can easily create and test the correct service calls using Developer Tools → Services:
Select the service call “Browser mod: set_theme”, the device you want to target, and the mode you want to set. Then hit “Call service” and your device should react accordingly.
When this works, you can switch to YAML mode and you see the YAML version of the service call, that should help you build your automation.
Ah, I see my issue now. I have two HA instances, one test and one production. In my production environment I have the “Auto-register” feature enabled in Browser Mod and here it works fine.
If i test it out in my test environment, its a no go with the service calls and I guess that is because browser mod does not know which devices to target even if its everyone.
Would you mind sharing your Node-RED flow for changing the themes from light to dark?
