Upon further research, this has been part of the standard since 2020. Which shows you how long I've had my eye off that particular ball. To illustrate, here's a sample HTML I wrote with a poem generated from ChatGPT.
<!DOCTYPE html>
<html>
<head>
<title>Dark Mode test</title>
<style>
</style>
</head>
<body>
<h1>TESTING DARK MODE</h1>
<p>
When daylight fades from glass and screen,<br />
and white gives way to something keen,<br />
the world grows soft, the edges thin—<br />
a quieter place to think within.
</p>
<p>
The glare that once would bite and burn<br />
now yields to night at every turn,<br />
where pixels rest and shadows stay<br />
like thoughts that choose a gentler way.
</p>
<p>
No blinding page, no sterile light,<br />
just constellations born of night—<br />
a code of ink, a calmer tone,<br />
a world that feels more like your own.
</p>
<p>
And in that dark, so still, so wide,<br />
the noise of day steps back aside—<br />
you read, you write, you drift, you see<br />
how brightness isn’t clarity.
</p>
</body>
</html>
<html>
<head>
<title>Dark Mode test</title>
<style>
</style>
</head>
<body>
<h1>TESTING DARK MODE</h1>
<p>
When daylight fades from glass and screen,<br />
and white gives way to something keen,<br />
the world grows soft, the edges thin—<br />
a quieter place to think within.
</p>
<p>
The glare that once would bite and burn<br />
now yields to night at every turn,<br />
where pixels rest and shadows stay<br />
like thoughts that choose a gentler way.
</p>
<p>
No blinding page, no sterile light,<br />
just constellations born of night—<br />
a code of ink, a calmer tone,<br />
a world that feels more like your own.
</p>
<p>
And in that dark, so still, so wide,<br />
the noise of day steps back aside—<br />
you read, you write, you drift, you see<br />
how brightness isn’t clarity.
</p>
</body>
</html>
Example
The majority of the time, the defaults for a site tend towards the Light Mode, like so.<!DOCTYPE html>
<html>
<head>
<title>Dark Mode test</title>
<style>
body
{
background: rgb(255, 255, 255);
color: rgb(100, 100, 100);
font-family: Georgia;
font-size: 15px;
}
h1
{
color: rgb(150, 50, 0);
}
</style>
</head>
<body>
<h1>TESTING DARK MODE</h1>
<p>
When daylight fades from glass and screen,<br />
and white gives way to something keen,<br />
the world grows soft, the edges thin—<br />
a quieter place to think within.
</p>
<p>
The glare that once would bite and burn<br />
now yields to night at every turn,<br />
where pixels rest and shadows stay<br />
like thoughts that choose a gentler way.
</p>
<p>
No blinding page, no sterile light,<br />
just constellations born of night—<br />
a code of ink, a calmer tone,<br />
a world that feels more like your own.
</p>
<p>
And in that dark, so still, so wide,<br />
the noise of day steps back aside—<br />
you read, you write, you drift, you see<br />
how brightness isn’t clarity.
</p>
</body>
</html>
<html>
<head>
<title>Dark Mode test</title>
<style>
body
{
background: rgb(255, 255, 255);
color: rgb(100, 100, 100);
font-family: Georgia;
font-size: 15px;
}
h1
{
color: rgb(150, 50, 0);
}
</style>
</head>
<body>
<h1>TESTING DARK MODE</h1>
<p>
When daylight fades from glass and screen,<br />
and white gives way to something keen,<br />
the world grows soft, the edges thin—<br />
a quieter place to think within.
</p>
<p>
The glare that once would bite and burn<br />
now yields to night at every turn,<br />
where pixels rest and shadows stay<br />
like thoughts that choose a gentler way.
</p>
<p>
No blinding page, no sterile light,<br />
just constellations born of night—<br />
a code of ink, a calmer tone,<br />
a world that feels more like your own.
</p>
<p>
And in that dark, so still, so wide,<br />
the noise of day steps back aside—<br />
you read, you write, you drift, you see<br />
how brightness isn’t clarity.
</p>
</body>
</html>
This is what that site would look like...
Now in order to specify a Dark Mode, we first specify a CSS Media Query, with Dark.
<style>
body
{
background: rgb(255, 255, 255);
color: rgb(100, 100, 100);
font-family: Georgia;
font-size: 15px;
}
h1
{
color: rgb(150, 50, 0);
}
@media (prefers-color-scheme: dark)
{
}
</style>
body
{
background: rgb(255, 255, 255);
color: rgb(100, 100, 100);
font-family: Georgia;
font-size: 15px;
}
h1
{
color: rgb(150, 50, 0);
}
@media (prefers-color-scheme: dark)
{
}
</style>
And then we specify what to override in Dark Mode.
@media (prefers-color-scheme: dark)
{
body
{
background: rgb(0, 0, 0);
color: rgb(200, 200, 200);
}
h1
{
color: rgb(255, 200, 50);
}
}
{
body
{
background: rgb(0, 0, 0);
color: rgb(200, 200, 200);
}
h1
{
color: rgb(255, 200, 50);
}
}
Emulating Dark Mode in your browser
Right now, I'm on a Mac and this is Chrome.1. Get into your console. Open the Command Menu by pressing Cmd + Shift + P.
2. Type in "Show Rendering" and press select.
3. Toggle between the modes..
Here's a very simple look. Black background, light grey text.
Who are you in the Dark?
That was fun, I guess. So much we could do with this. I have ideas already. My mind is going... ahem... dark places.Let there be Light!
T___T
T___T
No comments:
Post a Comment