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?
I’ve created a dark theme based on red color.
The result is something like:
and the crs.yaml:
crs:
# Main Stuff #
primary-color: "#FF0000" # Primary (most of the UI)
primary-background-color: "#101010" # Primary background colour (dialogs, e.t.c)
secondary-background-color: "#202020" # Secondary background colour (main UI background)
paper-card-background-color: "#000000" # Card background colour
paper-item-icon-color: "#FF3030" # Icon colour
primary-text-color: "#BBBBBB" # Primary text colour
secondary-text-color: "#777777)" # Secondary text colour
disabled-text-color: "#444444" # Disabled text colour
divider-color: "#777777" # Divider colour
paper-card-header-color: "#FFFFFF" # Card header text colour
# Nav Menu #
paper-listbox-background-color: "#FFFFFF" # Listbox background colour
paper-listbox-color: "#000000" # Listbox text colour
paper-grey-200: "#404040" # Listbox selected item background colour
# Switches #
paper-toggle-button-checked-ink-color: "#AAAAAA"
paper-toggle-button-checked-button-color: "FF0000"
paper-toggle-button-checked-bar-color: "#FFFFFF"
# Sliders #
paper-slider-knob-color: "#FFFFFF"
paper-slider-knob-start-color: "#CCCCCC"
paper-slider-pin-color: "#FF0000"
paper-slider-active-color: "#C00000"
paper-slider-secondary-color: "#AAAAAA"
# Tables #
table-row-background-color: "#666666"
table-row-alternative-background-color: "#444444"
1 Like
[quote=“kylerw, post:79, topic:22018”]
Love this, do you have a repo with all your themes listed?[/quote]
+1 to that. Please make a repo for your themes!
how to change blue color on the top of web page ?
not primary-color
i want to change color only on the top of web page, but not to change color of icons or any other
Hi, I would be really interested
I think primary color will do it. You may have your icon color set as a reference to your primary color. IF you see 'var(--primary-color)' next to paper-item-icon-color: that is using the primary color as your icon color. If not add paper-item-icon-color: and define the color you want.
Here is a theme Ive been working on. Started from something @jimpower shared. Thanks for laying all the ground work for this @jimpower
https://github.com/SilvrrGIT/HomeAssistant/blob/master/frontend.yaml
5 Likes
Looks great nice job thanks for sharing
From what I’ve seen, there is no option to change simple stuff like that!
It’s basically just a way of changing the theme colours.
Seems really daft that it doesn’t just allow you to add CSS properties to theme like a normal website! One of my biggest bugbears with Home Assistant.
Thanks. I really like it.
Do you know how to change the graph color from red?
I think the primary-color: ‘#03a9f4’ would look nice.
In Lovelace I do, not sure how to on the regular UI.
They should. Custom cards cause issues with transparency though.