Clear Theme


#1

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

Update: Dark Version

Preview

Resources (optional)

Background Image: Lovelace instant'ish CSS changes
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/

Install background image (automatic switch when using dark theme)

Save the background image to home-assistant/www/day.jpg
Open the lovelace raw editor in the frontend (top right corner) and add this line to every view:

background: var(--background-image)

Thanks to @thomasloven for finding this.

Theme

clear:
  # Background image
  background-image: '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: '#EAEAEA'                                                         # 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

  # UI
  paper-card-header-color: 'var(--text-color)'                                    # Title in settings
  primary-background-color: 'var(--background-color)'                             # Background (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
  paper-toggle-button-checked-button-color: '#FFF'                                # Knob On
  paper-toggle-button-checked-bar-color: '#0077FF'                                # Background On
  paper-toggle-button-unchecked-button-color: '#FFF'                              # Knob Off
  paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'           # Background Off
  
  # Shadows
  shadow-elevation-2dp_-_box-shadow: 'inset 0px 0px 0px 1px var(--border-color)'
  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 3px var(--light-color)'

Clear Theme Dark
Why can’t we have UI like these? Quite inspiring!
Lovelace Custom Fan Card Example
Background image in theme
Lovelace: Chromecast Radio Jukebox
Not all colours change when applying a theme
My Lovelace Plugins
#2

#3

Really nice theme - I like what you have done!


#4

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


#5

Very nice theme. What about a dark version?


#6

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


#7

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!


#8

looks great, thanks for sharing theme!


#9

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


#10

How do I get the background into this theme?


#11

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

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


#12

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


#13

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

#14

Beautiful theme, thanks for sharing!


#15

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?

#16

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 :slight_smile: .

#17

Dark version: Clear Theme Dark


#18

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


#19

That looks nice! I might steal your harmony card :grinning:

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 :confused: .


#20

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!!