Darkmode nur mit HTML und CSS ( color-scheme)

Ich habe ja schon 2 Möglichkeiten geschrieben wie man einen Dark-Mode für seine Webseite machen kann. Heute zeige ich euch einen „neuen“ Weg der etwa seit 2022 auf allen Browsern möglich ist und zwar einen nur mit reinem CSS. Damals wurde das color-scheme eingeführt und das kann man dafür sehr gut verwenden. Hier findet ihr eine gute color-scheme Übersicht dazu auf Mozilla.

Man kann die Dark-Mode an die Computereinstellungen koppeln und somit die neue Farbauswahl automatisch umstellen lassen, oder aber ihr stellt einen Button bereit (hier eine Checkbox) um so die Umstellung von manuel durchzuführen.

Video

HTML

<div class="container">
      <h1>hello</h1>
      <p>lorem50</p>
      <input type="checkbox" />
    </div>

CSS

:root {
  /* computer im light modus */
  color-scheme: light dark;
  --bodybg: #974747;
  --containerbg: #bbb;
  --titelfarbe: #4a3dfe;
  --textfarbe: #0c002d;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* computer im dark modus */
    --bodybg: #121212;
    --containerbg: #333;
    --titelfarbe: #fff;
    --textfarbe: #ddd;
  }
}

:root:has(input:checked) {
  /* wenn checkbox gecheckt */
  --bodybg: #3f005c;
  --containerbg: rgb(100, 47, 178);
  --titelfarbe: #fff;
  --textfarbe: #ddd;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: var(--bodybg);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

h1 {
  color: var(--titelfarbe);
  font-size: 4rem;
}
p {
  color: var(--textfarbe);
  font-size: 1.2rem;
}
.container {
  background: var(--containerbg);
  width: 90%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}