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?
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
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.
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…
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 … 
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"}}}}
That’s a huge improvement in my opinion
Hi,
you can also inject your own CSS into the basic UI; see the following post(s):
with kind regards,
Patrik
Ah of course, great addition.
So cool! I wanted to do this but didn’t realize it was possible. I should of course have known better…
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 
Cheers
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.
Heads up!
I’ve just pushed initial theming support to my pull request:
Here’s a little sneak peek of them:
That’s really cool @kubawolanin! Thanks for your hard work!
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"
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
I hadn’t notice, thanks.
But on my tablet it is always the light theme loaded 
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
Hi!
Is there a textual configuration somewhere so this settings are stored when backing up or switching to a newer build?