Clear Theme

naofireblade · February 20, 2019, 11:57am

I created a theme based on this post: Why can’t we have UI like these? Quite inspiring!

Added: Dark Version

Preview

grafik

Install via HACS

The theme can now be installed via HACS. The background image will be added automatically

Install manually

Background

Save the background image to home-assistant/www/day.jpg

Theme

clear:
  # Background image
  lovelace-background: 'center / cover no-repeat url("/local/day.jpg") fixed'

  # Colors
  text-color: '#636B75'                                                           # Grey text
  text-medium-color: '#8c96a5'                                                    # Medium grey text
  text-light-color: '#BAC0C6'                                                     # Light grey text
  accent-color: '#00a1ff'                                                         # Blue
  background-color: '#F7F8F9'                                                     # Light grey background
  background-color-2: '#F4F5F6'                                                   # Light grey background
  background-card-color: 'rgba(255,255,255,1.0)'                                  # White background
  border-color: '#E8E8E8'                                                         # Light grey border

  # Header
  primary-color: 'var(--text-color)'                                              # Background
  text-primary-color: '#FFF'                                                      # Text
  
  # Left Menu
  paper-listbox-background-color: 'var(--background-color)'                       # Background
  # TODO: Text and Icons

  # UI
  paper-card-header-color: 'var(--text-color)'                                    # Title in settings
  primary-background-color: 'var(--background-color)'                             # Background color (also title background in left menu)
  
  # Card
  paper-card-background-color: 'var(--background-card-color)'                     # Background
  dark-primary-color: 'var(--text-color)'
  primary-text-color: 'var(--text-color)'
  paper-listbox-color: 'var(--text-color)'
  light-primary-color: 'var(--text-light-color)'
  secondary-text-color: 'var(--text-medium-color)'
  disabled-text-color: 'var(--text-light-color)'
  paper-dialog-button-color: 'var(--text-color)'
  secondary-background-color: 'var(--background-color-2)'                         # Background more info title

  # Icons
  paper-item-icon-color: 'var(--text-light-color)'                                # Off
  paper-item-icon-active-color: 'var(--accent-color)'                             # On
  
  # Switches
  switch-checked-button-color: '#FFF'                                             # Knob On
  switch-unchecked-button-color: '#FFF'                                           # Knob Off
  switch-checked-track-color: '#0077FF'                                           # Background On
  switch-unchecked-track-color: 'var(--disabled-text-color)'                      # Background Off

  # Slider
  paper-slider-active-color: 'var(--accent-color)'                                # Line On
  paper-slider-container-color: '#e5e7ea'                                         # Line Off
  paper-slider-knob-color: 'var(--text-light-color)'                              # Knob On
  paper-slider-knob-start-color: 'var(--text-light-color)'                        # Knob Off

  # Shadows
  ha-card-box-shadow: 'inset 0px 0px 0px 1px var(--border-color)'

Resources (optional)

Button Card: https://github.com/rodrigofragadf/lovelace-cards/tree/master/tiles-card
Animated Weather Card: https://github.com/bramkragten/custom-ui/tree/master/weather-card
Graph Card: https://github.com/kalkih/mini-graph-card
Slim Header: https://github.com/maykar/compact-custom-header/

mu3 · February 20, 2019, 12:38pm

Martin_Granger · February 20, 2019, 5:08pm

Really nice theme - I like what you have done!

ajoyce · February 20, 2019, 6:43pm

Very nice! I was just looking at the same post that inspired you thinking ‘how can I do that’!!

cjsimmons · February 21, 2019, 3:51am

Very nice theme. What about a dark version?

naofireblade · February 21, 2019, 8:55am

I will look into this , maybe with some small modifications to one of the already really good dark themes.

stefve · February 21, 2019, 9:11am

Very nice theme, thank you for sharing this!

@naofireblade, could you please share your other tabs and maybe your config?
I think your page looks very clear and clean, easy to use!

dubsix · February 21, 2019, 12:35pm

looks great, thanks for sharing theme!

naofireblade · February 21, 2019, 2:24pm

Thanks! I will look into putting everything on github and @ you when I’m done.

scfigg · February 21, 2019, 3:43pm

How do I get the background into this theme?

stefve · February 21, 2019, 3:46pm

Add the image to your www folder, and add the following to your lovelace:

background: center / cover no-repeat url("/local/background.jpeg") fixed

sargent-penguin · February 21, 2019, 7:17pm

Looks great!!
Whats your config for the colors of the mini graph card?

naofireblade · February 22, 2019, 6:25am

Sure, just adjust the temperature tresholds to your liking:

type: horizontal-stack
cards:
  - type: 'custom:mini-graph-card'
    align_header: left
    align_icon: left
    animate: true
    color_thresholds:
      - color: '#00a1ff'
        value: 0
      - color: '#abe673'
        value: 21
      - color: '#fe9c67'
        value: 23.5
      - color: '#e0614c'
        value: 24.5
    entities:
      - sensor.temperature_livingroom
    hour24: true
    name: Wohnen
    points_per_hour: 0.5
    show:
      fill: false
  - type: 'custom:mini-graph-card'
    align_header: left
    align_icon: left
    animate: true
    color_thresholds:
      - color: '#00a1ff'
        value: 0
      - color: '#abe673'
        value: 19.6
      - color: '#fe9c67'
        value: 21
      - color: '#e0614c'
        value: 21.5
    entities:
      - sensor.temperature_158d0001b7edda
    hour24: true
    name: Schlafen
    points_per_hour: 0.5
    show:
      fill: false

meme1337 · February 22, 2019, 7:48am

Beautiful theme, thanks for sharing!

Nitram · February 22, 2019, 9:42am

Thank you for this! I use it as a good base to try to simulate the dribble screenshot your theme is loosely inspired by. Whenever I’m ready I’ll post a screenshot.
Meanwhile, I have a couple of questions:

The shadows on my cards are much more visible. How did you manage to make them more subtle? Or is one of the custom components responsible for this?

In what cards did you use the button card exactly?

naofireblade · February 22, 2019, 9:52am

The last section in my theme controls the shadows by making them very subtle for elevation-2dp and copies that style to all elevations but 16dp.

I found 3 limits when trying to replicate the dribble screenshot:

the card title color can not be set (just for custom cards…)
cards cannot be made larger (I played with panel mode and layout-card: https://github.com/thomasloven/lovelace-layout-card but was not happy with the results)
the header background color is also the color for links and section labels on cards (primary-color), therefore I had to used grey instead of white, but that looks not bad I think .

naofireblade · February 22, 2019, 10:08am

Dark version: Clear Theme Dark

Nitram · February 22, 2019, 10:17am

Strange, because I used your styles, but still have more shadow…
Header background: indeed, not easy, but… let me just tease you

naofireblade · February 22, 2019, 10:36am

That looks nice! I might steal your harmony card

Header background in white is possible, but I guess you won’t see links and section titles now.

I just saw that the shadow rules do not work after update to version 0.88 .

cjsimmons · February 22, 2019, 10:39am

Nice work. Kinda doesn’t have the same fresh feel as the light version, but will be much better on my eyes, especially at night.

I’ll install it later and see how it goes. Can’t wait to try!!