Warum Home Assistant Thermostat Karten nicht gut sind

Hallo Simon,
Hallo Community,

ich habe deine Thermostatkarte kopiert und sie meinem einen eigenen Style angepasst. damit man auch sieht, dass man die Thermostate swipen kann habe ich eine Scrollbar hinzugefügt. da ich den Dunkelmodus nutze und die Scrollbar schwarz ist, kann man diese aber leider nicht vernünftig sehen.

ich habe es mit Gemini und mit card_mod versucht – er gab mir diesen Code aus, der hat aber keinerlei auswirkungen auf den Style:

card_mod:
style: |
.swiper-scrollbar {
height: 8px !important; /* Optional: Höhe der Scrollbar anpassen */
}
.swiper-scrollbar-drag {
background: var(–accent-color) !important; /* Farbe des Scrollbalkens */
border-radius: 10px !important; /* Optional: Abrundung des Scrollbalkens */
}
.swiper-scrollbar-horizontal {
background: rgba(255, 255, 255, 1) !important; /* Hintergrundfarbe der Scrollbar-Schiene */
}

Mein Gesamter Code sieht so aus:

type: custom:vertical-stack-in-card
cards:
  - cards:
      - type: custom:swipe-card
        parameters:
          effect: coverflow
          grabCursor: true
          centeredSlides: true
          slidesPerView: auto
          coverflowEffect:
            rotate: 50
            stretch: 0
            depth: 100
            modifier: 1
            slideShadows: true
          spaceBetween: 8
          scrollbar:
            hide: false
            draggable: true
            snapOnRelease: true
        cards:
          - entity: climate.schlafzimmer_heizen
            hide:
              state: true
              temperature: true
            layout:
              step: column
            header:
              name: Schlafzimmer
              icon: mdi:sofa
            control: false
            sensors:
              - entity: sensor.wohnbereich_heizen_temperatur
                icon: mdi:thermometer
              - entity: sensor.wohnbereich_heizen_luftfeuchtigkeit
                icon: mdi:water-percent
            card_mod:
              style: |
                ha-card {
                  --st-font-size-xl: 36px !important;
                  border: none;
                }
            type: custom:simple-thermostat
          - entity: climate.buro_heizen
            hide:
              state: true
              temperature: true
            layout:
              step: column
            header:
              name: Büro
              icon: mdi:desk
            control: false
            sensors:
              - entity: sensor.buro_heizen_temperatur
                icon: mdi:thermometer
              - entity: sensor.buro_heizen_luftfeuchtigkeit
                icon: mdi:water-percent
            card_mod:
              style: |
                ha-card {
                  --st-font-size-xl: 30px !important;
                  border: none;
                }
            type: custom:simple-thermostat
          - entity: climate.masterbad_heizen
            hide:
              state: true
              temperature: true
            layout:
              step: column
            header:
              name: Masterbad
              icon: mdi:shower-head
            control: false
            sensors:
              - entity: sensor.masterbad_heizen_temperatur
                icon: mdi:thermometer
              - entity: sensor.masterbad_heizen_luftfeuchtigkeit
                icon: mdi:water-percent
            card_mod:
              style: |
                ha-card {
                  --st-font-size-xl: 30px !important;
                  border: none;
                }
            type: custom:simple-thermostat
        card_mod:
          style: |
            .swiper-scrollbar {
              height: 8px !important; /* Optional: Höhe der Scrollbar anpassen */
            }
            .swiper-scrollbar-drag {
              background: var(--accent-color) !important; /* Farbe des Scrollbalkens */
              border-radius: 10px !important; /* Optional: Abrundung des Scrollbalkens */
            }
            .swiper-scrollbar-horizontal {
              background: rgba(255, 255, 255, 1) !important; /* Hintergrundfarbe der Scrollbar-Schiene */
            }
    type: horizontal-stack
  - cards:
      - type: custom:mini-graph-card
        align_state: center
        entities:
          - color: "#DAF7A6"
            entity: sensor.wohnbereich_heizen_temperatur
            index: 0
            name: Wohnzimmer
          - color: "#A7C7E7"
            entity: sensor.toilette_heizen_temperatur
            index: 1
            name: Toilette
          - color: "#FFC300"
            entity: sensor.treppenhaus_heizen_temperatur
            index: 2
            name: Treppenhaus
        card_mod:
          style: |
            ha-card {
              border: none;
    type: horizontal-stack
card_mod:
  style: |
    ha-card {
      border: none;
      bachground: transparent;
    }

Hast du uder jemand anders einen Rat?