Why Dark Mode

For users visiting your website in a dark room or at night, it is often less straining for the eyes if your webpage to be displayed in dark mode.

Comparison image of light theme on the left and dark theme on the right.

How to do it

From MDN Web Docs:

The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

For Non-Static-Site-Generator Websites

External Style Sheet

In your HTML document, you can either link an external CSS style sheet in your <head> if you wish to separate your code out more:

<!-- something resembling this -->
<!DOCTYPE html>
...
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
...
</body>
</html>

And in your styles.css:

@media (prefers-color-scheme: dark) {
  body {
    background-color: #111;
    color: #fdfdfd; /* colour of text */
  }
}

With the <style> HTML tag

You can also type out your CSS code in between <style> tags if you prefer everything to be contained in one HTML document:

<!-- something like this -->
<!DOCTYPE html>
...
<html>
<head>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #111;
            color: #fdfdfd; /* colour of text */
        }
    }
</style>
</head>
<body>
...
</body>
</html>

There also exists a video guide by Eric Murphy on Youtube on how to do this similarly if you prefer to follow along with a video or if you find reading this blog-style guide boring becuase Tiktok and Instagram Reels have fried your zoomer ADHD brain beyond repair.

For Static-Site-Generator Websites

It is a little bit less straightforward to do this with a static site generator like Jekyll (which has native support with Github Pages and is what this website uses) or Hugo as you have to override the theme’s CSS style sheet.

There is a blog post by Tom Kadwill on how to override your CSS styles in Jekyll you can follow to create your SCSS file and after which you should get something that resembles this:

---
---

@import "minima"; /* replace minima inside the quotes with your Jekyll theme */

And you should get something like this after adding the dark mode code.

---
---

@import "minima"; /* replace minima inside the quotes with your Jekyll theme */

@media (prefers-color-scheme: dark) {
  body {
    background-color: #111;
    color: #fdfdfd; /* colour of text */
  }
}

For other static-site-generator generated websites, you can refer to the official documentation found online for information on how to override your theme’s CSS.

Why Not Use a Toggleable Button Instead (Rant Warning)

Rather than defaulting to light or dark mode and having a separate button (that uses Javascript) for the user to manually switch to their preferred theme, it might be better to automatically default to what they already set their browser’s preferred theme to. This is so they do not get flashbanged by their monitors at night if your website defaults to light theme and they open their browser to your website for the first time, or without toggling it to dark mode the last time they visited, or just simply because your website does not store cookies about their previously toggled theme either due to your lack of know how, respect for user privacy, or plain laziness.

You can also include the button to toggle themes on the website alongside if you like having more buttons on your website for showing off your Javascript skills to potential employers (I know the tech job market out there is rough for fresh grads right now) or just want to follow the current web trend on including more and more unnecessary Javascript bloat on websites with features that can be done easily with simple HTML and CSS.

Configure Giscus Theme

To set it to match your website (if you have done the CSS @media trick shown above), simply set the <script>’s data-theme attribute value to "preferred_color_scheme" as shown below.

<script src="https://giscus.app/client.js"
        ...
        ...
        ...
        data-theme="preferred_color_scheme"
        ...
        crossorigin="anonymous"
        async>
</script>

Read more on adding Giscus comments to your website at my previous blog post about it.