2022.11: Card borders

[miiGii]

Try:

no-borders:
  modes:
    dark:
      # I think there must be at least one setting here to get this to work, try for example
      text-color: '#ffffff'
  card-mod-theme: no-borders
  card-mod-root-yaml: |
    .: |
      ha-app-layout {
        --ha-card-border-width: 0px;
        --ha-card-border-radius: 1px
      }

[CChris (Christoph)]

I agree.
But that should be for those - who want to have the “default” theme - just without the round borders… similar as it was with the original “outline” theme from @frenck

Afaik, you can’t add these two lines to a theme that does not appear in the “themes” folder?

[Mariusthvdb (Marius)]

@CChris

Afaik, you can’t add these two lines to a theme that does not appear in the “themes” folder?

there is no such thing.

you either dont have themes configured (and by default use only the ‘default’ theme), or you do have themes configured.

if the former, you can use the new edits by creating a first smal theme, with only those lines. And select that theme in the selector. (you can not add anything to the ‘default’ theme)

if the latter, add it to any/all themes and continue like before.

easily done with a yaml anchor on the top theme in your file:

  <<: &generic
    ha-card-border-radius: 0px
    ha-card-border-width: 0px
    any other stuff you want in all other themes

and inject in all below themes in the file:

  <<: *generic

[CChris (Christoph)]

@Mariusthvdb

if the former, you can use the new edits by creating a first smal theme, with only those lines.

that’s what I did - and that’s what I would like to share on HACS for those who don’t want to use one of the many themes because they still like the color-theme from the default installation - but don’t want to have rounded cards

so - basically - just a “default” theme without “radius”

Still trying to figure out how to do the switch between dark / light mode… since this does not seem to work in the “Set theme” service…

[Mariusthvdb (Marius)]

that’s not how that works either…

frontend.set_theme does what is says, set a theme.

In a theme you can have specifics for light and dark_mode. If not, again, it follows the settings for default
dark/light mode follow the mode your device is in.

however, you can set themes, and not configure those dark/light modes at all. I dont use them, and dont use dark mode either. Eg I switch to dark themes on certain occasions (below horizon/away) or red theme (alarm triggered…)

So depending in your wishes, you can customize away

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

[CChris (Christoph)]

yes. but even if I do have modes for dark and light, it seems that the service can’t set them.

example?
I do have a google theme… that does have the following modes:

this is the setting in the service:

Executing “call service”

User Setting is “Backend Selected”

→ no change.

The same user-Settings, the same theme → Light mode selected:

executing “call service”

the theme will be changed… but only the light mode is available.

I can ONLY change the mode within the User settings:

So in my eyes, the “Mode” selection in the service seems not to work?!
And the theme selection itself does ONLY work, when light mode has been selected.

[Mariusthvdb (Marius)]

maybe move this to a separate thread as it is not about the release, but about the more generic theme workings.
it would also give you some more playground and experiment with Home Assistant Frontend - Home Assistant

[calisro (Rob)]

@Mariusthvdb

easily done with a yaml anchor on the top theme in your file:

  <<: &generic
    ha-card-border-radius: 0px
    ha-card-border-width: 0px
    any other stuff you want in all other themes

and inject in all below themes in the file:

  <<: *generic

EDIT: I went this route instead and also added a resource in the browser instead (the companion app doesn’t want to load new modules that way without a wipe).

Overriding Themes

Did you manage to achieve this? My scenario is slightly different - I want to define some global colour variables to use as thresholds wherever I use the custom mini-graph-card to display room temperatures. I’d rather not hardcode the css colour string every time I set it. Creating a copy of the theme introduces a whole bunch of new issues because it’s now forked and creates a maintenance overhead with every update of the original.

[nickrout]

@CChris

, if Frenck would agree with it… ?!

Frenck’s theme is released under the MIT license, so your question is answererd

[DrewXT (Andrew)]

@Ildar_Gabdullin

Anyway, these rules should be considered as recommendations, not a dogma.

I would argue the same about running non-HA containers on docker when running Supervised.

[C.G.B.Spender]

That’s the ticket!

no-borders:
  modes:
    dark:
      text-color: '#ffffff'
  card-mod-theme: no-borders
  card-mod-root-yaml: |
    .: |
      ha-app-layout {
        --ha-card-border-width: 0px;
        --ha-card-border-radius: 1px
      }

finally gives me back my old dashboard

instead of this

Many thanks for your advice!

[QbaF]

So we know how to fix borders and their radius. What about shadows?
Or maybe generally there is a link with the list of HA CSS identifiers?

[CChris (Christoph)]

are you using the HomeAssistant default theme? or any other theme?

Recreated original pre-2022.11 theme and some other options

Based on the work from @frenck, I have created some variations of his “outline” theme. First of all, due to the replies in the Blog post to the 2022.11.0 relese, I’ve recreated the Original Theme from HomeAssistant: First Theme Name: [grafik] Border-Radius: 4px Shadow Light & Dark mode [grafik] [grafik] Second Theme Name: [grafik] This does recreate the “default” outline-Theme from @frenck, Boder Radius: 4px Removing the default Shadow from the Cards Light & Dark mode [grafik] [gr…

[Ildar_Gabdullin]

@CChris

are you using the HomeAssistant default theme? or any other theme?

Do you understand that any attempts of fixing a design by themes is a WRONG way?
Wrong - at least because not all results depend on a value of some variable.

[QbaF]

Great, thanks, that repository is helpful and self-explaining enough.

The CSS identifiers complete list is still nice to have.

[petro]

He’s giving people help to change the look. No reason to get pissed off at him.

[CChris (Christoph)]

hm… I don’t see any issues with it.
The developers have made a design decission for their software.

You can like it - or not.
If a customization does not work anymore in the way it was before the update, you need to fix it for you.
Customization of Design elements is - afaik not the responsibility of the HA Devs.

If you want to stick to the “old HA default” theme - because you don’t like the new rounded edges, a theme can be an easy way to solve it… It is not supposed to fix any other “customization”… It should just provide what it provides. The Pre 2022.11 look.
Nothing more.

[Ildar_Gabdullin]

@petro

He’s giving people help to change the look. No reason to get pissed off at him.

You misunderstood me. This is not about disrespect of helping. This is about hilighting a fact that themeing may not help.

[Ildar_Gabdullin]

@CChris

because you don’t like the new rounded edges, a theme can be an easy way to solve it

Already said - this is not only about changing one variable.

[petro]

The theming works, the card mod also works for the default theme.