This is one way to add a dark or light theme to your website. I use Micro.blog for my website, but this should be the same for basically any website hosting service or static website that one would use.
Caveat: while I work as a software engineer and have spent many years building web code, I don’t know everything so some of the nitty gritty details might be wrong, but the code will make your website gain the ability to display a light and dark mode.
Important note: I may say theme here, but what I really mean is this is how you can set your website to automatically change colors based on the device’s settings. In macOS this is called appearance (found in System Preferences -> General -> Appearance). In windows they call it colors (found in Settings -> Personalize -> Colors) and I have no idea what Linux distributions call it.
tl;dr (too long; didn’t read. take me to the code)
How to do the thing
Finally, how to do the thing.
This tutorial assumes you know a little bit about html and css or at the very least can use a search engine to find the relevant details if I miss something. I’ll do my best to cover it all and provide links.
Open either your website’s main html file or main css file.
Figure out what your background-color and color are in the css. If you haven’t set them that’s fine too. By default the background color of your website will be unset which will likely render as white or #fff in hex and your foreground color will likely be black or #000 in hex. (Hex colors are one way to define colors in css, but there are a group of named colors as well.)
Note: color refers to text or foreground color and background-color refers to…background color.
The below code snippet will leave your background as white and set your foreground color to gray. It will also set your font to the apple system font, but feel free to put whatever you want there. You’ll notice there are a bunch of fonts separated by commas. Those are fallbacks in case the first one isn’t present.
Assuming you’re starting with an un-styled light mode website, you’re going to put your colors from the above step in a chunk of code that will either live in your css file or in a <style></style> tag in your html.
Code
Starter light mode
@media (prefers-color-scheme: light) {
html {
color: #555;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
}
}
Next you’ll add a dark theme. You can choose whatever colors you want for background and foreground, but for simplicity I’ll stick with black (#000) for the background and white (#fff) for the foreground. Keep in mind that black background and white text is a bit intense to look at so feel free to mess with these colors. I’ve included the font-family attribute in both snippets, but you don’t need it in both or either unless you plan on setting a different font when in dark mode versus light mode.
There are likely other elements that you’ll want to include in your dark mode styles (like pre or code) that will look weird if you only have body styled, but I’ll leave that as an exercise for the reader.
Starter dark mode
@media (prefers-color-scheme: dark) {
html {
background-color: #000;
color: #fff;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
}
}
Ending thoughts
I wrote probably way more than I needed to for what amounts to less than 20 lines of css, but I wanted to give some background and context.
My inspiration for doing this to my website was browsing the web at night and being blinded by other’s websites. I wanted to be able to make my website not to searing and I made this post to hopefully share this information with others. At the end of the day you can take the two snippets and put them on your website and you’ll enable the ability to have two different themes for your site that follow what the operating system is rendering in terms of appearance.
You can also get much more creative and have a number of themes, but you’ll likely need some sort of javascript to enable something like that. Maybe I’ll write about that in the future. Who knows.
If you enjoyed this post, feel free to leave a comment or let me know on twitter @nickkacz or if you use micro.blog (I hope you do) send me a mention there. I’d love to hear about it or what I could do to help.
– Nick
My theme
And finally this is what my dark theme looks like:
@media (prefers-color-scheme: dark) {
html {
background-color: #000;
color: #b4b4b4;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
}
.site__name {
color: #b4b4b4;
}
pre {
background-color: #282828;
color: #b4b4b4;
}
}
And here is my light theme:
@media (prefers-color-scheme: light) {
html {
color: #555;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
}
}
Links
MDN prefers-color-scheme docs
MDN css color keywords docs
