Clear Theme

I added the fonts variables as described above to my theme and the font as a resource to Lovelace but the fonts on the cards do not change. They are still using Robot … All other fonts in HA changed to the theme defined font. Any ideas what’s wrong? Using HA 0.91.2

@jerrychong25 these are the settings in my Lovelace:

background: top / cover no-repeat url('/local/ha.jpg') fixed

It’s a shorthand notation, combining size, position,… in one line, but it’s standard css. For more info, see f.e. https://www.webfx.com/blog/web-design/background-css-shorthand/
I suggest you try some different options for the size-part.

1 Like

@tefinger, tested it, and indeed, it doesn’t work in the newer release…
I experimented a little further. First, you need to check if the font is also the primary font in your themes.yaml.
What works: if you use custom cards, you can add a font like this (in the style section of the card):
font-family: var(--primary-font-family)
If you do that in every card, after that, if you change your primary font, it will change in all the cards.

The shadows are being displayed despite adding this to my theme.
My HA Version is 90.1.

Do you know what might be wrong? :slight_smile:

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

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)
1 Like

Latest iteration:

3 Likes

that looks great!

1 Like

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

@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.

1 Like

Any chance of adding this to github?

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

@Antasp3136

See here for smaller header: Resources (optional)

and here for transparency

1 Like

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!

3 Likes

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

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

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.

2 Likes

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

3 Likes

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

Please show me how to do it
@Nitram