OpenHab 3, Main UI - How do you change Theme colours and Dark Mode?

Setup, Configuration and Use Scripts & Rules
1

How do I set Theme colours and dark mode in OpenHab 3?
I’ve only found a few forum posts about this and I can’t make any of it work. It mostly seems to deal with Basic UI, not Main UI.

Now that I am experimenting with background colours and images, I’m noticing that when my device switches between light and dark mode the designs and colour don’t look so good any more.

I’d like to do a combination of forcing theme colours on some pages, and reading the Theme state to control other UI elements.

I also see in the F7 docs stuff about other colour themes. Can we use these?

2

You can`t change the dark / light theme on a per page basis with a parameter as it’s defined app-wide. What comes close to what you’d like to achieve, would be to set the styles on the page level:

  style: >
    --f7-text-color: #fff;
    --f7-page-bg-color: #121212;
    --f7-navbar-bg-color: #202020;

This is possible with expressions inside the widget-code…

component: f7-card
config:
  title: '=themeOptions.dark === "light" ? "Light color theme" : "Dark color theme"'
3

Thank you. I will try these out.

You say the theme is set app wide. How do I set this so I could at least stick with just one?

4

Help & About in the left navigation → Dark Mode

1 Like
5

Interesting.

Appearance (for this device only)

Does this imply that the theme cannot be set system wide to force a style choice?

6

Yes, afaik. If you see a benefit in doing so, don’t hesitate to open an issue in the WebUI repo.

7

Ok, thanks.
There’s something here alright.
My plan is to style pages with conditional gradient colors (could be temperatures or state of alarm for example) over images (something simple and consistent).
When choosing a light or dark background, the brightness of the text needs to be the opposite.
And when the colours of cells and other elements change, it can be ugly.

The better option is probably to set backgrounds according to theme, not set theme to background.

8

Dear all, is there any news to this topic? For my wall tablet I want to display some pages dark and some light (for example a screensaver page). Also switching based on daytime would be great. Only solution I found is to adapt the background and text color of every single widget. Which is bad because for most of the default widgets I have to re-create custom widgets in order to change text color (am I right?).

9

Is it possible to force the theme to a specific value no matter which user is using OH?
I’d like the dark theme to be the by default value.
Is there a trick (like a parameter to pass to the query or somethn to add to the page code)?

10

if you do it with CSS, the term to google for is “color-scheme: dark”. That goes in a style tag. Unfortunately I did not yet figure out how to make that work with OH.

11

I am still interested about a easy way to just turn a openhab UI page to darkmode. I do have a screensaver page for my wall tablet and i would love to just turn the background to black and every font color and icons to white. Till now i didnt find a easy way. Maybe someone can help with this? :slight_smile: