How do I remove the new outline in Lovelace cards?

Configuration Frontend
1

With the release of Core 2022.11 there came a change to the Lovelace front-end look:

The default dashboard theme has been adjusted to move a little closer to the new Material Design 3 guidelines. Borders around cards are now outlined (instead of having a shadow), and corners are a little more rounded

I use card_mod to use custom css to compress elements together as well as custom:stack-in-card to merge elements together.

Is there a way to globally change the theme to remove the new outline as it’s now quite prominent on my dashboards?

e.g.
image

1 Like
2

Hello :slightly_smiling_face:
There is an open PR for stack-in-card to fix this : Home Assistant 2022.11 compatibility by ov1d1u · Pull Request #47 · custom-cards/stack-in-card · GitHub

1 Like
3

I’d like to remove it globally as it affected the look on all cards, not just ones where I use stack-in

e.g. this is only using css to move the socket WiFi signal strength up into the entity card
image

card_mod:
  style: |
    ha-card {
      box-shadow: none;
      background: rgba(0,0,0,0);
      margin: -130px 0px 0px 300px;
    }
4

Ok, so I think I got a working solution.

With Mushroom themes installed (v0.0.7) goto
Developer Tools
Services
select: Home Assistant Frontend: Set theme

Set the theme as the new mushroom theme: Mushroom Shadow
Call Service

This adds the following to the theme to revert the look back to as before:

    ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
    ha-card-border-width: 0

Addendum:
Once set, apply the themes by
Developer Tools
Services
select: Home Assistant Frontend: Reload themes
Call Service

3 Likes
5

Hi @callumw: sorry - not related to your topic… but I see you are using the meross power strips… something, I am interested in…

So, therefore, I do have a few questions related to this hardware… maybe, you can provide a short answer?
→ does the meross “stripe” have energy counters for each socket? Or does it only count the energy usage for all sockets together?
I guess, the signal strength is just for the stripe itself, not for each socket (since this would not make much sense), right? ^^

6

Short answer…
No power monitoring on these. Signal is for the strip, not per plug :slight_smile:

1 Like
7

Ok - so I tried this and now all my themes are black. I have no light/dark capability now. Where has it written its changes so I can undo them. Setting a new theme is NOT overwriting the black background any more.

8

There’s an option when setting the theme to force light or dark.

Also 2 other places to check.

In your profile, select the theme for your user:
image

You may have to edit the raw YAML in case it’s hard coded in there instead.
Edit Dashboard | Raw Configuration Editor
e.g.

title: HomePage
views:
  - theme: Mushroom Shadow
    path: default_view
    title: HomePage
    ....
9

Yeah, nothing I try works. Even the overview has gone black and you can’t edit that one, so somewhere something has gone horribly wrong :frowning:

10

When you make a change you need to reload your themes.
In Developer Tools
Services
select: Home Assistant Frontend: Reload themes
Call Service

Then the changes should apply

11

Tried that too :frowning:

Most annoying.

12

This may be a daft question, but do you have the mushroom theme installed?

13

Yup. I just don’t get why none of my themes will now apply.

14

If you set your profile to use the default (basic Lovelace) then it should work.

image

If not then it sounds like you have a typo, extra/missing padding in the raw dashboard YAML that’s preventing it from being displayed.
You could check this by creating a new/test dashboard to see if it generates a vanilla one for you correctly.

15

I have automations to change from dark to light. These have worked for years and now they don’t. I just don’t get it. I think I’ll roll back and see if that fixes it.

16

Rolling back has fixed it. I won’t be using that theme again in a hurry!

17

Hi,
Are you using services to change between light / dark mode?

I’ve just tried the service “Home Assistant Frontend: Set theme” - and noticed, that it does not really change the modes of Any theme when it does have light and dark modes…

Unfortunately, I can’t test it with the default theme, since this does not appear in the selection of the available themes in the development area:

all available themes…
grafik

“Backend-Selected” needs to be selected if I want to change the theme through the service…

Only the “Google Theme” and “outline” appear in the selection of the service caller - I can’t select “default” or “system”…

grafik
grafik1231Ă—494 23.6 KB

just changing between “Dark” and “Light” without selecting a Theme throws an error on the Service Caller:

grafik
grafik1510Ă—589 32.5 KB

using one of the both other themes does only work for the “light” theme… “dark” seems not to work - but both themes do support that:

grafik
grafik780Ă—260 11.7 KB

grafik

Does this work in a version earlier 2022.11. ?
If yes, this seems to be a bug…

I will try to do some tests on another Test-Installation…

18

for now, this is what I did and it worked for me everywhere

                 card_mod:
                   style: |
                     ha-card {
                         border: solid 0px ;
                      }
4 Likes
19

If you do use custom themes, you can probably remove the border by adding the following to your themes yaml:

# Cards
  ha-card-border-width: "0px"

that should remove the border from ALL cards.
So you don’t need to apply the card-mod to each card :slight_smile:

I think, some of the themes available on HACS will be updated soon - to remove unwanted borders…
If you are using the HomeAssistant Default theme and want the old Design back, i’ve created an “Pre-2022.11.0” Theme

Original Home-Assistant pre 2022.11
grafik

Original “Outline” Theme (removed shadow)
grafik

Some variations without border-radius on the edges…
grafik
grafik

20

That has helped me a lot before.
But how do I get the shadow back now?