Blue/Grey Night theme

ksya · October 28, 2017, 2:08pm

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.

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%)'
  medium-grey-color: '#202020'
  # 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%)'
  card-background-color: 'var(--paper-card-background-color)'
  # 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: 'hsl(20, 50%, 25%)'
  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%)'
  
  #Changes to fix history/logbook menus
  lumo-primary-text-color: 'var(--primary-color)'
  lumo-secondary-text-color: 'var(--primary-color)'
  lumo-primary-color: 'var(--primary-color)'
  lumo-primary-color-50pct: 'rgba(37,129,172, .5)'
  lumo-primary-color-10pct: 'rgba(37,129,172, .1)'
  #Calendar day numbers
  lumo-body-text-color: 'var(--primary-text-color)'
  #Calendar/Date-Picker Background
  lumo-base-color: 'var(--medium-grey-color)'
  #Month/Year header
  lumo-header-text-color: 'var(--lumo-body-text-color)'
  #DayOfWeek Header
  lumo-tertiary-text-color: 'var(--lumo-body-text-color)'
  # Background of date in History/Logbook that you clcim to view date-picker
  lumo-shade: 'var(--medium-grey-color)'
  lumo-shade-90pct: 'rgba(41, 41, 41, .9)'
  lumo-shade-80pct: 'rgba(41, 41, 41, .8)'
  lumo-shade-70pct: 'rgba(41, 41, 41, .7)'
  lumo-shade-60pct: 'rgba(41, 41, 41, .6)'
  lumo-shade-50pct: 'rgba(41, 41, 41, .5)'
  lumo-shade-40pct: 'rgba(41, 41, 41, .4)'
  lumo-shade-30pct: 'rgba(41, 41, 41, .3)'
  lumo-shade-20pct: 'rgba(41, 41, 41, .2)'
  lumo-shade-10pct: 'rgba(41, 41, 41, .1)'
  lumo-shade-5pct: 'rgba(41, 41, 41, .05)'
  #Removes Gradient in Calendar/Date-Picker and Drop-down lists
  lumo-tint-5pct: 'var(--darker-grey-color)'

To get Grey Night, change the first few lines:

GreyNight:
  # 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%)'

geoffrey · November 1, 2017, 8:40am

@ksya nice work and indeed readable at night

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?

ksya · November 1, 2017, 11:16am

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.

danielmartin122 · November 13, 2017, 10:35pm

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

ksya · November 15, 2017, 9:58am

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

seetendra · November 24, 2017, 7:03pm

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

sholofly · November 28, 2017, 1:28pm

Has all the info you’ll need.

ksya · August 24, 2018, 11:56am

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.

Klagio · August 31, 2018, 10:22am

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?

ksya · December 8, 2018, 11:35am

Remove the line “paper-item-icon-active-color: ‘var(–paper-item-icon-color)’”

iMartien · January 9, 2019, 2:32pm

I really like this theme and have HA switch to it automatically to it when it gets dark

I have only one issue. In Lovelace when using a gauge-card, the “red” color seems to be the same as the background color… So when the gauge turns red, it disappears:

this is my gauge config:

- name: Verbruik
    entity: sensor.power_consumption
    type: gauge
    severity:
      yellow: 0.5
      red: 1.5
      green: 0
    max: 8
    min: 0

So when it gets above 1.5 the gauge disappears, yellow and green seem to be fine… (hope I’m clear what the issue is)

But can’t find what to change to correct this!

ksya · January 11, 2019, 5:35pm

Pretty sure it’s because of this variable:
label-badge-red

Change it with something you like

VDRainer · January 11, 2019, 5:58pm

Since a few version the gauge has the theme option.
Create a theme in your themes.yaml

th_gauge_3:
  label-badge-blue: "#55acee"
  label-badge-green: "#9bc53d"
  label-badge-yellow: "#fde74c"
  label-badge-red: "#c3423f"

and define it in the gauge config.

theme: th_gauge_3

So you can use every color for the gauges.

stefano.mazzi · January 16, 2019, 3:07pm

Hi,
this is my favorite theme.
But in Logbook and History the date field is “hidden” because too dark.
How can i fix this problem?

Thank you.

ksya · January 20, 2019, 9:53am

I think it cannot be changed… I can’t find a variable that changes this.

kethoth · January 31, 2019, 7:36pm

Below are the css attributes I modified to attempt resolving that with my dark theme. Some modifications I still need to make are lumo-shade (or lumo-shady can’t inspect at the moment) and the percentage versions of it. It’s not perfect yet but it’s an improvement.

  lumo-primary-text-color: '#00b706'
  lumo-body-text-color: '#FFFFFF'
  lumo-primary-color: '#00b706'
  lumo-primary-color-50pct: 'rgba(0, 183, 6, .5)'
  lumo-primary-color-10pct: 'rgba(0, 183, 6, .1)'

Dino-Tech · February 1, 2019, 8:27pm

Interested. Resource from https://github.com/vaadin/vaadin-lumo-styles ? Can this be used if not? Also, the text issue work around I have used is here: Darkest-Nightz Theme , but would love to tweak with the vaadin-lumo-styles… Any insight would be greatly appreciated, thanks!

kethoth · February 1, 2019, 9:03pm

Yeah the lumo styles were what needed to be modified, I just didn’t have time to dig into what did what until today. I managed to fix the calendar and entity drop-down menus in the theme I posted today.

ksya · February 2, 2019, 7:51pm

Thanks all. I have updated the theme.

IsaTTeN · May 7, 2019, 12:27pm

I like a lot this black theme. Thanks!!!

The only think that I would change are some badgets that appear like this:

however some other badgets appear nicer, like this:

imagen

Do you know how can I change the first one to the blue circle?

Best regards