Philip: /* Beispiel für Hell-Dunkel-Design-Umschaltung */

2025-02-08T23:23:36Z

Beispiel für Hell-Dunkel-Design-Umschaltung

← Nächstältere Version		Version vom 9. Februar 2025, 02:23 Uhr
Zeile 101:		Zeile 101:

	== Beispiel für Hell-Dunkel-Design-Umschaltung ==		== Beispiel für Hell-Dunkel-Design-Umschaltung ==
	{{~~#widget:~~Iframe		{{Iframe
	\|url = https://codeeditor.ru/code.php?id=2502AUUwBzN5Vw&lang=de		\|url = https://codeeditor.ru/code.php?id=2502AUUwBzN5Vw&lang=de
	\|~~height~~ = 500px		\|höhe = 500px
	\|~~title~~ = Dunkles Design mit CSS		\|titel = Dunkles Design mit CSS
	}}		}}

Philip: /* Beispiel für Hell-Dunkel-Design-Umschaltung */

2025-02-08T23:13:55Z

Beispiel für Hell-Dunkel-Design-Umschaltung

@@ Zeile 101: / Zeile 101: @@
 == Beispiel für Hell-Dunkel-Design-Umschaltung ==
-<syntaxhighlight lang="html" copy>
+{{#widget:Iframe
-<!DOCTYPE html>
+|url = https://codeeditor.ru/code.php?id=2502AUUwBzN5Vw&lang=de
-<html lang="de">
+|height = 500px
-<head>
+|title = Dunkles Design mit CSS
-    <meta charset="UTF-8">
+}}
 == Fazit ==

Philip: /* Verwandte CSS-Artikel */

2025-02-05T18:21:23Z

Verwandte CSS-Artikel

← Nächstältere Version		Version vom 5. Februar 2025, 21:21 Uhr
Zeile 193:		Zeile 193:

	==Verwandte CSS-Artikel==		==Verwandte CSS-Artikel==
	{{~~Encyclopedia~~ CSS/Navigation~~\|state=collapsed}}~~		{{Enzyklopädie CSS/Navigation}}
	~~{{Template:Navigation/CSS\|state=collapsed~~}}
	[[Category:CSS]]		[[Category:CSS]]
	[[wj-ru:Темная тема с использованием CSS]]		[[wj-ru:Темная тема с использованием CSS]]

Philip: Die Seite wurde neu angelegt: „In den letzten Jahren ist der Dark Mode zu einem integralen Bestandteil des modernen Webdesigns geworden. Er reduziert nicht nur die Augenbelastung beim Arbeiten unter schwachen Lichtverhältnissen, sondern spart auch Akkuleistung bei Geräten mit OLED-Displays. Die Implementierung eines dunklen Designs auf einer Website mittels CSS ist relativ einfach, muss aber korrekt umgesetzt werden, damit Benutzer problemlos zwischen heller und dunkler Version wechs…“

2025-02-05T18:20:00Z

Die Seite wurde neu angelegt: „In den letzten Jahren ist der Dark Mode zu einem integralen Bestandteil des modernen Webdesigns geworden. Er reduziert nicht nur die Augenbelastung beim Arbeiten unter schwachen Lichtverhältnissen, sondern spart auch Akkuleistung bei Geräten mit OLED-Displays. Die Implementierung eines dunklen Designs auf einer Website mittels CSS ist relativ einfach, muss aber korrekt umgesetzt werden, damit Benutzer problemlos zwischen heller und dunkler Version wechs…“

Neue Seite

In den letzten Jahren ist der Dark Mode zu einem integralen Bestandteil des modernen Webdesigns geworden. Er reduziert nicht nur die Augenbelastung beim Arbeiten unter schwachen Lichtverhältnissen, sondern spart auch Akkuleistung bei Geräten mit OLED-Displays. Die Implementierung eines dunklen Designs auf einer Website mittels CSS ist relativ einfach, muss aber korrekt umgesetzt werden, damit Benutzer problemlos zwischen heller und dunkler Version wechseln können.

== Grundprinzipien der Arbeit mit Designs ==
Dunkle und helle Designs sind zwei Sätze von Stilen, die dynamisch auf Website-Elemente angewendet werden können. Idealerweise sollten Benutzer die Möglichkeit haben, selbst zu wählen, welches Design sie verwenden möchten, aber auch die Systemeinstellungen des Betriebssystems können berücksichtigt werden.

Es gibt zwei Hauptmethoden zur Implementierung eines dunklen Designs:

* Verwendung von CSS-Variablen und Umschalten der Stile mittels JavaScript
* Automatische Anwendung des Designs basierend auf Systemeinstellungen mittels <code>prefers-color-scheme</code>

Beide Ansätze können kombiniert werden, um die Design-Handhabung flexibler zu gestalten.

== Verwendung von CSS-Variablen für das Design ==
Eine der praktischsten Methoden zur Implementierung eines dunklen Designs ist die Verwendung von CSS-Variablen (<code>custom properties</code>). Dies ermöglicht eine einfache Verwaltung von Farben und anderen Stilparametern.

Zunächst erstellen wir Root-Variablen in <code>:root</code>, die im gesamten Dokument verwendet werden:
<syntaxhighlight lang="css" copy>
:root {
--bg-color: #ffffff;
--text-color: #000000;
}

.dark-theme {
--bg-color: #121212;
--text-color: #ffffff;
}
</syntaxhighlight>
Dann wenden wir diese Variablen auf die Seitenelemente an:
<syntaxhighlight lang="css" copy>
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
</syntaxhighlight>
Jetzt muss nur noch die Klasse <code>.dark-theme</code> zu <code><html></code> oder <code><body></code> hinzugefügt werden, um die Farben zu ändern.

== Designs mit JavaScript umschalten ==
Um Benutzern das Umschalten zwischen hellem und dunklem Design zu ermöglichen, können Sie JavaScript verwenden:
<syntaxhighlight lang="javascript" copy>
const toggleThemeBtn = document.getElementById('theme-toggle');

toggleThemeBtn.addEventListener('click', () => {
document.documentElement.classList.toggle('dark-theme');

// Speichern der Benutzerauswahl im localStorage
if (document.documentElement.classList.contains('dark-theme')) {
localStorage.setItem('theme', 'dark');
} else {
localStorage.setItem('theme', 'light');
}
});

// Gespeicherte Einstellungen beim Laden der Seite prüfen
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.classList.add('dark-theme');
}
</syntaxhighlight>
Auf diese Weise bleibt die Auswahl des Benutzers auch nach dem Neuladen der Seite erhalten.

== Automatische Erkennung des System-Designs ==
Wenn Sie die Systemeinstellungen des Benutzers berücksichtigen möchten, können Sie <code>prefers-color-scheme</code> verwenden. Diese Medienabfrage wendet automatisch das entsprechende Design an:
<syntaxhighlight lang="css" copy>
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #ffffff;
}
}
</syntaxhighlight>
Diese Methode ist praktisch, da sie die Website sofort an die Systemeinstellungen anpasst. Wenn der Benutzer jedoch ein Design manuell auswählen möchte, müssen Sie diesen Ansatz mit JavaScript kombinieren.

== Kombination von automatischer Erkennung und manueller Auswahl ==
Um beide Methoden zu berücksichtigen, können Sie zunächst prüfen, ob eine gespeicherte Design-Auswahl im <code>localStorage</code> vorhanden ist. Falls nicht, werden die Systemeinstellungen angewendet:
<syntaxhighlight lang="javascript" copy>
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

if (userTheme) {
document.documentElement.classList.toggle('dark-theme', userTheme === 'dark');
} else {
document.documentElement.classList.toggle('dark-theme', systemTheme === 'dark');
}
</syntaxhighlight>

== Erstellen eines benutzerfreundlichen Umschalters ==
Nun fügen wir einen Design-Umschaltknopf in HTML hinzu:
<syntaxhighlight lang="html" copy>
<button id="theme-toggle">Design umschalten</button>
</syntaxhighlight>
Der Button ermöglicht dem Benutzer das manuelle Ändern des Designs, und die Logik zum Speichern der Auswahl macht die Interaktion komfortabel.

== Verbesserung der Übergangsanimationen ==
Um den Design-Wechsel sanft erscheinen zu lassen, können Sie eine Animation hinzufügen:
<syntaxhighlight lang="css" copy>
* {
transition: background-color 0.3s, color 0.3s;
}
</syntaxhighlight>
Dies erzeugt einen weichen Abdunkelungs- oder Aufhellungseffekt beim Umschalten der Designs.

== Beispiel für Hell-Dunkel-Design-Umschaltung ==
<syntaxhighlight lang="html" copy>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beispiel für Helles und Dunkles Design</title>
<style>
/* Grundlegende Stile und CSS-Variablen */
:root {
--bg-color: #ffffff;
--text-color: #000000;
}

.dark-theme {
--bg-color: #121212;
--text-color: #ffffff;
}

body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
transition: background-color 0.3s, color 0.3s;
}

button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: var(--text-color);
color: var(--bg-color);
border: none;
border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
}

/* Animation für sanfte Übergänge */
* {
transition: background-color 0.3s, color 0.3s;
}

/* Automatische Erkennung des System-Designs */
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #ffffff;
}
}
</style>
</head>
<body>
<h1>Beispiel für Helles und Dunkles Design</h1>
<p>Dies ist ein Beispiel für die Implementierung von hellen und dunklen Designs mittels CSS, JavaScript und localStorage.</p>
<button id="theme-toggle">Design umschalten</button>

<script>
// Design-Umschaltlogik
const toggleThemeBtn = document.getElementById('theme-toggle');

// Gespeicherte Einstellungen beim Laden der Seite prüfen
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

if (userTheme) {
document.documentElement.classList.toggle('dark-theme', userTheme === 'dark');
} else {
document.documentElement.classList.toggle('dark-theme', systemTheme === 'dark');
}

// Design beim Klicken umschalten
toggleThemeBtn.addEventListener('click', () => {
document.documentElement.classList.toggle('dark-theme');

// Benutzerauswahl im localStorage speichern
if (document.documentElement.classList.contains('dark-theme')) {
localStorage.setItem('theme', 'dark');
} else {
localStorage.setItem('theme', 'light');
}
});
</script>
</body>
</html>
</syntaxhighlight>

== Fazit ==
Die Implementierung eines dunklen Designs auf einer Website mittels CSS und JavaScript ist eine relativ einfache, aber wichtige Aufgabe. Die Verwendung von CSS-Variablen macht den Code praktisch und skalierbar, während die Kombination von <code>prefers-color-scheme</code> und <code>localStorage</code> den Benutzern Flexibilität bei ihrer Auswahl bietet. Als Ergebnis wird die Website adaptiv und bei allen Lichtverhältnissen angenehm zu benutzen sein.

==Verwandte CSS-Artikel==
{{Encyclopedia CSS/Navigation|state=collapsed}}
{{Template:Navigation/CSS|state=collapsed}}
[[Category:CSS]]
[[wj-ru:Темная тема с использованием CSS]]
[[wj-en:Dark Theme using CSS]]
[[wj-fr:Thème sombre avec CSS]]
[[wj-es:Tema oscuro usando CSS]]
[[wj-it:Tema scuro con CSS]]

Dunkles Design mit CSS - Versionsgeschichte

Philip: /* Beispiel für Hell-Dunkel-Design-Umschaltung */

Philip: /* Beispiel für Hell-Dunkel-Design-Umschaltung */

Philip: /* Verwandte CSS-Artikel */