Allow HA to control text style, to help with dark mode

[Kallb123]

I've managed to get a floor plan running, which is fantastic and helpful. Some of my sensors are located over a transparent background. This means when home assistant goes into dark mode, I can't see black text. Is there a class or method I can apply to the text fields that mean they can change colour to match HA text?

[exetico]

Please start by sharing your current text solution. Else, its a bit hard to help you out.

It's for sure possible to get the theme-state or so, bug I dont really think thats the best solution.

In my own solution the temperature color are shown on basis of the theme, if I remember correctly.

[OzGav]

Applying the CSS is easy. The issue I think you have it working out what mode your device is in. If you are happy to always be in dark mode then you adjust that by clicking on the circle in the bottom left of the screen and change it in your profile.

[exetico]

It's actually not that easy, if I understand your request. Each user has the option to change theme and mode - therefore it's not an option to fetch directly from HA.

But it sounds like we can find a work-around for your need.:

---

One option is to use `browser_mod` and fetch the `darkMode: true` attribute for the current devices sensor in Home Assistant.

Another and more simple solution is to just listen to the browsers informations.

In Javascript you're able to spot darkMode with something like:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
 console.log("Yes, darkMode");
}

But that's actually totally overkill if you're already considering going down that road. Cause it's a baked in CSS media feature.

Take a look at the link. It's fairly easy to work with, and here you could just add .whateverClassYouWouldLike to the text-object, and style it like the following:

.whateverClassYouWouldLike   { color: "lightgrey"}
@media (prefers-color-scheme: dark) {
  .whateverClassYouWouldLike{color:white;}
}

@media (prefers-color-scheme: light) {
  .whateverClassYouWouldLike{color:black;}
}

There's a good suggestion on how to use .day and .night in the link, too.

[Kallb123]

Ah thank you, that CSS media query looks exactly like what I need! I'm familiar with CSS, but didn't know about the media query. If that works through all my devices then that will be amazing. I'll give that a try soon and let you know. Thanks again.

[Kallb123]

Thanks @exetico. You cracked it. Those media queries combined with a certain class on the text objects made them completely flexible. It works across mobile and desktop, including the HA app :)

I just had to use fill and stroke instead of color.

[exetico]

Thats great to hear 😊!