Card Mod border Farbe ändern bei wechsel zum Darkmode

Dashboard/Cards/Frontend
1

Hallo zusammen,

ich versuch mich schon seit Stunden ein Farbenproblem zu lösen. Ausgang ist ein Custom Card Mod mit Vertiakalen Stapel. Für die background color hab ich ne Lösung gefunden, die den Farbwechsel von hellem zum dunkeln Theme macht, nur für den Rahmen (border) des Gesamtfensters (nicht ha-border) find ich nichts was funktioniert. Im hellen Modus sollte “border: 1px solid rgba(224,224,224,1);” und im dunklen Modus “border: 1px solid rgba(52,52,52,1);”. Habs auch schon mit @media versucht, ging aber auch nicht. Vielleicht könnt ihr mir weiterhelfen. Vielen Dank.

`@media (prefers-color-scheme: dark) {`
`ha-card {`
`–ha-card-border-color: rgba(52,52,52,1);`
`}`
`}`

`type: custom:mod-card`
`style: |`
`ha-card {`
`background-color: var(–card-background-color);`
`border: 1px solid rgba(224,224,224,1);`
`–ha-card-border-width: 0px`
`}`
`card:`
`type: vertical-stack`

:crayon:by HarryP: Code-/Logzeilen formatiert (bitte immer in </> einbinden)
s.a.: (Neues Update & Features - Hier in der Community 🫶)

2

Magst du vielleicht ein Screenshot machen und grob zeigen was du meinst.

Was nutzt du jetzt genau unter

verstehe ich:

aber nicht

Und die habe ich auf die schnelle auch nicht in HACS gefunden.

3

Grüß dich…

eventuell könntest du deinen geposteten Code, den HarryP ja bereits in einen Code Block gepackt einmal korrekt einfügen, dass man auch einrückungen sehen kann..

Eine Frage… was ist custom:mod-card? bzw… wo kommt denn der Code her?

5

@totow Ja, es geht um lovelace-card-mod
@Schlumperdix von der lovelace-card-mod Seite:

border4
border41071×655 131 KB

Hier mein vertikaler Stapel:

border
border634×568 63.3 KB

Der Code zum vertikalen Stapel:

type: custom:mod-card
style: |
  ha-card {
    background-color: var(--card-background-color);
    border: 1px solid rgba(224,224,224,1);
    --ha-card-border-width: 0px
  }
card:
  type: vertical-stack
  title: Heizkörper
  cards:
    - type: custom:mushroom-climate-card
      entity: climate.hk_bad
      show_temperature_control: true
      hold_action:
        action: none
      double_tap_action:
        action: none
      layout: horizontal
      name: Bad
    - type: custom:mushroom-climate-card
      entity: climate.hk_buero
      show_temperature_control: true
      hold_action:
        action: none
      double_tap_action:
        action: none
      layout: horizontal
      name: Büro
    - type: custom:mushroom-climate-card
      entity: climate.hk_kueche
      show_temperature_control: true
      hold_action:
        action: none
      double_tap_action:
        action: none
      layout: horizontal
      name: Küche
    - type: custom:mushroom-climate-card
      entity: climate.hk_schlafzimmer
      show_temperature_control: true
      hold_action:
        action: none
      double_tap_action:
        action: none
      layout: horizontal
      name: Schlafzimmer
    - type: custom:mushroom-climate-card
      entity: climate.hk_wz_gross
      show_temperature_control: true
      hold_action:
        action: none
      double_tap_action:
        action: none
      layout: horizontal
      name: WZ gross
    - type: custom:mushroom-climate-card
      entity: climate.hk_wz_klein
      show_temperature_control: true
      hold_action:
        action: none
      double_tap_action:
        action: none
      layout: horizontal
      name: WZ klein

Wenn ich mit diesem Code in den Dark-Modus wechsle, dann ist die Hintergrundfarbe “background-color: var(–card-background-color);” dynamisch und passt sich an. Der Rahmen des Hauptfensters ist in diesem Fall statisch “border: 1px solid rgba(224,224,224,1);”.

border2
border2641×169 31.9 KB

Er sollte allerdings die Standard Rahmenfarbe haben wie alle anderen Fenster in HA “border: 1px solid rgba(52,52,52,1);”:

border3
border3630×173 30.1 KB

Eine Idee war es über “(at)mediamedia (prefers-color-scheme: dark)” zu versuchen, funktioniert leider nicht:

type: custom:mod-card
style: |
  ha-card {
    background-color: var(--card-background-color);
    border: 1px solid var(--card-border);
    --ha-card-border-width: 0px
  }
style_custom: |
    /* Standardwerte (helles Theme) */    
    --card-border: 1px solid rgba(224,224,224,1);

    /* Für dunkles Theme */
    @media (prefers-color-scheme: dark) {      
      --card-border: 1px solid rgba(52,52,52,1);
    }

Ich hoffe ich konnte euch mein Problem etwas besser schildern. Habt ihr eine Idee wie man das lösen könnte?

:crayon:by HarryP: Zusammenführung Doppelpost (bei Änderungen oder hinzufügen von Inhalten bitte die „Bearbeitungsfunktion“ anstatt „Antworten“ zu nutzen)

6

Hab die Lösung endlich gefunden:

type: custom:mod-card
style: |
  ha-card {
    background-color: var(--card-background-color);
    border: 1px solid var(--divider-color);
    --ha-card-border-width: 0px
  }