Hey there,
i want to create my own theme. For that in github there is mentioned to edit files that are in the following folder:
web/assets/styles/themes
but i do not have such a folder?
Could you tell me, where i can find the files? I installed habpanel via paper-ui.
Greetings Nic
@ysc:
In the past i “installed” habpanel via git and then there the folder has been there.
Now, i only could install via paper-ui (right?) and then i miss the folder?
I really would like to theme a little bit 
Adding a theme is not straightforward, it’s a development task …that being said, I would love to receive new theme contributions!
Here are the guidelines on how to do it - this will be added to the CONTRIBUTING.md document:
You need to install:
npm install -g gulp-clinpm install -g bowerClone the git repository into your static (e.g. conf/html) directory so you can run it at http://xyz:8080/static/org.openhab.ui.panel/web/ or similar;
Use your shell/commandline to navigate to HABPanel’s web directory;
Run: npm install in HABPanel’s web directory (this will take a while);
Run: bower install in HABPanel’s web directory (this will take a while);
Go to assets/styles/themes and copy one or directories there (default or another one) to a new name. Delete the oldtheme.min.css file since it will be regenerated and rename oldtheme.scss to yourtheme.scss (yourtheme = name of the folder you created)
Make your desired changes - the themes all have a _variables.scss file defining default colors etc. and some have “final overrides” in the main SCSS file… try to understand how they work;
Edit assets/styles/themes.json and add your new theme there, with id being the name of your folder/SCSS file and name an user-friendly name;
In HABPanel’s web directory, run either:
gulp sass: this will regenerate once all the minified CSS files - verify yours was generated properly in the folder you created in 5.
gulp watch: this will run until you abort it, wait for changes in any of the .scss files and regenerate everything each time a change is detected
If you reload HABPanel in your browser, your theme should now appear in HABPanel’s settings and you can select it.
Once you’re done, please submit a pull request (include only the modified files in assets, not vendor please) so everyone can enjoy it 
Please read and respect the contributing guidelines (sign your commits etc.) in CONTRIBUTING.md
Good luck! 
@ysc I was playing around with CSS custom properties lately. What do you think about writing the theming part with CSS props?
This way theming the app would be a matter of modifying the :root node in CSS, like so:
:root {
--background-color: #333;
--accent-color: #0db9f0;
... etc
}
And using it in the context:
.value {
color: var(--accent-color);
text-align: center;
}
You could also use fallback with respect to the old API/LESS variables:
.value {
color: var(--accent-color, $widget-text-color);
text-align: center;
}
WDYT?
I started a little POC locally, will let you know about my progress.
@kubawolanin that’s very interesting! And it seems rather well supported too!
Do you mean not replacing the whole “pre-compiled” theming feature entirely, and rather keep the themes as they are (they can be more “powerful” indeed since they can override classes completely e.g. add rounded borders, drop shadows etc.) and use this technique to allow the user to override some of the theme’s provided variables (colors mainly)?
Simply having an UI to alter a few colors would already be quite nice!
Thanks, please do!
Yes, that was my initial thought. On the other hand, I’d love to see third party themes in a single something.theme.json file or even a CSS file with a strict structure (:root and whatnot).
You can easily utilize CSS custom properties for border-radius/fonts/etc. as well.
This way we could let people just focus on theming stuff like this without the hassle of setting up the dev environment.
So let’s leave LESS fallbacks for now and after I’m done with my proof of concept, we can discuss further steps with this 
Who knows, maybe it’d be beneficial to get rid of precompiled themes altogether?
Best,
Kuba
The advantage of pre-compiled themes (with overrides) is that they’re quick and easy to load and probably less prone to errors, but (apart from being hard to develop) they are quite bulky - basically each theme is a standalone version of Bootstrap.
But that can also be a good thing too - in theory even third-party Bootstrap skins and mods could come in play and make HABPanel look significantly different.
To ease things for non-developers though, CSS variables are clearly the way to go for simple, targeted things - background/primary colors, opacity, borders, font sizes maybe.
I would avoid unrestricted CSS access to the user for security reasons - allowing the stylesheet to be altered potentially remotely through an unsecure API… granted, it’s already possible via templates.
Hey there,
I tried the steps but after running gulp sass I get the following errors and no min-file is created:
[13:11:58] Using gulpfile /opt/openhab2/conf/html/habpanel/web/gulpfile.js
[13:11:58] Starting ‘sass-themes’…
[13:11:58] Finished ‘sass-themes’ after 70 ms
[13:11:58] Starting ‘sass-vendor’…
[13:11:58] Finished ‘sass-vendor’ after 15 ms
[13:11:58] Starting ‘sass’…
[13:11:58] Finished ‘sass’ after 12 μs
[13:11:58] Plumber found unhandled error:
Error in plugin ‘gulp-sass’
Message:
vendor/vendor.scss
Error: File to import not found or unreadable: …/bower_components/angular-gridster/dist/angular-gridster
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/vendor/vendor.scss
on line 15 of vendor/vendor.scss
@import “…/bower_components/angular-gridster/dist/angular-gridster”;
^
Details:
status: 1
file: /opt/openhab2/conf/html/habpanel/web/vendor/vendor.scss
line: 15
column: 1
formatted: Error: File to import not found or unreadable: …/bower_components/angular-gridster/dist/angular-gridster
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/vendor/vendor.scss
on line 15 of vendor/vendor.scss
@import “…/bower_components/angular-gridster/dist/angular-gridster”;
^
messageFormatted: vendor/vendor.scss
Error: File to import not found or unreadable: …/bower_components/angular-gridster/dist/angular-gridster
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/vendor/vendor.scss
on line 15 of vendor/vendor.scss
@import “…/bower_components/angular-gridster/dist/angular-gridster”;
^
messageOriginal: File to import not found or unreadable: ../bower_components/angular-gridster/dist/angular-gridster
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/vendor/vendor.scss
relativePath: vendor/vendor.scss
[13:11:58] Plumber found unhandled error:
Error in plugin ‘gulp-sass’
Message:
assets/styles/themes/default/default.scss
Error: File to import not found or unreadable: …/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/default/default.scss
on line 2 of assets/styles/themes/default/default.scss
@import "…/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootst
^
Details:
status: 1
file: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/default/default.scss
line: 2
column: 1
formatted: Error: File to import not found or unreadable: …/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/default/default.scss
on line 2 of assets/styles/themes/default/default.scss
@import "…/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootst
^
messageFormatted: assets/styles/themes/default/default.scss
Error: File to import not found or unreadable: …/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/default/default.scss
on line 2 of assets/styles/themes/default/default.scss
@import "…/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootst
^
messageOriginal: File to import not found or unreadable: ../../../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/default/default.scss
relativePath: assets/styles/themes/default/default.scss
[13:11:58] Plumber found unhandled error:
Error in plugin ‘gulp-sass’
Message:
assets/styles/themes/material/material.scss
Error: File to import not found or unreadable: …/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/material/material.scss
on line 2 of assets/styles/themes/material/material.scss
@import "…/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootst
^
Details:
status: 1
file: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/material/material.scss
line: 2
column: 1
formatted: Error: File to import not found or unreadable: …/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/material/material.scss
on line 2 of assets/styles/themes/material/material.scss
@import "…/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootst
^
messageFormatted: assets/styles/themes/material/material.scss
Error: File to import not found or unreadable: …/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/material/material.scss
on line 2 of assets/styles/themes/material/material.scss
@import "…/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootst
^
messageOriginal: File to import not found or unreadable: ../../../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/material/material.scss
relativePath: assets/styles/themes/material/material.scss
[13:11:58] Plumber found unhandled error:
Error in plugin ‘gulp-sass’
Message:
assets/styles/themes/material-blue/material-blue.scss
Error: File to import not found or unreadable: …/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/material-blue/material-blue.scss
on line 2 of assets/styles/themes/material-blue/material-blue.scss
@import "…/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootst
^
Details:
status: 1
file: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/material-blue/material-blue.scss
line: 2
column: 1
formatted: Error: File to import not found or unreadable: …/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/material-blue/material-blue.scss
on line 2 of assets/styles/themes/material-blue/material-blue.scss
@import "…/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootst
^
messageFormatted: assets/styles/themes/material-blue/material-blue.scss
Error: File to import not found or unreadable: …/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/material-blue/material-blue.scss
on line 2 of assets/styles/themes/material-blue/material-blue.scss
@import "…/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootst
^
messageOriginal: File to import not found or unreadable: ../../../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/material-blue/material-blue.scss
relativePath: assets/styles/themes/material-blue/material-blue.scss
[13:11:58] Plumber found unhandled error:
Error in plugin ‘gulp-sass’
Message:
assets/styles/themes/material-dark/material-dark.scss
Error: File to import not found or unreadable: …/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/material-dark/material-dark.scss
on line 2 of assets/styles/themes/material-dark/material-dark.scss
@import "…/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootst
^
Details:
status: 1
file: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/material-dark/material-dark.scss
line: 2
column: 1
formatted: Error: File to import not found or unreadable: …/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/material-dark/material-dark.scss
on line 2 of assets/styles/themes/material-dark/material-dark.scss
@import "…/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootst
^
messageFormatted: assets/styles/themes/material-dark/material-dark.scss
Error: File to import not found or unreadable: …/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/material-dark/material-dark.scss
on line 2 of assets/styles/themes/material-dark/material-dark.scss
@import "…/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootst
^
messageOriginal: File to import not found or unreadable: ../../../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/material-dark/material-dark.scss
relativePath: assets/styles/themes/material-dark/material-dark.scss
[13:11:58] Plumber found unhandled error:
Error in plugin ‘gulp-sass’
Message:
assets/styles/themes/paleblue/paleblue.scss
Error: File to import not found or unreadable: …/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/paleblue/paleblue.scss
on line 2 of assets/styles/themes/paleblue/paleblue.scss
@import "…/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootst
^
Details:
status: 1
file: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/paleblue/paleblue.scss
line: 2
column: 1
formatted: Error: File to import not found or unreadable: …/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/paleblue/paleblue.scss
on line 2 of assets/styles/themes/paleblue/paleblue.scss
@import "…/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootst
^
messageFormatted: assets/styles/themes/paleblue/paleblue.scss
Error: File to import not found or unreadable: …/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/paleblue/paleblue.scss
on line 2 of assets/styles/themes/paleblue/paleblue.scss
@import "…/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootst
^
messageOriginal: File to import not found or unreadable: ../../../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/paleblue/paleblue.scss
relativePath: assets/styles/themes/paleblue/paleblue.scss
[13:11:58] Plumber found unhandled error:
Error in plugin ‘gulp-sass’
Message:
assets/styles/themes/translucent/translucent.scss
Error: File to import not found or unreadable: …/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/translucent/translucent.scss
on line 2 of assets/styles/themes/translucent/translucent.scss
@import "…/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootst
^
Details:
status: 1
file: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/translucent/translucent.scss
line: 2
column: 1
formatted: Error: File to import not found or unreadable: …/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/translucent/translucent.scss
on line 2 of assets/styles/themes/translucent/translucent.scss
@import "…/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootst
^
messageFormatted: assets/styles/themes/translucent/translucent.scss
Error: File to import not found or unreadable: …/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/translucent/translucent.scss
on line 2 of assets/styles/themes/translucent/translucent.scss
@import "…/…/…/…/bower_components/bootstrap-sass/assets/stylesheets/bootst
^
messageOriginal: File to import not found or unreadable: ../../../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss
Parent style sheet: /opt/openhab2/conf/html/habpanel/web/assets/styles/themes/translucent/translucent.scss
relativePath: assets/styles/themes/translucent/translucent.scss
What am I doing wrong?
@Dominic_Bialas sorry 
I overlooked the need for bower, another tool to install.
I have updated the instructions above. If you did everything else you only need to run:
npm install -g bower (with admin privileges) to install bower, then bower install to fetch the dependencies.
Next, you can try gulp sass again.
I want to make a simple Style-overwrites for the “Active” and the “Inactive” backgroundcolors of the Button-widget in such away that I have a new template-wide default for this widget and I don’t have to change the Active (e.g. to red) and Inactive (e.g. to green) background manually on every new button-widget I add.
In every theme the defaults for Active and Inactive backgroundcolors in the button-widget are identical.
Is there a CSS-style that let’s me set the default backgroundcolors of Active (e.g. to red) and Inactive (e.g. to green) for the Button-Widgets? How can I differentiate by default? (And still can make use of changing the background-settings in the widget on occasions I want to change them for a particular button-widget on purpose)
p.s.: I’ve found the CSS-style –box-bg (in the defaults.css) but this style changes both Active and Inactive identical (and changes a lot of other elements’ backgrounds as well)
Just checked, unfortunately there’s no way to do it right now - no css class is applied to active buttons.
Pitty. Thanks for your reply and effort. Perhaps it might be added as a future feature.
Hi,
I tried to follow your instruction on how to install npm without success. Currently running OH2 on an ubuntu server. I get the following message:
Command ‘npm’ not found, but can be installed with:
sudo apt install npm
Paketlisten werden gelesen… Fertig
Abhängigkeitsbaum wird aufgebaut.
Statusinformationen werden eingelesen… Fertig
E: Paket npm not found.
Need some help on following your guideline on a ubuntu server
Cheers
Edit:
after an upgrade and reboot I could install nodejs. Bower seems to be deprecated and it recommend to use Yarn, Webpack or Parcel. But any way I could now install these packages without an error.
Where is the HABPanel’s web directory on ubuntu?