Beispiel:Dark Mode-2.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>Dark Mode - 2</title>

 <style>
root {
 color-scheme: light dark;

} .scroll-demo { 

 height: 33em;
 overflow: auto;

}

body { background: light-dark(white, #111); color: light-dark(#111, #eee); max-width: 44em; margin-inline: auto; }

p { color: light-dark(#111, #eee);}

/* Allgemeines */ 

   img { 
     width: 20em;
     max-width: 100%;
   }
   
   .blau { color: steelblue; }

   .gruen { color: light-dark(darkgreen, #59E44F); }

   .rot { color: light-dark(darkred, #FF93A9); }
 </style>

</head>

<body>

Einfache Webseite mit color-scheme: light dark

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?

<input placeholder="placeholder"><button>Speichern</button>

Ein einfaches Bild:

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

</body>

</html>

Abgerufen am 3.05.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:Dark_Mode-2.html"