How to change theme for global corner radius with default theme?

[makerwolf]

Hello!
I welcome the new change that "makes it easier" to globally change the rounded corners. However, I'm using the default theme, and the line in the release notes that says: "This was achievable with just a few lines added to my theme." leaves me a bit clueless. I'd really like to set my rounded corners globally, but stay on the default theme.
How would I go to achieve this?
thanks!

[johndoe0815]

In my understanding your two statements are contradicting. Either you want to use the default only, or you want to specify your own.
You just create a theme, and only the parameters you provide will be overwritten with the default, all the rest remains. And this theme you then set as the default.

You find many examples on the internet. In the configuration.yaml, you put

frontend:
  themes: !include themes.yaml

You then create a themes.yaml, and in there you put e.g.

Classic:
  bubble-border-radius: "8px" 
  bubble-icon-border-radius: "200px" #circle icons
  bubble-sub-button-border-radius: "200px" #circle sub-buttons

And then I have an automation which puts this theme as default once Home Assistant starts:

alias: X - Bei Start Classic Theme einstellen
description: ""
mode: single
triggers:
  - event: start
    trigger: homeassistant
conditions: []
actions:
  - data:
      name: Classic
    action: frontend.set_theme

I have this in place already for a long time, so honestly I do not remember if without this automation you cannot set it as a default. I think I maybe did that to make sure that for every user this is applied.

[SylvainDx]

a little warning, if you use dark mode, you may want to dooble the informations like this :

    Classic:
      modes:
        light:
          bubble-border-radius: "8px" 
          bubble-icon-border-radius: "200px" #circle icons
          bubble-sub-button-border-radius: "200px" #circle sub-buttons
        dark:
          bubble-border-radius: "8px" 
          bubble-icon-border-radius: "200px" #circle icons
          bubble-sub-button-border-radius: "200px" #circle sub-buttons

This will allow you to switch from one to the other without more trouble

[heroprint]

I did the update today and entered your code directly into the configuration.yaml.

Unfortunately that doesn't work.

I have this under frontend:

frontend:
themes: !include_dir_merge_named themes

How can i round the edges ob bubble card ?

[makerwolf]

instead of using a themes.yaml you just create a folder inside your themes folder and name it "Classic" with a "Classic.yaml" inside, and that's where you put your code. Now select Classic theme and your settings are applied.

[johndoe0815]

I did the update today and entered your code directly into the configuration.yaml.

Unfortunately that doesn't work.

I have this under frontend:

frontend: themes: !include_dir_merge_named themes

If this is your code, then it is definitely NOT the same as I posted:

frontend:
  themes: !include themes.yaml

Here is the official documentation on how themes work:
https://www.home-assistant.io/integrations/frontend/

[johndoe0815]

a little warning, if you use dark mode, you may want to dooble the informations like this :

    Classic:
      modes:
        light:
          bubble-border-radius: "8px" 
          bubble-icon-border-radius: "200px" #circle icons
          bubble-sub-button-border-radius: "200px" #circle sub-buttons
        dark:
          bubble-border-radius: "8px" 
          bubble-icon-border-radius: "200px" #circle icons
          bubble-sub-button-border-radius: "200px" #circle sub-buttons

This will allow you to switch from one to the other without more trouble

According to the official docs I understand that it is not necessary to have the exact same code for light and dark, you only need those sections if you want to have different settings for them:
https://www.home-assistant.io/integrations/frontend/

The final theme rules are determined in three steps: First, the default dark theme CSS variables will be applied, then second the CSS variables from the top level of the theme that are mode-independent (primary-color: steelblue in this example) and lastly the mode-specific CSS variables will be layered on top (secondary-text-color: slategray).

As I only work with the light theme I have however not tested it personally.

[makerwolf]

Thank you!