How do I add dark mode to my website

Step by step instructions to make 2 versions of the website to make it suitable for day and night use

Dark mode

Update: I now use media query level 5:prefers-color-scheme

ThisMedia Queries Level 5specificationContains a newprefers-color-schemeMedia function.

All major browsers currently support this feature. Chrome/Edge since version 76, Firefox and Safari since version 67 (since version 12.1). Even iOS Safari,

We can use it to determine whether the user is browsing the page in dark or light mode:

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

Now, I use it by default to display the light version of the site, and use the dark version if the system is in dark mode.

If the system does not have a built-in dark mode (old Windows/macOS, Linux), then my suggestion is to use an extension, such asNight eyeOr similar.

How did I implement dark mode beforeprefers-color-schemeAvailable

I recently redesigned my website. Here are 2 pictures for reference:

Old homepage

Old post page

I designed this website almost 1 year ago and made many changes in the process, just like we do for any website.

Eventually I grew up with this design: the title was too big, lost too much space instead of displaying the content directly, etc.

I sat down last night and started to redesign the website, and completed the redesign this morning:

New homepage

New post page

much better! The most important thing is that the content is more prominent.

I used a monospaced font (Inconsolata), because as a programming blog, it is a good blog, although the use of fonts leads to reduced readability and increased page size, because Imiss youThe font is on my website. I like it better, and since my website is an important part of my daily activities, I want it to be as I want it to be.

I just missed one thing:Dark mode. During the redesign, I thought of the dark mode option.

How did i do it? First, I added Moon Emoji Moon in the sidebar to make people change the mode from light to dark.

Then, I added a JavaScript snippet that runs when clicked. I just added it toonclickInline event handlers in HTML without fancy:

<p>
  <a href="#" onclick="localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark'); localStorage.getItem('mode') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')" title="Dark/light
</p>

This is the JavaScript running in onclick:

localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark'); localStorage.getItem('mode') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')

This is a bit puzzling, but basically I will checkmodePropertyLocal storageIs "dark" (if it has not been set, the default is dark, use||Operator), and then set the opposite value in the local storage device.

Then i assigndarkGo to classbodyHTML elements, so we can use CSS to style the page in dark mode.

After the DOM is loaded, another script runs immediately and checks whether the mode is dark. If so, it will adddarkGo to classbodyHTML elements:

document.addEventListener('DOMContentLoaded', (event) => {
  ((localStorage.getItem('mode') || 'dark') === 'dark') ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')
})

Now, if people change the mode, their choice will be remembered the next time the page loads.

Then I added a lot of CSS instructions to the CSS, and all the instructions start withbody.dark. Like these:

body.dark {
  background-color: rgb(30,34,39);
  color: #fff;
}
body.dark code[class*=language-],
body.dark table tbody>tr:nth-child(odd)>td,
body.dark table tbody>tr:nth-child(odd)>th {
  background: #282c34
}

Things should be normal now! This is my website in dark mode:

Dark homepage

Dark post page

I addeddarkGo to classbodyBy default, the element makes dark mode the default setting

<body class="dark">
  ...
</body>

why? First of all, I like it better. Then, I conducted a poll on Twitter and people liked it better.

Poll

But this is also for technical reasons, which is actually a very simple reason. I will not store user-selected content on the server side, so I cannot know the mode until local storage is available.

If the site is generated on the server side, then I can do this, but it is a static site, so I always provide the same page to everyone who requests it. Even if I have a cookie, there is nowhere to deal with it (on the other hand, this means my page loads faster).

Therefore, when someone navigates to another page on my website, or loads that page for the first time in a second visit, I don't want to display a bright page in the OK mode. Maybe the visitor was coding in the dark room in the middle of the night.

I would rather do this in light mode: display a dark page for a few milliseconds, then turn it white again.


More experimental tutorials:


Online technical encyclopedia!