I’d like to have my own dark and light theme applied automatically by the HA app. Or actually I’d like to have a bit customized version of the default theme (more rounded card edges).
I can of course do my own themne, but it won’t be applied automatically when I switch between dark and light mode in my HA app. It will only use the default light and dark theme.
Can we have a possibility to specify (eg in configuration.yaml) which theme is the default theme for light and which one is the default for the dark mode?
This actually is possible right now. It’s not in the GUI (as far as I know), but you can go into Developer Tools -> Services and call the frontend.set_theme service. If you look at the example data that it provides, you can specify the name of the theme you want to set and whether it should be used for light or dark mode, based on what your device setting is. HA was updated several months back so that it also remembers these settings after a reboot, so you don’t need an automation to set it on start up either. Hope that helps!
I’m not sure that is what the OP meant. I believe I’m currently searching for a similar (if not the same) solution. The problem is I use private browsing mode, apparently, which makes HA revert to the Light version of the default theme whenever I open a new tab and every time I launch a new browser session of HA, even though I had set it to Dark. HA does not remember this setting, because it appears to be saved in the browser cache. I suspect this is because you can customize it per device, which is cool.
So, I am looking for a way to create a simple custom Theme that simply imports the default theme set to Dark, but so far, have not found a way to do that. Your suggestion of the Service Call is the only way indicated in the Docs, but it would be nice to have something like the following in a customer theme.
Yeah, I know, but it wont’ stay dark. That’s the problem. I have to reset it every time I open a new tab or relaunch HA in a browser. That Dark setting isn’t saved. That’s why I was trying to duplicate the default Dark them in my own file.
What do you mean?
All new tabs should follow the backend-selected theme. If you set the theme twice using mode: light and mode: dark, you should be good to go.
You only get the option to choose Auto/Light/Dark when default is selected in the theme dropdown. backend_selected is whatever theme you set via the service call frontend.set_theme, and although this stays set with new tabs and new launches, it only does when you set a custom theme. I could not set default:dark as the theme in the service call and it maintain it. It would always revert to 'default:light`.
I have been able to create a theme that matches default:dark that I can set through the service and then set backend_selected and it maintains it. Getting that custom theme right was the hard part. The only thing I’ve found that is different is that the Map background is white in my theme and dark in the default:dark theme. Not sure yet where that setting is. Once I get the copy of the default:dark theme working 100%, I’ll post it here.
Replying to an old thread, but how did you solve the issue @GrizzlyAK? I’d also like to set dark mode as default but did not succeed so far (even after reading through this thread).