<!DOCTYPE html> <html lang="de">

<head>

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Beispiel dark mode rudimentär</title>

 <style>
   /* Dunkelmodus (dark mode) */
   /* sehr einfache Variante: alles umdrehen, darin die Bilder zurück drehen */

   /* Body Hintergrund-Farbe (statt transparent), damit filter auch im Chrome funktioniert */
   body { background: white; }

   @media screen and (prefers-color-scheme: dark) {

     html { filter: invert(1) hue-rotate(180deg); }

     img,
     video { filter: invert(1) hue-rotate(180deg); }

   /* Allgemeines */
   body { font-family: sans-serif; }

   img { max-width: 100%; }

   .blau { color: steelblue; }

   .gruen { color: darkgreen; }

   .rot { color: darkred; }
 </style>

</head>

<body>

Grosse Überschrift mal in blau

Testen: Schalte dein Gerät oder den Browser hin und her zwischen hellem und dunklem Modus.

Kleinere Überschrift grün

… und einige Texte vielleicht rötlich?

Ein einfaches JPG Bild, das sich im Dunkelmodus nicht selbst verändern kann:

 <img src="https://wiki.selfhtml.org/images/0/09/Narzisse-sm.jpg" alt="Beispielbild" />

</body>

</html>