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"
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.
Indeed it’s all included now, great news. So we can get started to create and share our themes!
Some current limitiations;
We used the methodology as suggested by @balloob to follow hierarchical variable declarations;
--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)--primary-color, --accent-color
--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)'nice!!, can you pls share the code?
Still working on it, which are you interested in?
Oh I do like the Red one… easier for me to read than the standard light one…
The cyan one please.
(Perfect weer vandaag om zoiets te doen 
)
I’m also interested in the red one! That looks amazing.
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).
Thank you, I completely ignore the part where I have to actually set theme lol
Can you send me a screenshot?
