Beispiel:Dark Mode-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

<head> 

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css" />
 <title>Beispiel dark mode rudimentär</title>

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

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

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

     html { filter: invert() hue-rotate(180deg); } /* invert Standard = 1 */

     img,
     video { filter: invert() hue-rotate(180deg); }
     
     /* in diesem Beispiel auch das Self Logo umdrehen*/
     h1:before  { filter: invert() hue-rotate(180deg); }

   }

   /* Allgemeines */
   img { 
     width: 20em;
     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>

Abgerufen am 2.05.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:Dark_Mode-1.html"