I can understand them not wanting to spend a lot of time maintaining an alternative set of styles.
Could it not be as simple as allowing a user to “inject” a style sheet after the official sheet? Then the community could write and maintain these sheets without having to come up with a complete alternative UI? Go for the gold an allow an action to switch out the stylesheet based on automation and be done with it.
Is everything contained in sheets, or is there a lot of inline styles that would make this impossible?
I’d second this, the ability to override the style using a custom.css file would be great, and to my knowledge not to difficult to implement if the styles are managed via a central file
Imho - due to caching issues it’d be better done as a class added to a high level element (typically body). I’ve done this recently for an electron App, it worked really well and indeed better than adding/removing/supressing the stylesheet due to caching.
And as an idea - on the maintenance front, it should be down to the theme devs to ensure their theme works - but I get where the HA admin was coming from
A switch for a dark mode would be awesome. Also to use that switch in automations would be super. Like, after sunset switch to dark mode, yada yada. Please?
Yes, themes are available. However you can only change a few variables, and the background doesn’t have variable you can change, so you are still stuck with a light background for the main UI, cards, e.t.c.
To add on this, as stated in the docs, all of these variables: https://github.com/home-assistant/home-assistant-polymer/blob/master/src/resources/ha-style.html can be changed, I attempted changing primary-background-color: black and it seems to work partially, some areas are indeed updated, some other aren’t (as you can see in the images below). Perhaps if you really try changing all of the variables, you might see which variables change which parts.
Quick question Green Turtwig, which variables did you change to alter the color of the toggles? I’ve changed everything I could think of in the frontend and restarted the system a few times and can’t get them to switch from their traditional blue.
Indeed it’s all included now, great news. So we can get started to create and share our themes!
Some current limitiations;
Google graph background colours is still hardcoded to white. The google API cannot use our variable references, so it’s either one plain colour or otherwise transparent.
There are still quite some more hardcoded colours here and there that need to be externalized – though I think we identified the most important ones. If you note these, please report it here (or in the other related thread) and we can possibly make another pull later on to correct these as well.
There seems to be an issue with the badge on iOS (at least on my devices) but I’m not sure that’s due to the styles or to the new polymer2. Either way, the badge label border is completely gone now on iOS… very ugly.
We used the methodology as suggested by @balloob to follow hierarchical variable declarations;
Base colours: e.g. --google-grey-200, red, blue,… These are in the polymer code and can be used in templating as a reference (though probably not so useful here)
Brand variables: e.g. --primary-color, --accent-color
Applied colours: e.g. --table-row-alternative-background-color, --table-row-background-color
So that’s what we did in most of the changes. They default to (i) the applied colour if defined, (ii) the brand colours, (iii) the base colours or hardcoded values.
As a matter of personal taste, I would recommend to use a limited set of main colours (the “brand variables”), and use reference values var(--item) in the applied colours to point to those, instead of putting all the values directly there. That way, you only need to change the uppermost set of main brand colours for each of your themes. It’ll make it easier to edit (only about 10 colours to define), less prone to errors, and give a more consistent branding experience. Referenced values can still be overridden of course in cases where it may look better, but even then it’ll probably be neater to add a new main brand colour altogether for that one and reference that instead.
Here’s an example of what I mean (never mind the brand colours’ values, they’re mere placeholders):
# Brand Colours (values): Some of these referenced directly, others can be referenced by other values #
primary-color: '#03A9F4' # Primary (most of the UI)
dark-primary-color: '#0288D1' # Reference
light-primary-color: '#B3E5FC' # Reference
accent-color: '#FF9800' # Reference
primary-background-color: '#FAFAFA' # Primary background colour (dialogs, e.t.c)
secondary-background-color: '#E5E5E5' # Secondary background colour (main UI background)
divider-color: 'rgba(0, 0, 0, .12)' # Divider
primary-text-color: 'var(--dark-primary-color)' # Primary text colour, here is referencing dark-primary-color
text-primary-color: 'var(--primary-text-color)' # Primary text colour
secondary-text-color: '#727272' # For secondary titles in more info boxes etc.
disabled-text-color: '#BDBDBD' # Disabled text colour
label-badge-border-color: '#DF4C1E' # Label badge border, just a reference value
paper-grey-50: '#DEDEDE'
paper-grey-200: '#FFFFFF'
# Applied colours (references) #
# Paper card #
paper-card-header-color: 'var(--secondary-background-color)' # Card header text colour
paper-card-background-color: 'var(--primary-background-color)' # Card background colour
paper-dialog-background-color: 'var(--primary-background-color)'
paper-item-icon-color: 'var(--primary-color)' # Icon colour
paper-item-icon-active-color: 'var(--accent-color)' # Icon colour
paper-item-icon_-_color: 'var(--primary-color)'
paper-item-selected_-_background-color: 'var(--secondary-background-color)'
paper-tabs-selection-bar-color: 'var(--paper-grey-50)'
# Labels #
label-badge-red: 'var(--label-badge-border-color)' # References the brand colour label badge border
label-badge-text-color: 'var(--label-badge-border-color)' # Now same as label badge border but that's a matter of taste
label-badge-background-color: 'var(--secondary-background-color)' # Same, but can also be set to transparent here
# Nav Menu #
paper-listbox-color: 'var(--primary-text-color)'
paper-listbox-background-color: 'var(--primary-background-color)'
# Table rows #
table-row-background-color: 'var(--primary-background-color)'
table-row-alternative-background-color: 'var(--secondary-background-color)'
# Sliders #
paper-slider-knob-color: 'var(--accent-color)'
paper-slider-knob-start-color: 'var(--accent-color)'
paper-slider-pin-color: 'var(--accent-color)'
paper-slider-active-color: 'var(--accent-color)'
paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
paper-slider-secondary-color: 'var(--secondary-background-color)'
paper-slider-disabled-active-color: 'var(--disabled-text-color)'
paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'
# Switches #
paper-toggle-button-checked-button-color: 'var(--accent-color)'
paper-toggle-button-checked-bar-color: 'var(--accent-color)'
paper-toggle-button-checked-ink-color: 'var(--accent-color)'
paper-toggle-button-unchecked-button-color: 'var(--secondary-background-color)'
paper-toggle-button-unchecked-bar-color: 'var(--secondary-background-color)'
paper-toggle-button-unchecked-ink-color: 'var(--secondary-background-color)'
