Share your Themes

Dark themes are now possible as of HA 0.51. :cat:
Personally I like teal with dark colours.

https://community.home-assistant.io/t/dark-theme-or-night-mode-theme/446/37

2 Likes

Working on 2 themes for myself: cyan and red

And on smartphone:

15 Likes

I love the teal one - would you be willing to share it?

(Like the title of the thread implies…)

same here, nice work!

1 Like

I have to make some changes and then I will post the code right here… :slight_smile:

@uiguy

In this topic you can find the codes for the darkcyan theme: "Dark" theme, or "night" mode/theme - #88

And here you can find the darkred theme: "Dark" theme, or "night" mode/theme - #53

Enjoy :slight_smile:

2 Likes

Thanks; as soon as I saw the notification I grabbed it!

1 Like

Theme loosely based off of the Solarized palette. Probably doesn’t meet criteria for Solarized but I really like the palette.

solarized:
  primary-color: "#2aa198"
  disabled-text-color: "#859900"
  divider-color: "#586e75" #"rgba(255, 255, 255, 0.12)"
  paper-card-background-color: "#002b36"
  paper-grey-200: "#586e75"
  paper-item-icon-color: "#b58900"
  paper-listbox-background-color: "#002b36"
  paper-listbox-color: "#b58900"
  primary-background-color: "#073642"
  primary-text-color: "#839496"
  secondary-background-color: "#073642"
  secondary-text-color: "#859900"
  text-primary-color: "#839496"
  label-badge-background-color: "var(--secondary-background-color)"
  label-badge-text-color: "var(--text-primary-color)"
  paper-card-header-color: "#cb4b16"
  paper-grey-50: "#b58900"
  paper-item-icon-active-color: "#dc322f"
  paper-item-icon_-_color: "#FF00FF"   # no clue 
  paper-slider-active-color: "#dc322f"
  paper-slider-knob-color: "#dc322f"
  paper-slider-knob-start-color: "#b58900"
  paper-slider-pin-color: "#FF00FF"  # no clue
  paper-slider-secondary-color: "#dc322f"
  paper-toggle-button-checked-ink-color: "#dc322f"
  paper-toggle-button-checked-button-color: "#dc322f"
  paper-toggle-button-checked-bar-color: "#cb4b16"
  paper-toggle-button-unchecked-bar-color: "#b58900"
  table-row-background-color: "#002b36"
  table-row-alternative-background-color: "#073642"
  google-red: "#dc322f"
  google-green: "#859900"
  google-blue: "#268bd2"
  google-yellow: "#b58900"
  accent-color: "#cb4b16"
  paper-green: "#859900"
  paper-blue: "#268bd2"
  paper-orange: "#cb4b16"


main

5 Likes

Oh wow! Themes!

Thats great, gotta update :smiley:

One of the themes I recently made. Kind of a variant of the default theme. It’s still a WIP though, so there might be some issues with colours.

PmxDefault:
  # Primary Color
  primary-color: 'hsl(192, 96%, 48%)'
  # Backgrounds
  primary-background-color: 'hsl(0, 0%, 98%)'
  secondary-background-color: 'hsl(0, 0%, 95%)'
  paper-listbox-background-color: 'var(--primary-background-color)'
  paper-card-background-color: 'var(--primary-background-color)'
  paper-dialog-background-color: 'var(--primary-background-color)'
  table-row-background-color: 'hsl(0, 0%, 96%)'
  table-row-alternative-background-color: 'var(--primary-background-color)'
  # Divider
  divider-color: 'hsla(0, 0%, 0%, 0)'
  dark-divider-opacity: '0'
  light-divider-opacity: '0'
  # Text colors
  primary-text-color: 'hsl(0, 0%, 50%)'
  text-primary-color: 'hsl(0, 0%, 60%)'
  secondary-text-color: 'hsl(0, 0%, 60%)'
  disabled-text-color: 'hsl(0, 0%, 70%)'
  label-badge-border-color: 'hsl(0, 0%, 100%)'
  sidebar-text_-_color: 'hsl(0, 0%, 90%)'
  sidebar-text-color: 'hsl(0, 0%, 90%)'
  # 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(0, 0%, 85%)'
  paper-grey-50: 'hsl(0, 0%, 85%)'
  paper-grey-200: 'hsl(0, 0%, 95%)'
  # Paper card
  paper-card-header-color: 'hsla(0, 0%, 0%, 0.5)'
  paper-item-icon-color: 'hsl(0, 0%, 80%)'
  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)'
  ha-slider-background-color: 'var(--primary-background-color)'
  paper-slider-bar-color: 'var(--primary-background-color)'
  # Labels
  label-badge-red: 'var(--primary-color)'
  label-badge-background-color: 'var(--paper-card-background-color)'
  label-badge-text-color: 'hsl(0, 0%, 60%)'
  # Shadows
  shadow-elevation-2dp_-_box-shadow: 'inset 0px 0px 0px 3px hsl(0, 0%, 88%)'
  shadow-elevation-4dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
  shadow-elevation-6dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
  shadow-elevation-8dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
  shadow-elevation-10dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
  shadow-elevation-12dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
  shadow-elevation-14dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
  shadow-elevation-16dp_-_box-shadow: '0px 0px 0px 4px var(--primary-color)'
  # Switches
  paper-toggle-button-checked-button-color: 'hsl(192, 0%, 98%)'
  paper-toggle-button-checked-bar-color: 'hsl(192, 0%, 50%)'
  paper-toggle-button-unchecked-button-color: 'hsl(192, 0%, 98%)'
  paper-toggle-button-unchecked-bar-color: 'hsl(192, 0%, 85%)'
  # Sliders
  paper-slider-knob-color: 'var(--primary-color)'
  paper-slider-knob-start-color: 'hsl(0, 0%, 60%)'
  paper-slider-pin-color: 'var(--primary-color)'
  paper-slider-active-color: 'var(--primary-color)'
  paper-slider-container-color: 'hsl(0, 0%, 90%)'
  paper-slider-secondary-color: 'hsl(0, 0%, 90%)'
  paper-slider-disabled-active-color: 'hsl(0, 0%, 90%)'
  paper-slider-disabled-secondary-color: 'hsl(0, 0%, 90%)'
  paper-dialog-color: 'hsl(0, 0%, 50%)'
5 Likes

@PhysicalMagic really like it, nice work!

1 Like

Anyone interested in a β€˜way-too-early’ christmas theme?
I’ve got my homeassistant set-up to show this theme around the christmas period :slight_smile: (nice theme + automation practice)
It still needs some touch-ups (e.g. slider & icon color on pop-ups for which I can 't seem to find the correct variables), but if people are interested I’ll post the code once I finish.

8 Likes

Hi! Just made a theme in wood colours.

wood:
  primary-color: "#6B3A1F"
  disabled-text-color: "#A58456"
  divider-color: "#EDE4D8" #"rgba(255, 255, 255, 0.15)"
  dark-primary-color: "#592A13"

  primary-background-color: "#C4AD92"
  primary-text-color: "#FFFFFF"
  secondary-background-color: "#675335"
  secondary-text-color: "#6B3A1F"
  text-primary-color: "#693A23"

  label-badge-background-color: "var(--primary-background-color)"
  label-badge-text-color: "var(--text-primary-color)"

  paper-card-background-color: "#A58456"
  paper-grey-50: "#6B3A1F"
  paper-grey-200: "#DDD4C8"
  paper-item-icon-color: "#6B3A1F"
  paper-listbox-background-color: "#A58456"
  paper-listbox-color: "#6B3A1F"

  paper-card-header-color: "#EDE4D8"

  paper-item-icon-active-color: "#F7C02A"
  paper-item-icon_-_color: "#FF00FF"

  paper-slider-active-color: "#A56521"
  paper-slider-knob-color: "#A56521"
  paper-slider-knob-start-color: "#6B3A1F"
  paper-slider-pin-color: "#FF00FF"
  paper-slider-secondary-color: "#A06020"

  paper-toggle-button-checked-ink-color: "#A56521"
  paper-toggle-button-checked-button-color: "#A56521"
  paper-toggle-button-checked-bar-color: "#EDE4D8"
  paper-toggle-button-unchecked-bar-color: "#EDE4D8"

  table-row-background-color: "#A58456"
  table-row-alternative-background-color: "#C67A2E"

  google-red: "#A56521"
  google-green: "#A58456"
  google-blue: "#268BD2"
  google-yellow: "#6B3A1F"
  accent-color: "#EDE4D8"
  paper-green: "#A58456"
  paper-blue: "#268BD2"
  paper-orange: "#EDE4D8"

Screenshots:

update: fixed accidentally duplicate paper-grey-50

6 Likes

Absolute awesome! I added this to my setup :slight_smile: THANKS!!!

Another WIP theme, which isn’t perfect yet due to some limitations we/I still have with themes (some things not able to theme properly, because things not set to a variable), but I thought maybe someone would like it already anyway. This time is created as a dark monochromatic theme which allows people to adjust how saturated the theme should be, and what the base hue of the theme should be (to make it totally grey, or greyish-blue/brown or whatever you like). I’ve made 3 examples (see screenshots) by only changing the first 2 variables to show the possibilities. Again, it’s not perfect yet, but I feel like some might enjoy it.

PmxMononight:
  # MyVariables
  base-hue: '220' #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%)'
52 Likes

Hot damn, you know what you’re doing! Excited to see what themes you come up with.

1 Like

Wow! Nice work! Will add this to my setup of course even if I use dashboard to control my stuff

1 Like

Amazing stuff PhysicalMagic!

1 Like

@PhysicalMagic great work!

1 Like

Thank guys! Here is another one. This time a clean flat monochrome light-grey theme. Tried to keep it as basic/clean as possible.



PmxMonolight:
  # MyVar
  huesat: '0, 0%,'
  # Primary Color
  primary-color: 'hsl(var(--huesat) 80%)'
  dark-primary-color: 'hsl(var(--huesat) 20%)'
  light-primary-color: 'hsl(var(--huesat) 90%)'
  accent-color: 'hsl(var(--huesat) 30%)'
  # Backgrounds
  primary-background-color: 'var(--primary-color)'
  secondary-background-color: 'hsl(var(--huesat) 86%)'
  paper-listbox-background-color: 'var(--primary-color)'
  paper-card-background-color: 'hsl(var(--huesat) 90%)'
  paper-dialog-background-color: 'var(--paper-card-background-color)'
  table-row-background-color: 'hsl(var(--huesat) 88%)'
  table-row-alternative-background-color: 'hsl(var(--huesat) 90%)'
  # Devider
  divider-color: 'hsla(0, 0%, 0%, 0)'
  dark-divider-opacity: '0'
  light-divider-opacity: '0'
  dark-secondary-opacity: '0.4'
  # Text colors
  primary-text-color: 'hsl(var(--huesat) 46%)'
  text-primary-color: 'hsl(var(--huesat) 46%)'
  secondary-text-color: 'hsl(var(--huesat) 56%)'
  disabled-text-color: 'hsl(var(--huesat) 30%)'
  sidebar-text_-_color: 'hsl(var(--huesat) 5%)'
  sidebar-text-color: 'hsl(var(--huesat) 5%)'
  paper-card-header-color: 'hsl(hsl(var(--huesat) 50%)'
  paper-button-ink-color: 'hsl(hsl(var(--huesat) 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) 40%)'
  paper-grey-200: 'hsl(var(--huesat) 72%)'
  # Paper card
  paper-item-icon-color: 'hsl(var(--huesat) 70%)'
  paper-item-icon-active-color: 'var(--paper-item-icon-color)'
  paper-item-icon_-_color: 'hsl(var(--huesat) 70%)'
  paper-item-selected_-_background-color: 'hsla(0, 0%, 100%, 0.2)'
  paper-item-selected_-_color: 'hsl(var(--huesat) 20%)'
  paper-tabs-selection-bar-color: 'hsl(var(--huesat) 70%)'
  paper-tab-ink: 'hsl(var(--huesat) 70%)'
  paper-input-container-color: 'hsl(var(--huesat) 66%)'
  # Labels
  label-badge-red: 'hsl(var(--huesat) 80%)'
  label-badge-border-color: 'var(--label-badge-red)'
  label-badge-background-color: 'hsl(var(--huesat) 82%)'
  label-badge-text-color: 'var(--primary-text-color)'
  # Shadows
  shadow-elevation-2dp_-_box-shadow: 'inset 0px 0px 0px 3px hsla(var(--huesat) 91%, 0.2)'
  shadow-elevation-16dp_-_box-shadow: 'inset 0px 0px 0px 3px hsla(var(--huesat) 91%, 0.2)'
  paper-input-container-shared-input-style_-_background: '#000'
  # Switches
  paper-toggle-button-checked-button-color: 'hsl(var(--huesat) 50%)'
  paper-toggle-button-checked-bar-color: 'hsl(var(--huesat) 66%)'
  paper-toggle-button-unchecked-button-color: 'hsl(var(--huesat) 85%)'
  paper-toggle-button-unchecked-bar-color: 'hsl(var(--huesat) 80%)'
  # Sliders
  paper-slider-knob-color:  'hsl(var(--huesat) 45%)'
  paper-slider-knob-start-color: 'hsl(var(--huesat) 60%)'
  paper-slider-pin-color:  'hsl(var(--huesat) 60%)'
  paper-slider-active-color:  'hsl(var(--huesat) 60%)'
  paper-slider-container-color: 'hsl(var(--huesat) 76%)'
  paper-slider-secondary-color: 'hsl(var(--huesat) 10%)'
  paper-slider-disabled-active-color: 'hsl(var(--huesat) 75%)'
  paper-slider-disabled-secondary-color: 'hsl(var(--huesat) 75%)'
  #Toast
  paper-toast-color: 'hsl(var(--huesat) 45%)'
  paper-toast-background-color: 'hsl(var(--huesat) 90%)'
9 Likes