Clear Theme

david1 · April 22, 2019, 3:25pm

looks nice! it looks like you modified the theme, care to share? how do you have the transparency?

Nitram · April 23, 2019, 8:43am

Thanks!
I used the card modder in every card: https://github.com/thomasloven/lovelace-card-modder
In most cards, I then used these styles:

style:
  background-color: 'rgba(255,255,255,0.50)'
  border-radius: 2px
  box-shadow: '0 1px 1px rgba(0,0,0,0.05)'
  font-family: var(--primary-font-family)

Nitram · April 23, 2019, 8:47am

Latest iteration:

david1 · April 23, 2019, 3:30pm

that looks great!

TheLaw · May 27, 2019, 9:13pm

I can’t get any of the resources working on the latest HA version. Am I the only one with this issue?

apop · June 5, 2019, 3:41am

@Nitram @tefinger crossposting from another thread, as I found an easier way to customize the fonts on the cards in case you’re still looking for this.

raul · June 18, 2019, 9:55pm

Any chance of adding this to github?

Antasp3136 · June 29, 2019, 11:29am

How did you get the cards to be transparent and the header to be so small?

sunny · June 30, 2019, 6:13pm

@Antasp3136

See here for smaller header: Resources (optional)

and here for transparency

bjornb · August 5, 2019, 10:30pm

Thanks a lot for your very nice themes! I use both dark and clear! I added transparency to the cards as well (more modern look), but instead of using card modder for every card I changed some lines in your theme file.

Line changed (where the 0.3 is the transparency):

paper-card-background-color: 'rgba(255, 255, 255, 0.3)'

And for the dark one:

paper-card-background-color: 'rgba(0, 0, 0, 0.3)'

Thanks again!

thomasloven · August 6, 2019, 1:08pm

Use ha-card-background instead.
~~paper-card-background-color~~ is deprecated and not guaranteed to work with transparency.

bjornb · August 6, 2019, 2:04pm

Ah thanks for the advice! Didn’t know that yet!

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.