Basic UI:; dark theme

basicui
theme
dark
Tags: #<Tag:0x00007f15d9f2c128> #<Tag:0x00007f15d9f53f98> #<Tag:0x00007f15d9f53de0>

(Martin Korndoerfer) #1

I have a raspi with a 10" display running openhab. A browser shows the BasicUI sitemap all the time.

My problem is that the white theme of the BasicUI is too bright for my taste.

I know I could create a HABPanel with a dark background. But since my UI is still far from being finished and I also want to use the BasicUI on mobile devices, I prefer to use the BasicUI for now.

Is there any way to force the BasicUI to use a dark theme? Like you can configure in the Android app?


(Rob Pope) #2

There’s a dark theme in the OpenHAB Android app available from the App Store. The layout is similar to BasicUI so should work for your needs


(Martin Korndoerfer) #3

I know, I think you misundertood me.

I’d like to use a dark theme in a browser, similar to the one already available in the android app.


( ) #4

Hi @Grestorn,

there are no Themes for Basic UI.

However I think that might be interesting for more users and could become available in future. What we basically need for that is ab alternative style sheet and a mechanism in Basic UI to select a theme.

You can shortcut this process for yourself now and provide the css style sheet you use while you are at it. Google for greasemonkey and css if you accept the challenge…


(Martin Korndoerfer) #5

You’re perfectly right, why not just do it yourself.

I used the chrome extension “StyleBot” to adapt the stylesheet a bit. It’s so easy that I’m almost embarrassed having asked here … :slight_smile:

That’s the result after just about 10 minutes:

And if anyone is interested, here’s the StyleBot css export:

{“raspberrypi”:{"_enabled":true,"_rules":{“main.mdl-layout__content.mdl-color–grey-100”:{“background-color”:"#575757",“color”:"#cccccc"},“div.mdl-layout__header-row”:{“background-color”:"#2a43a6"},“h5.mdl-form__title.mdl-cell.mdl-cell–12-col”:{“background”:“linear-gradient(45deg, rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%)”,“border-style”:“solid”,“border-top-width”:“0”,“border-right-width”:“0”,“border-left-width”:“0”,“border-bottom-width”:“2pxpxpxpx”,“border-color”:"#616c99",“width”:“100%”},“div.mdl-form.mdl-color–white.mdl-shadow–2dp.mdl-cell.mdl-grid.mdl-cell–12-col”:{“background-color”:"#404040"}}}}


(Rob Pope) #6

That’s a huge improvement in my opinion


(Patrik Gfeller) #7

Hi,

you can also inject your own CSS into the basic UI; see the following post(s):

with kind regards,
Patrik


( ) #8

Ah of course, great addition.


(Dome) #9

So cool! I wanted to do this but didn’t realize it was possible. I should of course have known better…


(Kuba Wolanin) #10

I’ve started working on Basic UI theming feature in my spare time.
It’ll be based on css variables, just like we did it with HABPanel.
I’ll get an GH issue and PR sorted whenever I have any results :wink:

Cheers


(Dome) #11

I’ve only just started playing with this and am already pleased with the possibilities.

Thanks @kubawolanin for your work to make this more accessible.

It would be nice if this were to be accessible to the iOS app as well… the white screen can be blinding when adjusting settings in a dark bedroom. Would this need to be developed on the iOS app level, or does the app pull any kind of CSS data from the openHAB server? @patrik_gfeller’s CSS injection technique doesn’t seem to affect the display of the iOS app at all.


(Kuba Wolanin) #12

Heads up!

I’ve just pushed initial theming support to my pull request:

Here’s a little sneak peek of them:


(Dome) #13

That’s really cool @kubawolanin! Thanks for your hard work!


(Vee Cortes) #14

Since I have seen nothing new on this topic, I created the following html to inject CSS changes into my sitemap (thanks goes to patrik_gfeller):

 <html>
 <body>
 <script type="text/javascript">
     function addStyle(s) 
     {
      var ele = window.parent.document.createElement('style');
      ele.innerHTML = s;
      window.parent.document.head.appendChild(ele);
     }
     addStyle('main {border-top:2px solid #005050 !important;}');
     addStyle('input{background:#008080 !important;}');
     addStyle('div{background:#000000 !important;color:#00c0c0 !important;}');
     addStyle('button {background:#306070 !important; border:1px solid #005050 !important;}');
     addStyle('.mdl-form__row {border-bottom:1px solid #004040 !important;}');
     addStyle('.mdl-color--white{background:#000000 !important;}');
     addStyle('.mdl-form__value--slider{background:#303030 !important;}');
     </script>
     </body>
    </html>

The above needs to be save as {openhab-path}/conf/html/DarkTheme.html
You then just only need to include the following line at the end of your sitemap:

Webview url="/static/DarkTheme.html"

AV-Stiemap2


Button and color dashboard
(davorf) #15

Hello!

If I’m not mistaken, you can choose dark theme for the Basic UI. I’m using OH nightly 2.3.0 build 1202 and a setting for this is available in Paper UI -> Configuration -> Services -> UI -> Basic UI -> Theme. You can choose between Default (Light) and Dark.

Best regards,
Davor


(Vee Cortes) #16

I hadn’t notice, thanks.


(glufonec) #17

But on my tablet it is always the light theme loaded :confused:

I was a big fan of GreenT interface in OH1. I do not understand why there is so unused space in Basic UI. They could but the menu to subpanels on the left