Share your Themes

PhysicalMagic · August 28, 2017, 1:36pm

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

Kroontje · August 29, 2017, 8:49am

@PhysicalMagic really like it, nice work!

Mahahaleel · August 29, 2017, 11:52am

Anyone interested in a ‘way-too-early’ christmas theme?
I’ve got my homeassistant set-up to show this theme around the christmas period (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.

twelve · September 2, 2017, 9:30am

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

thundergreen · September 2, 2017, 9:51am

twelve:

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: “var(–text-primary-color)”
paper-grey-200: “#DDD4C8”
paper-item-icon-color: “#6B3A1F”
paper-listbox-background-color: “#A58456”
paper-listbox-color: “#6B3A1F”

paper-card-header-color: “#EDE4D8”
paper-grey-50: “#6B3A1F”

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”

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

PhysicalMagic · September 5, 2017, 11:01pm

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

itchaboy · September 6, 2017, 12:15am

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

thundergreen · September 6, 2017, 6:39am

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

marksev1 · September 6, 2017, 7:47am

Amazing stuff PhysicalMagic!

Sthope · September 7, 2017, 1:24pm

@PhysicalMagic great work!

PhysicalMagic · September 8, 2017, 12:03pm

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

jscolp · September 9, 2017, 7:19pm

Looks awesome, what is the base-hue and base-sat for the first/black screenshot?

PhysicalMagic · September 9, 2017, 9:20pm

The base-hue and base-sat for that one are:

  base-hue: '160'
  base-sat: '0%'

Since the base-sat on that one is set to 0, the background elements are full grey-tones and not effected by the base-hue, only the buttons and sliders (and other accents) are, so you might as well change the base-hue on that one to any color you like without it changing the background. Here is a gradient with the corresponding base-hue values (or any number in between) you could use.

Vilreen · September 9, 2017, 11:07pm

I was wondering if anyone knows which class controls link colouring?
Example (dark green text): https://i.imgur.com/UPt6qF4.png

PhysicalMagic · September 10, 2017, 1:35pm

That should be this one:

dark-primary-color:

Although dark-primary-color may also change other elements, but I’m not sure which.

Vilreen · September 10, 2017, 3:17pm

Yea, I kept digging into the config yesterday and I think it is
dark-primary-color:
as you said @PhysicalMagic. Would be great to have it split to something different in the next release though, as on dark colour themes, the links start to blend with the background.

Posted a feature request: Thread 26782

dimmanramone · September 10, 2017, 4:34pm

What about the second black?

PhysicalMagic · September 10, 2017, 8:00pm

The second one, is the one I used in the example code so that should be:

  base-hue: '220'
  base-sat: '16%'

(for anyone wondering)
The first one is:

  base-hue: '160'
  base-sat: '0%'

and the third one is:

  base-hue: '30'
  base-sat: '12%'

CaptainComedy · September 14, 2017, 3:09pm

Physical Magic - awesome work

DarkLite1 · September 17, 2017, 5:35pm

There are definitely some nice themes in this thread, so thank you for sharing. I’m totally new to home automation, just bought a new house and I’m looking into all possibilities. For now I’m a bit stuck between OpenHAB2 and HA. What I am really wondering about is if it’s possible to have a GUI on the phone and/or via the browser that has custom icons and/or text beneath or above icons? Maybe also some custom grouping.

An example of what I mean can be seen here:
https://goo.gl/images/xSyELW

I find the end GUI to be very important as this is where we’ll spend most of our time when it’s completely setup. So if I have to invest time in development for adding and controlling items or Things, that would be fine. As long as the GUI can be made really cool.

Thank you for you help and sorry if this is the wrong place for asking. But I couldn’t really find a more custom look on the website.