What is a Dark Theme?
There are two main types of themes a website or application can have: a light or dark theme.
For example, a light theme could be black text on a white background, and a dark theme, white text on a black background. Most websites just have the one light theme by default, but more and more are adapting to have a dark theme as well.
Operating systems and browsers, like Chrome and Firefox, can allow you to choose themes and colours. Others allow you to override colours directly. Some sites and apps will detect your preferences and toggle their themes accordingly.
Why Would you Want One?
A dark theme can make a site easier to read. Some people who have vision difficulties might prefer a dark theme, or someone who browses the internet at night or during a migraine.
If someone is doing a manual override it might make your website look bad and some info might be lost. Images, text, buttons and inputs can be lost as well. However, if you make your own adjustments that utilise the browser/OS settings then you can have more control over what is shown.
How to Make One
1. Using Media queries
There is a new media query type which picks up on the mode so you can use it to switch out colours.
@media (prefers-color-scheme: [dark | light] ) {
@content;
}
Usage is pretty low at the moment, with it around 3-5%, but the major web browsers are starting to pick it up in newer versions.
It’s also relatively low effort to implement a basic test run setting your system preferences to dark mode, then using CSS variables.
``` /* Setting some theme colours */ :root { –background-color: pink; –text-color: black; }
/* Light mode */ @media (prefers-color-scheme: light) { :root { –background-color: white; –text-color: black; } }
/* Dark mode */ @media (prefers-color-scheme: dark) { :root { –background-color: black; –text-color: white; } }
body { color: var(–text-color); background-color: var(–background-color); } ```
After a quick test you can apply this out into a full colour scheme switch, even using it to switch out background images from light to dark theme versions.
The downside of the this approach is that will only work for really new versions of some browsers. Say you have your Macbook set up for dark theme. If you are looking at a website using the latest version of Chrome or Firefox, it will work well and will show the dark theme. But on an old version of your browser or something like Internet Explorer, the dark theme won’t work. It will just show you the default colour scheme. Currently it will work in around 1 in 4 browser versions. Earlier this year it was only around 4%, so it is increasing.
2. Manual Switch
Alternatively, if you want a more robust approach, you can add a light/dark theme toggle on your site for people to manually switch between the versions.
This would be using the same types of CSS variables as before, then using some JQuery attached to a switch allowing the user to set which theme they want manually. There are some in depth tutorials on how to do this. The abridged code is also below:
CSS
``` /* Light mode */ [data-theme=”light”] { –background-color: white; –text-color: black; }
/* Dark mode */ [data-theme=”dark”] { –background-color: black; –text-color: white; }
body { color: var(–text-color); background-color: var(–background-color); } ```
HTML
<input type="checkbox" id="themeSwitch">
<label for="themeSwitch">Dark Mode</label>
jQuery
$("#themeSwitch").on("change", function(event){
if ( $(this).prop("checked") {
$('body").attr("data-theme", "dark")
} else {
$("body").attr("data-theme", "light")
}
});
Is it Worth It?
I think it is well worth it and would recommend you start adding this to your sites and applications as early as possible. It’s relatively simple to set up and is quickly becoming standard practice. It’s a really great addition to any website or application that your users will appreciate, and will help increase the accessibility of your site.
