I’m trying to setup a personal website to display in dark mode where the user’s browser is set for that,and to default to light mode in all other cases. I’m using current firefox-esr in light mode, and firefox-stable in dark mode.Other tabs in the prefers-dark browser show me a dark page when available.
This is on linux, versions are ff115.12.0esr and ff127.0.
I’ve worked through the css with separate dark and light versions until both the html and the css’s passed w3c validation. Then I merged them and again checked validation. But only the default (light) page appears in both browsers instead of light in one and dark in the other.
I then tried swapping the values so that light was the option and dark the default – dark appeared in both browsers.
The minimalish css with font size and spacing changed to check that they can change:
/* styling for dark mode if selected */
@media (prefers-color-scheme: dark) {
body {
background-color: #333;
color: white;
font-size: 112.5%;
line-height:1.3;
}
a:link {
color: LightBlue;
}
/* visited - try for light mauve to stand out */
a:visited {
color: #bbb;
}
}
/* styling for (default) light mode */
body {
background-color: var(--background-color, #eee);
color: var(--color, #000);
font-family: sans-serif;
font-weight: 500;
font-size:119%;
line-height:1.2;
}
a:link {
color: var(--color, #004080);
}
a:visited {
color: var(--color,#600040);
}
And the minimalish html
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<title>Ineffective prefers-color-scheme</title>
<link rel="stylesheet" type="text/css" href="mwe.css">
</head>
<body>
<h2>This should show dark mode or light mode</h2>
<p>For some reason this only shows the default mode.</p>
<p>On firefox-esr I prefer light, on firefox-stable I prefer dark and
on the latter I get dark mode on sites where it is available.</p>
<p>Checking at
<a href="https://septatrix.github.io/prefers-color-scheme-test/">septatrix</a>
both report as expected.</p>
</body></html>