Different backgrounds for dark/light mode

Configuration Frontend
1

Hello everyone,

I would like to display a different background image in the dashboard based on the set mode (dark/light).

I have already found the following commands, but I don’t know how to integrate them correctly into my code:

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

My current code for the background of my dashboard is:

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

Thank you very much in advance!

fl0wing

2

One solution is to create a theme and use different backgrounds in the light and dark mode settings

Your Theme:
  modes:
    dark:
      lovelace-background: center / cover no-repeat fixed url('/local/pics/space.png')

    light:
      lovelace-background: center / cover no-repeat fixed url('/local/pics/bluespace.jpg')
3

Thank you! :slight_smile:

I didn’t know that my own theme only has to contain elements that I want to overwrite in the default theme and the rest is taken from the default theme.