Keeping your users in the Dark (Mode)!
17th
May 2026, 19:49
Media queries in CSS aren't new. I usually use them for mobile-friendly layouts or print views. However, I encountered a blind spot one day when i discovered that I was able to use style Dark Mode in CSS Media Queries!
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.
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.
And then we specify what to override in Dark Mode.
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.
Tags
See also
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!
