HTML, CSS @media query?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DarkModeTest</title>
<style>
:root {
--textColor: black ;
--backgroundColor: white;
--accentlighter1: blue;
}
@media (prefers-color-scheme: dark) {
/* Anpassungen im Dunkelmodus */
--textColor: white;
--backgroundColor: black;
--accentlighter1: orange;
body {
background-color: var(--backgroundColor);
}
a {
color: var(--accentlighter1);;
}
h1, h2, h3 {
color: var(--textColor);
}
}
@media (prefers-color-scheme: light) {
body {
/* Anpassungen im Dunkelmodus */
background-color: var(--backgroundColor);
}
a {
color: var(--accentlighter1);
}
h1, h2, h3 {
color: var(--textColor);
}
}
</style>
</head>
<body>
<h1>Überschrift 1</h1>
<p>Das ist ein Beispieltext. <br> <a href="#">Hier ist ein Link.</a></p>
</body>
</html>
Ich führe die Datei aus. Befinde mich im prefers-color-scheme: light
passt alles.
Nun wechsle ich über Einstellungen, Personalisierung, Modus auswählen zu Dunkel.
Die @media (prefers-color-scheme: dark) wird nicht ausgelöst.
Warum? Die Schrift bleibt wie bei prefers-color-scheme: light?
1 Antwort
Du hast im Media-Query :root vergessen:
<style>
:root {
--textColor: black ;
--backgroundColor: white;
--accentlighter1: blue;
}
@media (prefers-color-scheme: dark) {
:root {
/* Anpassungen im Dunkelmodus */
--textColor: white;
--backgroundColor: black;
--accentlighter1: orange;
}
}
body {
background-color: var(--backgroundColor);
}
a {
color: var(--accentlighter1);;
}
h1, h2, h3 {
color: var(--textColor);
}
</style>
:root ist ein Pseudoelement, welches sozusagen den Anfang vom DOM spezifiziert. CSS-Variablen müssen immer für :root gesetzt werden, auch beim Überschreiben.
light ist normalerweise Standard, weshalb man nur dark überschreiben muss. Und da du CSS-Variablen verwendet, musst du body, a, h1, etc. pp. auch nur einmal global setzen und es reicht, wenn du dann für den Darkmode die CSS-Variablen änderst.
Verstanden! So ist dein Code um einiges kürzer und effizienter als meiner. Allerdings ist mir immer noch nicht klar, was dieses :root Pseudoelement bewirkt bzw. darstellt? Greife ich damit auf <html> zu?
Greife ich damit auf <html> zu?
Bei HTML-Dokument zeigt :root auf das html-Element. :root zeigt aber immer auf das erste Element im DOM und wenn man CSS zum Beispiel für SVG verwendet, dann gibt es da kein HTML. Deshalb immer :root verwenden.
Ok, vielen Dank für deine Antwort.
Rückfragen dazu:
Was bewirkt dieses :root unter <style>?
Habe ich hier eine Pseudo-Variable angelegt die global ist?
<style>
:root {
--textColor: black ;
--backgroundColor: white;
--accentlighter1: blue;
}
Hier überschreibt man das :root in @media (... light) nochmal?
@media (prefers-color-scheme: dark) {
:root {
/* Anpassungen im Dunkelmodus */
--textColor: white;
--backgroundColor: black;
--accentlighter1: orange;
}
MFG