GopherProxy

#[1]Kev Quirk » Feed [2]Kev Quirk » Comments Feed [3]alternate
[4]alternate

[5]Skip to content

[6]Kev Quirk|

[7]Menu

How To Add CSS Dark Mode To A Website

Posted on [8]03/02/202003/02/2020 by [9]Kev Quirk

A lot of people like to have the option of [10]having a dark mode for a
website. Maybe they prefer the look, or maybe they want to save their
eyes from strain. This post will show you how to implement an automatic
CSS dark mode that changes depending on your visitor’s theme.

CSS Dark Mode

On this site, I define variables to set the colours of my theme. I’d
suggest you do the same, as it will make this process a lot easier. My
standard variables are as follows:
:root {
--accent: #226997;
--main: #333;
--light: #666;
--lighter: #f3f3f3;
--border: #e6e6e6;
--bg: #ffffff;
}

If you want to use these variables throughout your stylesheet, you do
so like this:
p {
color: var(--main);
}

This way, if you ever want to change the colours of your theme, all you
need to do is amend the variable you defined and everything using that
variable will be updated.

Now we need to define a new set of variables that will be used when CSS
dark mode is invoked. For me, the additional variables look like this:
/* Define colours for dark mode */
:root {
--accent: #3493d1;
--main: #f3f3f3;
--light: #ececec;
--lighter: #666;
--border: #e6e6e6;
--bg: #333333;
}

Adding Dark Mode Support

We now have our two sets of variables defined. The only thing left to
do is add the prefers-color-scheme media query to our dark variables.

Take your dark colour variables and add the @media query below:
/* Define colours for dark mode */
@media (prefers-color-scheme: dark) {
:root {
--accent: #3493d1;
--main: #f3f3f3;
--light: #ececec;
--lighter: #666;
--border: #e6e6e6;
--bg: #333333;
}
}

That’s literally it! Your site will now automatically switch to dark
mode if someone is using a dark operating system theme and visits your
site.
My light theme My dark theme

Testing It Works

I’m sure you will want to test this change works. To do so, you can
simply enable a dark theme on your operating system, such as the iOS
dark theme.

Alternatively, if you don’t want to mess around with your OS themes,
you can force this test in Firefox. Here’s how:
1. Open Firefox and type about:config in the address bar and hit
enter.
2. You will be asked to accept the risk. Accept it.
3. In the search bar, search for ui.systemUsesDarkTheme.
4. Change the checkbox to number and click on the + symbol.
5. Change the value to 1 and click on the tick button.
6. The page should now turn dark.
7. Head back to your website and the theme should have automatically
updated to dark mode.
8. If you want to test it switches back, change the value to 0.
9. Once you have finished testing, click the trash can to delete the
option.

Conclusion

You should now have a website that is not only responsive in terms of
mobile interface, but also by theme too. I’m sure your late night
visitors, or those who just prefer a dark themed site, will thank you.

Posted in [11]Tech [12]Web Design

Want to leave a comment?

I have decided to remove the comments from this blog ([13]here's why).
If you want to give me some feedback on this post, please [14]contact
me.

« [15]Making A Website 06 – Finishing Touches

[16]The Case For WordPress »

All work licensed under unless otherwise stated.
[17]Disclaimer | [18]License Info | [19]Privacy | [20]Support Me

References

1. https://kevq.uk/feed/
2. https://kevq.uk/comments/feed/
3. https://kevq.uk/wp-json/oembed/1.0/embed?url=https://kevq.uk/how-to-add-css-dark-mode-to-a-website/
4. https://kevq.uk/wp-json/oembed/1.0/embed?url=https://kevq.uk/how-to-add-css-dark-mode-to-a-website/&format=xml
5. https://kevq.uk/how-to-add-css-dark-mode-to-a-website/#content
6. https://kevq.uk/
7. https://kevq.uk/menu/
8. https://kevq.uk/how-to-add-css-dark-mode-to-a-website/
9. https://kevq.uk/
10. https://kevq.uk/automatic-dark-mode/
11. https://kevq.uk/category/tech/
12. https://kevq.uk/category/web-design/
13. https://kevq.uk/removing-comments
14. https://kevq.uk/contact
15. https://kevq.uk/making-a-website-06-finishing-touches/
16. https://kevq.uk/the-case-for-wordpress/
17. https://kevq.uk/disclaimer
18. https://kevq.uk/license-information
19. https://kevq.uk/privacy
20. https://kevq.uk/buy-me-a-coffee