Hallo,
ich habe folgende Seite erstellt in HTML5. Zudem habe ich von CSS @media queries eingebunden.
Nun möchte ich über Einstellungen, Personalisierung, Modus zwischen Hell und Dunkel wechseln.
Die Seite soll sich entsprechend meiner @media queries anpassen:
Leider gibt es hier Probleme und ich als Anfänger bin ehrlich gesagt überfragt
Hier ist mein Code:
Folgende Probleme:
1. Ich führe die Datei im Light-Modus aus. Der a-Link wird mir in schwarz angezeigt und nicht in blau?
2. Wechsel ich über Einstellungen, Personalisierung... von Modus Hell in Dunkel und lade die Seite neu, passiert überhaupt nichts. Warum?
Liebe Community, könnt Ihr mir hier bitte weiterhelfen. Bitte die Dinge so erklären, dass es auch ein HTML5 und CSS-Anfänger versteht.
Danke!
ich habe folgende Seite erstellt in HTML5. Zudem habe ich von CSS @media queries eingebunden.
Nun möchte ich über Einstellungen, Personalisierung, Modus zwischen Hell und Dunkel wechseln.
Die Seite soll sich entsprechend meiner @media queries anpassen:
Leider gibt es hier Probleme und ich als Anfänger bin ehrlich gesagt überfragt
Hier ist mein Code:
Code:
<!DOCTYPE html><html lang="en-US">
<!-- A1) Startseite eine Webpage nennt man index -->
<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 Dunkel-Modus */
--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) {
/* Anpassungen im Hellen-Modus */
--textColor: black;
--backgroundColor: white;
--accentlighter1: blue;
body {
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>
Folgende Probleme:
1. Ich führe die Datei im Light-Modus aus. Der a-Link wird mir in schwarz angezeigt und nicht in blau?
2. Wechsel ich über Einstellungen, Personalisierung... von Modus Hell in Dunkel und lade die Seite neu, passiert überhaupt nichts. Warum?
Liebe Community, könnt Ihr mir hier bitte weiterhelfen. Bitte die Dinge so erklären, dass es auch ein HTML5 und CSS-Anfänger versteht.
Danke!
Zuletzt bearbeitet: