Thanks for reply
But if I want ads more than one theme how put it to frontend.yaml file?
Can you share your theme cyan ?
My example shows how to add more than one theme 
Thanks I added more than one theme. Thanks
Trying to use this REALLY NICE theme but something went wrong so i can’t se the devices names in the logbook! Any ideas what to change?
1 Like
is there an overview of built-in colors we can use out of the box? red, green, white yellow seem to work when creating a theme, but grey or brown not.
Other then specifying the colors like this “#4e4e4e” id love to read which colors are builtin so to speak.
Cheers,
Marius
What did you use for your floorplan? I used sketchup, I’m just not happy with it.
Luckily our home builder had our floorplans available as an svg file on their website. So I just grabbed them and modified.
5 Likes
Thanks!
Since all themes I saw were using codes instead of names I thought that wasn’t possible. (Have to check why Grey and Brown didn’t stick at first, showing alright now)
Why on earth isn’t this the standard for using colors in Hassio. So much easier and humanely understandable …?
Cheers
Marius
Because you are limited to 140 colours, where as with the numbers 16milion colours.
Can someone tell me how I can add fonts? I have a ttf file with a font that I would like to use in my frontend.
2 Likes
lol, sure, i see. And understand, of course. Still hard pressed if not sufficient colors available in these 140…
Hi @daxm
Have you solved your “questions”?
I’d like, as you, to change the color of charts and for the following icons and “slide” rules.
Which variables are controlling this items or are they hard coded? 
Thank you very much for your help 
3 Likes
This is my dashboard at the moment, I’m still working on the theme, but I think most of what I want to change isn’t possible with the current theme engine 
6 Likes
How can I add a theme ?
i made a file x.yaml. In config.yaml I hadde themes: !include theme_x.yaml . What do I have to wright in frontend: ?
I have this error : homeassistant.config:Invalid config for [homeassistant]: [themes] is an invalid option for [homeassistant].
I have:
frontend:
themes: !include themes.yaml
and in the yaml (based on @PhysicalMagic):
Matrix_Theme:
name: 'Matrix Theme'
# MyVariables
base-hue: '120' #Controls the base (and accent) color hue (0-360) | 0=Red 60=Yellow 120=Green 180=Cyan 240=Blue 300=Magenta 360=Red
base-sat: '16%' #Controls the saturation of the theme (0%-100%) | 0%=Grey 100%=Full Saturation
# MyVar
huesat: 'var(--base-hue), var(--base-sat),'
# Primary Color
primary-color: 'hsl(var(--huesat) 20%)'
# Backgrounds
primary-background-color: 'var(--primary-color)'
secondary-background-color: 'hsl(var(--huesat) 16%)'
paper-listbox-background-color: 'var(--primary-color)'
paper-card-background-color: 'hsl(var(--huesat) 12%)'
paper-dialog-background-color: 'var(--paper-card-background-color)'
table-row-background-color: 'hsl(var(--huesat) 12%)'
table-row-alternative-background-color: 'hsl(var(--huesat) 10%)'
# Devider
divider-color: 'hsla(0, 0%, 0%, 0)'
dark-divider-opacity: '0'
light-divider-opacity: '0'
# Text colors
primary-text-color: 'hsl(var(--huesat) 60%)'
text-primary-color: 'hsl(var(--huesat) 60%)'
secondary-text-color: 'hsl(var(--huesat) 60%)'
disabled-text-color: 'hsl(var(--huesat) 70%)'
sidebar-text_-_color: 'hsl(var(--huesat) 90%)'
sidebar-text-color: 'hsl(var(--huesat) 90%)'
paper-card-header-color: 'hsl(var(--base-hue), 90%, 50%)'
# Text Adjustments
paper-font-headline_-_letter-spacing: '-0.5px'
paper-font-headline_-_font-weight: '500'
paper-font-body1_-_font-weight: '500'
# Nav Menu
paper-listbox-color: 'hsl(var(--huesat) 50%)'
paper-grey-50: 'hsl(var(--huesat) 50%)'
paper-grey-200: 'hsla(var(--huesat) 26%)'
# Paper card
paper-item-icon-color: 'hsl(var(--huesat) 30%)'
paper-item-icon-active-color: 'var(--paper-item-icon-color)'
paper-item-icon_-_color: 'var(--paper-item-icon-color)'
paper-item-selected_-_background-color: 'hsla(0, 0%, 0%, 0.2)'
paper-tabs-selection-bar-color: 'hsla(0, 0%, 0%, 0.2)'
# Labels
label-badge-red: 'hsla(0, 0%, 0%, 0)'
label-badge-border-color: 'var(--label-badge-red)'
label-badge-background-color: 'var(--paper-card-background-color)'
label-badge-text-color: 'var(--primary-text-color)'
# Shadows
shadow-elevation-2dp_-_box-shadow: 'inset 0px 0px 0px 4px hsl(var(--huesat) 18%)'
shadow-elevation-16dp_-_box-shadow: 'inset 0px 0px 0px 4px hsl(var(--huesat) 28%)'
# Switches
paper-toggle-button-checked-button-color: 'hsl(var(--base-hue), 90%, 50%)'
paper-toggle-button-checked-bar-color: 'hsl(var(--huesat) 25%)'
paper-toggle-button-unchecked-button-color: 'hsl(var(--huesat) 25%)'
paper-toggle-button-unchecked-bar-color: 'hsl(var(--huesat) 5%)'
# Sliders
paper-slider-knob-color: 'hsl(var(--base-hue), 90%, 50%)'
paper-slider-knob-start-color: 'hsl(var(--base-hue), 80%, 25%)'
paper-slider-pin-color: 'hsl(var(--base-hue), 90%, 50%)'
paper-slider-active-color: 'hsl(var(--base-hue), 90%, 50%)'
paper-slider-container-color: 'hsl(var(--huesat) 28%)'
paper-slider-secondary-color: 'hsl(var(--huesat) 90%)'
paper-slider-disabled-active-color: 'hsl(var(--base-hue), 80%, 25%)'
paper-slider-disabled-secondary-color: 'hsl(var(--base-hue), 80%, 25%)'
paper-dialog-color: 'hsl(var(--base-hue), 20%, 80%)'
2 Likes
Looks like your config isn’t indented properly, or you are pointing include to a file that don’t exist, try posting your include config, and maybe someone can advise you.
This is awesome. Currently only my coloured bulbs change colour when turned on, is there anyway around this?