Grey Night theme


#1

I have created a dark grey “Night” theme. It is based on the theme of @PhysicalMagic, pmxMononight.

I found the theme a little too “flat” and gave it a little more contrast so the text is better readable. I still don’t think it is perfect, but I may update it over time.

Night:
  # 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: '5%' #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) 36%)' #header colors and some text colors
  dark-primary-color: 'hsl(var(--huesat) 60%)'
  light-primary-color: 'hsl(var(--huesat) 90%)'
  accent-color: 'hsl(var(--huesat) 30%)'
  # Backgrounds
  primary-background-color: 'hsl(var(--huesat) 16%)'
  secondary-background-color: 'hsl(var(--huesat) 16%)' # background behind cards
  paper-listbox-background-color: 'hsl(var(--huesat) 16%)'
  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%)'
  # Divider
  divider-color: 'hsla(0, 0%, 0%, 0)'
  dark-divider-opacity: '0'
  light-divider-opacity: '0'
  dark-secondary-opacity: '1'
  # Text colors
  primary-text-color: 'hsl(var(--huesat) 90%)'
  text-primary-color: 'hsl(var(--huesat) 80%)'
  secondary-text-color: 'hsl(var(--huesat) 80%)'
  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(--huesat) 90%)'
  paper-button-ink-color: 'hsl(var(--huesat) 50%)'
  # Text Adjustments
  paper-font-headline_-_letter-spacing: '-0.5px'
  paper-font-headline_-_font-weight: '400'
  paper-font-body1_-_font-weight: '300'
  # Nav Menu
  paper-listbox-color: 'hsl(var(--huesat) 50%)'
  paper-grey-50: 'hsl(var(--huesat) 50%)'
  paper-grey-200: 'hsl(var(--huesat) 10%)' #active menu item
  # Paper card
  paper-item-icon-color: 'hsl(var(--huesat) 40%)'
  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-item-selected_-_color: 'hsl(var(--huesat) 20%)' #?
  paper-tabs-selection-bar-color: 'hsla(0, 0%, 0%, 0.2)'
  paper-tab-ink: 'hsl(var(--huesat) 70%)'
  paper-input-container-color: 'hsl(var(--huesat) 60%)'
  # Labels
  label-badge-red: 'var(--paper-card-background-color)'
  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: '0px 0px 0px 0px hsl(var(--huesat) 10%)'
  shadow-elevation-16dp_-_box-shadow: '0px 0px 0px 0px hsl(var(--huesat) 25%)'
  # 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%)'

Changelog:
4-11-2017: Hyperlinks are now readable (dark-primary-color) and darker menu icons (dark-secondary-opacity)


#2

@ksya nice work and indeed readable at night :blush:

Out of curiosity, what are you using for monitoring the energy consumption, detection if e.g. the dryer is still running and enabling/disabling a blanket?


#3

Thanks! Actually the goal was to make it also readable in daylight!

I am using Plugwise Circles for this with the excellent Plugwise2py software to send it’s status using MQTT. These are energy monitors and switches using the ZigBee protocol. They communicate using a USB receiver that I plugged into my RPi.

I got a start set of 9 switches (new for 320 euro) from my father for free, but you can find them for about 20 euro per Circle or less on the Dutch marketplace: Marktplaats.


#4

Cool theme
but how did you get your weather card like that


#5

It’s just the default weather card I guess

weather:
  - platform: openweathermap
    api_key: <key>
    name: Het Weer
default_view:
  view: yes
  icon: mdi:home
  entities:
  - updater.updater
  - sun.sun
  - weather.het_weer

#6

Hello Is there any instruction on how to apply this theme.
Iam new to the entire home automation world.
Running hassio on a Pi3


#7


Has all the info you’ll need.


#8

I updated this theme to be “Blue Night” and fixed some other things I didn’t like:

I didn’t like everything is grey anymore. You can easily change the “primary-color” yourself if you don’t like the blue or want the grey back.

BlueNight:
  # 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: '5%' #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: '#2581ab' #hsl(var(--huesat) 50%)' #header colors and some text colors
  dark-primary-color: 'hsl(var(--huesat) 60%)'
  light-primary-color: 'hsl(var(--huesat) 30%)'
  accent-color: 'hsl(var(--huesat) 30%)'
  # Backgrounds
  primary-background-color: 'hsl(var(--huesat) 16%)'
  secondary-background-color: 'hsl(var(--huesat) 16%)' # background behind cards
  paper-listbox-background-color: 'hsl(var(--huesat) 16%)'
  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%)'
  # Divider
  divider-color: 'hsla(0, 0%, 0%, 0)'
  dark-divider-opacity: '0'
  light-divider-opacity: '0'
  dark-secondary-opacity: '1'
  # Text colors
  primary-text-color: 'hsl(var(--huesat) 90%)'
  text-primary-color: 'hsl(var(--huesat) 90%)'
  secondary-text-color: 'hsl(var(--huesat) 80%)'
  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(--huesat) 90%)'
  paper-button-ink-color: 'hsl(var(--huesat) 50%)'
  # Text Adjustments
  paper-font-headline_-_letter-spacing: '-0.5px'
  paper-font-headline_-_font-weight: '400'
  paper-font-body1_-_font-weight: '300'
  # Nav Menu
  paper-listbox-color: 'hsl(var(--huesat) 50%)'
  paper-grey-50: 'hsl(var(--huesat) 50%)'
  paper-grey-200: 'hsl(var(--huesat) 10%)' #active menu item
  sidebar-icon-color: 'hsl(var(--huesat) 50%)' #iron-icon-fill-color
  # Paper card
  paper-item-icon-color: 'hsl(var(--huesat) 40%)'
  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-item-selected_-_color: 'hsl(var(--huesat) 20%)' #?
  paper-tabs-selection-bar-color: 'hsla(0, 0%, 0%, 0.2)'
  paper-tab-ink: 'hsl(var(--huesat) 70%)'
  paper-input-container-color: 'hsl(var(--huesat) 60%)'
  # Labels
  label-badge-red: 'var(--paper-card-background-color)'
  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: '0px 0px 0px 0px hsl(var(--huesat) 10%)'
  shadow-elevation-16dp_-_box-shadow: '0px 0px 0px 0px hsl(var(--huesat) 25%)'
  # 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%)'

#9

Hi, this is my fgavorite frontend. One thing I miss is when my PIR sensor fires up the little man running is not highlighted in yellow (like defaultr theme) but stays in grey colour as when idle.

You know how to change this?