Rounded corners in every theme

Configuration
1

Having an already created theme, how and where to add the two new variables ha-card-border-radius and ha-card-background ?
I’d like to have some examples…

2

bumping this thread because I have tried adding ha-card-border-radius: ‘20px’ to my theme’s but it isn’t working… hoping for some guidance, please.

3 
frontend:
  themes:  

    slate:
      # Main colors
      ha-card-border-radius: '10px'

I have a themes.yaml in packages

@sparkydave did you do yours on a mobile? the quotes are WRONG (typical of iOS)

‘20px’ </=> '20px'
4

…actually I had just copy/pasted from another thread. My bad, I should have known something was up when the text colour seemed wrong in the IDE editor. Thanks for pointing it out, working now :slight_smile:

1 Like
5

If one has an existing theme, but only wants to tweak it slightly, is there a syntax that would allow a mix of e.g. setting the card radius and have a !include_dir_merge_named?

For example, this is my themes section:

frontend:
  themes: !include_dir_merge_named themes

Is there a way to set ha-card-border-radius: 10px without having to define it for each theme? (Or perhaps stated differently: Can one mix !include and still set values for specific keys?)

In my case, I’ve defined a custom light theme similar to the OP:

custom-light-mode:
  ha-card-border-radius: 10px

But I also have the slate theme installed (and automatically included with the !include) and want to set the same card radius CSS on it.

I’m not sure whether I’m asking this in the right way, but I hope it’s clear what I’m trying to do.

6

Create a file in www called ThemeOveride.js with the following contents:

/*
Idea stolen from https://gist.github.com/thomasloven/2a37152725c582fec4420ecedb65ebe3

Add this to your configuration.yaml
frontend:
  extra_module_url:
    - /local/ThemeOverride.js

And put the following into <config-dir>/www/ThemeOverride.js
*/

document.documentElement.style.setProperty('--ha-card-border-radius', '10px');

Then in configuration.yaml put this:

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /local/ThemeOverride.js

Restart HA and you’ll have the 10px rounded corners on all cards.

3 Likes
7

Excellent, that will do it, thanks.

1 Like
8

I’m so using this to set a card background blur :smiley:

9

Not working for me :cry:

10

It stopped working some time ago so you just need to add it to your themes