Dark Mode

Responsive Websites passen sich an verschiedene Geräteeigenschaften und Einstellungen an, um das Layout optimal an unterschiedliche Nutzungssituationen anzupassen. Ein Beispiel hierfür ist die Anpassung an das vom Betriebssystem gewählte Farbschema, wie den eingestellten "Dark Mode". Dies lässt sich mithilfe der Media Query prefers-color-scheme abfragen, und es können daraufhin entsprechende Farbanpassungen vorgenommen werden.

Viele Menschen empfinden den Dark Mode als angenehmer in dunklen Umgebungen. Dabei spielt auch der persönliche ästhetische Geschmack eine Rolle, da der Dark Mode oft als "cooler" als die Standardansicht wahrgenommen wird. Ein weiterer Aspekt, den man nicht außer Acht lassen sollte, ist der Umweltaspekt. Laut einem Video von Google verbrauchen dunkle Oberflächen bis zu 60% weniger Energie.

Die Schreibweise des Media Queries ist simpel und folgt der üblichen Syntax.

@media (prefers-color-scheme: dark) {
  /* CSS Code wenn Dark Mode aktiv */ 
}

Mit prefers-color-scheme wird das Farbschema abgefragt. Es stehen drei Werte zur Verfügung:

In Abhängigkeit zum eingestellten Farbschema kann dann das Layout umgefärbt werden.

Um Bilder im HTML-Code auszutauschen, bietet sich die Verwendung des <picture>-Elements an. In diesem Code wird das Bild light.png als Ausweichlösung (Fallback) geladen. Falls der Dark Mode aktiv ist, erfolgt automatisch ein Austausch des Bildes gegen dark.png.

<picture>
  <source srcset="dark.png" media="(prefers-color-scheme: dark)">
  <img src="light.png" alt="">
</picture>

Die Anpassung von SVG-Grafiken für den Dark Mode lässt sich durch die Integration eines Inline-Style-Blocks realisieren. Innerhalb des SVG-Codes wird dabei eine Media Query verwendet, um spezifische Anpassungen für den Dark Mode vorzunehmen.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  
  <style>
    .star {
      fill: #007c86;
      stroke: #1c2225;
    }        
    @media (prefers-color-scheme: dark) {
      .star {
        fill: #bad077;
        stroke: #cccccc;
      }
    }
  </style>
        
  <polygon class="star" points="100 14 127.943 70.619 190.426 79.698 145.213 123.77 155.886 186 100 156.619 44.114 186 54.787 123.77 9.574 79.698 72.057 70.619 100 14" stroke-miterlimit="10" stroke-width="2"/>

</svg>

Durch die Verwendung von einer SVG-Datei als Favicon für eure Website, lässt sich auch dieses im Dark Mode anpassen.
Quelle: https://kulturbanause.de/blog/dark-mode-und-farbschema-mit-css-abfragen-prefers-color-scheme/

Windows bietet die Möglichkeit, einen Darstellungsmodus mit erhöhtem Kontrast einzustellen. Dieser Modus kann mithilfe eines speziellen, nicht standardkonformen Queries abgefragt werden.

@media screen and (-ms-high-contrast: active) { 
  /* CSS Code, wenn High Contrast aktiv */
}