Does anyone have any good themes yet? Would love to see what they look like and the code behind them!
TIA
12 Likes
Here is the start to mine. Material primary colors:
frontend:
themes:
red:
primary-color: "#f44336"
pink:
primary-color: "#e91e63"
purple:
primary-color: "#9c27b0"
deep-purple:
primary-color: "#673ab7"
indigo:
primary-color: "#3f51b5"
blue:
primary-color: "#2196f3"
light-blue:
primary-color: "#03a9f4"
cyan:
primary-color: "#00bcd4"
teal:
primary-color: "#009688"
green:
primary-color: "#4caf50"
light-green:
primary-color: "#8bc34a"
lime:
primary-color: "#cddc39"
yellow:
primary-color: "#ffeb3b"
amber:
primary-color: "#ffc107"
orange:
primary-color: "#ff9800"
deep-orange:
primary-color: "#ff5722"
brown:
primary-color: "#795548"
grey:
primary-color: "#9e9e9e"
blue-grey:
primary-color: "#607d8b"
4 Likes
@andrey has made a lot of folks happy with this. Just having a ‘dark mode’ was a long standing request. He’s really done a lot to extend the UI and we all owe him a round!
Remember, we’re not limited to just the primary-color; there’s a whole list of styles here:
https://github.com/home-assistant/home-assistant-polymer/blob/master/src/resources/ha-style.html
2 Likes
By inspecting the CSS, I noticed some additional CSS items not included in the ha-style.html: paper-toggle-button-unchecked-ink-color, paper-toggle-button-unchecked-button-color and paper-toggle-button-unchecked-bar-color. Useful to be able to color the unchecked buttons too.
Here’s my full list of CSS items that seem to make a noticeable difference;
Main interface:
-
--primary-color: #03A9F4;— header color, also comes back in various other places -
--text-primary-color: #ffffff;— text color in header -
--primary-text-color: #212121;— text color throughout the interface -
--paper-grey-50: #fafafa;— base color for background, recycled on various other items such as unchecked slider buttons if not overruled (e.g. paper-toggle-button-unchecked-button-color) -
--primary-background-color: var(#--paper-grey-50);— background color for the popup that you get e.g. if you click on a sensor, refers to --paper-grey-50 but can be overriden -
--paper-listbox-background-color— by @tmatheussen: part of the sidebar panel, the title of this panel being set by --primary-background-color
Buttons and sliders:
-
--paper-toggle-button-checked-ink-color: #039be5;— ? -
--paper-toggle-button-checked-button-color: #039be5;— checked button color -
--paper-toggle-button-checked-bar-color: #039be5;— checked button bar color, but an additional opacity rule is applied on top of this color -
--paper-toggle-button-unchecked-ink-color: #039be5;— ? -
--paper-toggle-button-unchecked-button-color: #039be5;— unchecked button color -
--paper-toggle-button-unchecked-bar-color: #039be5;— unchecked button bar color, but an additional opacity rule is applied on top of this color -
--paper-slider-knob-color: var(#--primary-color);— slider knob color -
--paper-slider-knob-start-color: var(#--primary-color);— ? -
--paper-slider-pin-color: var(#--primary-color);— slider value popup color -
--paper-slider-active-color: var(#--primary-color);— the active part of the slider -
--paper-slider-secondary-color: var(#--light-primary-color);— the inactive but below middle part of the slider -
--paper-slider-container-color: var(#--divider-color);— the inactive and above middle part of the slider
I’m sure some of the others in ha-style.html have an effect but I haven’t yet discovered those.
Some other interesting ones that unfortunately are overriden by other code and therefore do not work (they’re activated in the theme, but overruled):
-
ha-label-badge-color: '#DEDEDE'— the color around the badges -
paper-tabs-selection-bar-color: '#DEDEDE'— the colored line under the sheet tabs
The main background color #E5E5E5 which is critical of course for a night mode is defined as background-color: var(--primary-background-color); so it works by just changing that one, but unfortunately this one too is overruled by a hardcoded background-color: #e5e5e5; that is applied on top of it. Same for some other useful main colors such as the icons/text in the tab sheets and the white groups background color.
5 Likes
That said, here is my first attempt at a new theme;
primary-color: '#333577'
primary-text-color: '#090A3B'
paper-grey-50: '#DEDEDE'
primary-background-color: '#FFFFFF'
text-primary-color: '#FFFFFF'
paper-toggle-button-checked-button-color: '#FFD700'
paper-toggle-button-checked-bar-color: '#FFA726'
paper-toggle-button-checked-ink-color: '#FFA726'
paper-toggle-button-unchecked-button-color: '#EAEAEA'
paper-toggle-button-unchecked-bar-color: '#DEDEDE'
paper-toggle-button-unchecked-ink-color: '#DEDEDE'
paper-slider-knob-color: '#FFD700'
paper-slider-knob-start-color: '#FFD700'
paper-slider-pin-color: '#FFD700'
paper-slider-active-color: '#FFD393'
paper-slider-secondary-color: '#DEDEDE'
paper-slider-container-color: '#F2F2F2'
ha-label-badge-color: '#DEDEDE'
paper-tabs-selection-bar-color: '#DEDEDE'
3 Likes
For what it’s worth, the sidebar where you can select the panels, can be changed using the variable --paper-listbox-background-color
Only because I use other software that allows custom branding and themes. If you add !important to the end of that css does it work?
Example
paper-tabs-selection-bar-color: ‘#DEDEDE’ !important
No unfortunately !important doesn’t work either. I tried, but I think it only works for inline styles (see https://stackoverflow.com/questions/4616964/css-important-not-working) but this is set in the CSS in the code somewhere.
Edits:
I looked a bit further into the files… Seems the culprit is /src/layouts/partial-cards.html in the polymer-master (line 30), where app-header-layout is hardcoded as #E5E5E5. This overrules the file /src/resources/ha-style.html (line 72) where the entry app-header-layout is set to background-color: var(–primary-background-color);. I think that by adding !important there we could have the latter override the former, so that would be background-color: var(--paper-grey-50) !important; (note: also changed it to --paper-grey-50). Alternatively remove the former altogether (and still change the latter to paper-grey-50 
).
Similarly, the white background in the group badges is hardcoded in /src/components/ha-card.html (line 12) and could be changed to background-color: var(--primary-background-color);.
I could go on… But with those two fixes I think we could create a pretty decent night mode already.
2 Likes
I know it’s not a theme made with the new ‘themes:’ option, but still I’d like to share this. It would be great be able to override the hard-coded polymer CSS too (not only the variables). To create this I used Stylish to overwrite the CSS, which makes it only client based, so it’s far from ideal. Still I’d love to be able to create something like this once it gets more advanced.
6 Likes
Awesome! I was hoping with the themes I could do something like this too. Hopefully this is where it is going with future updates.
Where can I find the dark theme configuration + preview?
You’ll have to build it. Or when I get time I’ll build one and share it. But the feature was just put out there to do themes; no prebuilt themes were included.
1 Like
Oh, I thought it was available, because your wrote:
@andrey has made a lot of folks happy with this. Just having a ‘dark mode’ was a long standing request. He’s really done a lot to extend the UI and we all owe him a round!
There was a long time feature request for a dark mode here:
This is now possible, but someone will have to create it and share it or you will need to make it yourself.
Actually, having a “dark” theme still isn’t possible yet. You can change quite a few variables for colours, but others are hard coded, for example the card and grid background colours. Making them use variables however is an easy fix and I’m sure I’ll be fixed in a short while.
So in the mean time, a proper “dark theme” isn’t available unfortunately. 
This can be done - a similar method is used in HADashboard for inserting CSS Strings in Jinja2. Maybe @andrey can base it off of that.
@PhysicalMagic what browser are you using?
I wonder if Stylish supports shadow dom. (Used in Chrome)
So when will it be available? How dark can you maximally go currently, which parts of the UI stay in a lighter colour palette? 
I have no idea when theming support will be more widely implemented.
You can make the background colour of the panel and pages other than the “State” page to whatever you like.