"Dark" theme, or "night" mode/theme

Sorry for the late reply, didn’t show up in my notifications for some reason.
I changed these variables:

paper-toggle-button-checked-ink-color: "#FB8C00"
paper-toggle-button-checked-button-color: "#FB8C00"
paper-toggle-button-checked-bar-color: "#FB8C00"


It is getting pretty dark in here :slight_smile:


Woooow niiiiiceeee :). Need to download those files and swap the new ones in and the old ones out :).

Can you share the yaml for that?

When we have finished the variable names I will share the config

Just to make it clear this isn’t implemented yet.

2 posts were split to a new topic: Black and Green Theme

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)'

Working on 2 themes: cyan and red

And on smartphone:


nice!!, can you pls share the code?

1 Like

Still working on it, which are you interested in?

1 Like

Oh I do like the Red one… easier for me to read than the standard light one…

1 Like

The cyan one please.
(Perfect weer vandaag om zoiets te doen :wink:)

I’m also interested in the red one! That looks amazing.

1 Like

Any idea which setting controls the colors of these URLs? I need to set them to a lighter (readable) color when using a dark theme.



I’m afraid this one hasn’t been set yet… We could set the default <a> styling in src/layouts/home-assistant-main.html, I suppose, in a next pull request. Currently since it is not set it falls back to your default browser value (in most cases blue for unvisited links and purple for visited links).

1 Like

6 posts were split to a new topic: Orange Theme

6 posts were split to a new topic: Dark Red Theme

See frontend docs here

Thank you, I completely ignore the part where I have to actually set theme lol

Can you send me a screenshot?