Can we change (add variables to) default theme?

[Mariusthvdb (Marius)]

using a few special variables in my themes, I am stuck when loading the default theme.

this is my setup on all themes, which variables are used in the frontend in various places, most importantly the button styles:

  background-color-on: var(--card-background-color)
  background-color-off: var(--primary-color)

  text-color-on: var(--primary-color)
  text-color-off: var(--card-background-color)

  icon-color-on: var(--accent-color)
  icon-color-off: var(--card-background-color)

  active-color: var(--accent-color)

one of my main themes:

however, when loading the default theme, all backgrounds are wiped and show identical, making it impossible to see any difference as designed per use of the above variables…

the default colors don’t have a dark background or primary color significantly opposing enough to use for this purpose.

how could I change that?

[Mariusthvdb (Marius)]

ok, went ahead and simply tried to add the above variables to a newly named theme default in my frontend themes, hoping they would be added to the default settings:

default:
  background-color-on: var(--card-background-color)
  background-color-off: var(--primary-color)

  text-color-on: var(--primary-color)
  text-color-off: var(--card-background-color)

  icon-color-on: var(--accent-color)
  icon-color-off: var(--card-background-color)

  active-color: var(--accent-color)

  accent_color: var(--state-icon-active-color)

  ha-card-border-radius: '0px'
  ha-card-box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
  restriction-lock-row-margin-left: 95%

et voilà:

or in case of a light theme (which this is) maybe better reverse the main colors:

default:
  background-color-on: var(--primary-color)
  background-color-off: var(--card-background-color)

  text-color-on: var(--card-background-color)
  text-color-off: var(--primary-color)

  icon-color-on: var(--accent-color)
  icon-color-off: var(--primary-color)

which is exactly what I hoped for.

so the answer is: yes we can

[klogg]

Nice.
Doesn’t this open up a whole avenue of simplification when used in conjunction with card-mod version 2?

[Mariusthvdb (Marius)]

not sure, haven’t explored card-mod 2 yet, only installed it

[klogg]

Same here.

And I am still only a ‘type-and-hope’ CSS programmer so am still trying to work out the implications!

[Mariusthvdb (Marius)]

haha.
I do think the above would allow for adding more than this to the default theme, so yes, probably all new options card-mod offers for styling in themes would go for default theme too.

[klogg]

It would be nice¹ if theme files could use !include then only one line would need to be added to the theme even if you use more than one theme. e.g. night and day

¹Can we? I haven’t tried…

[Mariusthvdb (Marius)]

I did…

 !include frontend_themes/global_settings.yaml

which would be:

ha-card-border-radius: '0px'
ha-card-box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
restriction-lock-row-margin-left: 95%

but it errors:

homeassistant.exceptions.HomeAssistantError: while scanning a simple key
  in "/config/frontend_themes/themes_custom.yaml", line 19, column 3
could not find expected ':'

so no dont think that would work

[klogg]

What is the name of the default theme when using dark mode?

This (creating a default.yaml and adding extra lines) doesn’t seem to work for me if I select dark mode.

Specifically, I want to use the default dark theme and add the following…

default:

  # blurring-background-behind-popup
  dialog-backdrop-filter: blur(5px)
  dialog-border-radius: 1em;
  dialog-box-shadow: 0em 0em 0.5em;
  iron-overlay-backdrop-opacity: 1
  iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)
  mdc-dialog-box-shadow: 0em 0em 0.5em
  mdc-shape-medium: 1em

which works in custom themes and also in the default light theme

[Mariusthvdb (Marius)]

anyone still using this? I just checked the default theme, but all my settings are gone… can we no longer add this?
seems to have changed during the latest theme change to allow for dark/light modes to allways inherit default. added a FR to please bring this back: add variables to default theme · Discussion #9415 · home-assistant/frontend · GitHub

[klogg]

Using what?

I discovered¹ recently that if you create a theme e.g. my-theme with ‘extras’ in it and set your theme to my-theme then Lovelace uses the default theme for anything not defined in my-theme.

I use it (so far) to blur the background behind pop-ups and for one colour variable:

my-theme:

  # blurring-background-behind-popup
  dialog-backdrop-filter: blur(5px)
  dialog-border-radius: 1em;
  dialog-box-shadow: 0em 0em 0.5em;
  iron-overlay-backdrop-opacity: 1
  iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)
  mdc-dialog-box-shadow: 0em 0em 0.5em
  mdc-shape-medium: 1em

  modes:
    light: 
      warning-highlight-colour: rgb(255, 165, 0)

    dark:
      warning-highlight-colour: rgb(255, 165, 0)

Is that anything close to what you’re asking?

---

¹Not much of a 'discovery I’m sure but it was news to me

[Mariusthvdb (Marius)]

haha, I new knew that…

no, its the other way round, I had some extras added to a default: theme in my themes folder, and that was actually used in the backend default: theme.

with the latest mode to use dark and light modes, this functionality is now blocked. hence the FR to bring that back.

[BradAU (Brad Anderson)]

Hi @Mariusthvdb

Is there actually a ‘default’ theme file that is viewable somewhere in HA?

[Mariusthvdb (Marius)]

not a real theme, but default values, check my post in 2022.11: A heck of a release! - #146 by Mariusthvdb for the links

wait, Ill copy that here for reference:

you can see here frontend/ha-style.ts at c810c67a539f16f250d30f755832ebd9ad990707 · home-assistant/frontend · GitHub and here frontend/styles.ts at c810c67a539f16f250d30f755832ebd9ad990707 · home-assistant/frontend · GitHub what the default settings are

[BradAU (Brad Anderson)]

Thanks very much!