Share your Themes

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 :stuck_out_tongue:

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

you can find it here: Dark Cyan Theme

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.


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.


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 …?


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.


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? :frowning:

Thank you very much for your help :slight_smile:


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 :confused:


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:

  themes: !include themes.yaml

and in the yaml (based on @PhysicalMagic):

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

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?