Create a sensor to determine Light/Dark mode of theme in use

basbrus · December 17, 2021, 1:49pm

A theme sensor with the mode as state or attribute can be very useful to create more immersive and adaptable lovelace-dashboards. It will be possible to code different functions based on the theme-mode your dashboard is currently in, without being solely dependent of css-variables which can only do so much.
For instance it’s then possible to show a certain card only when light mode is applied. Or changing colors based on a JS-template instead of hard-code them into a css-variable in the theme file.

tmchow · February 5, 2023, 4:16am

I’m having the same need as you and a binary sensor for this would be amazing. We’d be able to write better template code to customize colors in cards

basbrus · February 5, 2023, 8:53am

I have already found the solution, but it’s in JavaScript so can only be used with custom:button-card.
Check their for this statement to be true for DarkMode.

"[[[ if(hass.themes.darkMode) ]]]"

dragos · February 16, 2023, 2:02pm

Hi,

Aren’t you able to somehow run the statement in a script and store the output in a binary sensor?

adrien.b · February 3, 2024, 5:51pm

Did you find a solution ? I’d like to change the text colour in a card based on dark mode, but can’t find a way to get the used theme or display mode.