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

 <style>

body { background: var(--background-color); color: contrast-color(var(--background-color)); max-width: 44em; margin-inline: auto; }

h1 { --header-color: var(--accent-color-1); background: var(--header-color); color: contrast-color(var(--header-color)); padding: .5em 1em .5em 3em; border-radius: 1em; }

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

 body {
   --background-color: var(--base-color-3);
 }

h1 { 

   --header-color: var(--accent-color-3);
 }

}


root {
 --background-color: #fff;
 --base-color-1: #ccc;

--base-color-2: #666; 

 --base-color-3: #333;	
 --accent-color-1: darkred;
 --accent-color-2: oklch(.60 0.16 30);
 --accent-color-3: oklch(.90 0.1 30);
 --accent2-color-1: orange;
 --accent2-color-2: oklch(.93 0.12 70);
 --accent2-color-3: oklch(.99 0.1 70);	
 color-scheme: light dark;

}

/* Allgemeines */ 

   img { 
     width: 20em;
     max-width: 100%;
   }
   
   h1:before { left: .8em !important; }
   
   .gruen { color: light-dark(darkgreen, #59E44F); }

   .warning { color: light-dark(var(--accent2-color-1), var(--accent2-color-3)); }
 </style>

</head>

<body>

Einfache Webseite mit Dark Mode

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

Kleinere Überschrift grün

… und einige Texte vielleicht in gelb?

<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-4.html"