Clear Theme

Sian · August 8, 2019, 10:11am

I had signed up because I would like to give credit for this theme which became my starting point for my layout. I also want to add my despise in lovelace’s use of shadow roots and hurdles needed to make a page feel more personalized. none the less, after mix matching many modules and cards along with my own code, I finally formulated something that I’m fairly happy with.

The theme suits well for an old touch tablet which I also went with the design from https://twitter.com/teachingbirds/status/1151113630391427072/photo/1?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1151113630391427072&ref_url=https%3A%2F%2Fwww.home-assistant.io%2Fblog%2F2019%2F07%2F17%2Frelease-96%2F

Thanks to both authors for the foundation of my layout.

Sian · August 8, 2019, 10:12am

As I could only post one image as a new user, I will reply again to give a perspective to using it on the tablet

vipk31 · August 28, 2019, 8:30am

Can you share all this config?
I just started with HA so I don’t know where to start
thanks @bjornb

vipk31 · August 28, 2019, 8:33am

Please show me how to do it
@Nitram

bjornb · August 28, 2019, 8:56am

Hey. This was just a screenshot of my theme/lovelace interface (the gui part). Sharing this config won’t get you a lot further. If you want some config of specific items in my config let me know. I’ll share it. But I am not posting my whole config online. If you’re just new, watch some yt movies to get started I would suggest.

Mariusthvdb · September 12, 2019, 12:44pm

has this been noticed before?:
theme_color ignored: var(–text-color) is not a valid color…

I’ve just installed my new Rpi4 with the latest ha version, and this pops up in inspector:

only place I have this is in the theme clear (commented the color out for now):

clear:
  # Colors
  text-color: '#636B75'                                                           # 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, 0.6)'                     # Background
#  paper-card-background-color: 'rgba(40, 40, 40, 0.6)'
#  dark-primary-color: 'var(--text-color)'

mason55 · October 7, 2019, 3:49pm

As of 0.99 the steps for setting the background image in the raw UI editor are no longer necessary. If you change “background-image” to “lovelace-background” in the theme then the UI will automatically apply the background settings to all of your views.

bjornb · October 23, 2019, 6:36pm

Thanks again for the nice theme. Since HA 0.100 I am having issues with the colors. Could you please update the theme for version 0.100?

My paper sliders are now in the primary color (grey) and they used to be blue. Even when I add paper-slider variables myself. Still the colors will be grey. If I comment “primary-color” out, the slider are indeed blue, but also my header. Which used to be grey. I have been playing around with different settings, but nothing seems to help.

Thank you very much in advance for your time.

naofireblade · October 23, 2019, 6:47pm

Sure, I will update home assistant in the next days at home and will fix the theme then.

bjornb · October 23, 2019, 7:00pm

Thanks! Sounds very good!

bjornb · November 9, 2019, 7:22pm

Hey! Any news already?

naofireblade · November 9, 2019, 8:46pm

The updated version of the theme for HA 0.101 is now available in the first post.

The bad news

The button design with a blue background and white knob when checked is not possible anymore. Maybe they will change this in the future. I will update the theme as soon as the white knob is possible again.

Also the white knob when disabled is a bit harder to see, because they decreased the shadow of the knob. I tried a very light grey color, but that didn’t look good.

The good news

You don’t need to set the background image on every page now. One option in the theme is enough.

I updated the theme to disable the card shadows again after the old option was broken.

I added styles for the lovelace slider (input_number).

bjornb · November 10, 2019, 9:07am

Thanks a lot! I missed the update in the first post. Strange about the colors. Hopefully a next update will fix this issue.

Strange thing is, it must be something with your coding as a few others are working for me.

I’ll have a look if I can figure it out the coming days.

Thanks again!

naofireblade · November 10, 2019, 9:39am

Can u send me a link to a theme with a white knob and a colored switch background?

ludeeus · November 10, 2019, 9:57am

I really doubt anyone exists that works with the current version of the frontend.
Otherwise, this issue would not be needed
https://github.com/home-assistant/home-assistant-polymer/issues/4200

naofireblade · November 10, 2019, 10:23am

I created the issue yesterday and wow you already proposed a fix

bjornb · November 10, 2019, 6:14pm

Ok, my mistake, the other themes didn’t had another color for the slider and the knob itself. But at least the knob still had some color.

I have been playing around tonight with your theme, if I comment out the following section:

  # Header
  #primary-color: '#636B75'

Then the theme does reload with colors on the switches, but (logically) my header has the same color as the switches, which used to be different.

The result I get when I comment out as above is this:

I guess this is already better then the grey switches. But I loved my grey header…
But there seems to be a solution on github already!

naofireblade · November 13, 2019, 9:46pm

The theme can now be installed with HACS (including the background image). Just look for “Clear Theme” in HACS.

AHammer · November 14, 2019, 8:40pm

Hi Arne,
I’m new to the community store. Tried to find your theme in HACS but theres no target, when I type in “Clear Theme”. Would you may help.
Thx a lot.

AHammer · November 14, 2019, 8:59pm

Done, I needed to enable themes in HACS.

Thx anyway.