Verschiedener Hintergrund bei (Default)Dark/Light-Theme

Dashboard/Cards/Frontend
1

Hallo zusammen,

ich würde gerne anhand des eingestellten Modus ein anderes Hintergrundbild im Dashboard anzeigen lassen.

Ich habe bereits folgende Befehle gefunden, weiß jedoch nicht, wie ich diese in meinen Code richtig einbinden soll:

@media (prefers-color-scheme: light) {
            
 }  
@media (prefers-color-scheme: dark) {
            
}

Mein Aktueller Code für den Hintergrund meines Dashboards ist:

background: |-
  center / cover no-repeat url("/local/picture/background/black_purple.svg")
    fixed
views:
  - title: Home
    subview: false
    badges: []
    cards: []
  - title: Test
    path: test
    cards: []
title: Tablet-Ansicht

Vielen Dank schon einmal!

Grüße
fl0wing

2

Hallo zusammen,

nach einigen Versuchen bin ich nun den Weg gegangen ein eigenes Theme zu erstellen, was alles viel einfacher macht. Ich habe gelernt, dass in dem eigenen Theme nur das sein muss, was beim Default-Theme geändert werden soll - der Rest wird dann aus dem Default-Theme gezogen.

Das eigene Theme muss unter config/themes/ erstellt werden und kann z.B. my_own_theme.yaml heißen.

Danach kann man über Entwicklerwerkzeuge den Dienst “Home Assistant Frontend: Reload themes” ausführen, der alle Themes lädt. Dann kann man das Theme ganz normal in den Einstellungen zu “my_own_theme” ändern.

Mein Code für verschieden Hintergründe bei Dark/Light sieht dann wie folgt aus:

my_own_theme:
  modes:
    dark:
      lovelace-background: center / cover no-repeat fixed url('/local/picture/background/black_purple.svg')

    light:
      lovelace-background: center / cover no-repeat fixed url('/local/picture/background/green_blue.svg')
1 „Gefällt mir“