@media queries funktionieren nicht.

Oli I. · 3 November 2023

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:

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!

MrMurphy · 3 November 2023

Ich sehe nicht dass es sich bei deinen Angaben um gültiges CSS handelt.

Es handelt sich eher um eine Stylesheet-Sprache, die erst durch einen Interpreter, Präprozessor oder ähnliches laufen muss, wobei sie dann in gültiges CSS umgewandelt wird. Meiner Kenntnis nach funktioniert das bei Inside-CSS (CSS im head-Bereich der Seite) wie bei dir nicht.

Solche Stylesheet-Sprachen wie Sass wurden vor ein paar Jahren mal unheimlich gehypet, haben sich aber nicht durchsetzen können, da der Aufwand dafür viel zu hoch war und sie, auch bedingt durch die Weiterentwicklung vom CSS, keine wirklichen Vorteile boten.

ThomasF · 4 November 2023

MrMurphy schrieb:
Ich sehe nicht dass es sich bei deinen Angaben um gültiges CSS handelt.

kann mich täuschen aber: mMn gültig aber fehlerhaft. Kein Sass. CSS-Variable gibt es schon seit 10 Jahren.

@Oli I.
Deine Variablen sind nicht bekannt.
Du hast sie im allgemeinen Teil auskommentiert und im query-teil nicht der :root pseudo-class zugewiesen bzw fehlehaft eingebunden.

CSS:

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

/* Anpassungen im Hellen-Modus */
:root{
--textColor: black;
--accentlighter1: blue;
}
h1{
    color: var(--textColor);
}
a {
    color: var(--accentlighter1);
}  
}

@media queries funktionieren nicht.

Oli I.

Neues Mitglied

MrMurphy

Senior HTML'ler

ThomasF

Neues Mitglied

Neueste Beiträge