Responsive Design: Dark Mode
I live in dark mode, any site that I can switch the light off for, I do. It’s easier on my eyes, I tend to find it more aesthetically pleasing and I’m having a far more pleasant digital experience now that dark mode is so prevalent. I don’t know what my phone or popular websites look like in their default light mode anymore.
Responsive design is about how websites and apps respond to the devices they’re being viewed on and for a long time the focus has been on the proportions of the site in relation to the device. However developers, designers and general tinkerers are starting to think about how websites and apps can respond in a more holistic way. We’re thinking about how websites can adapt to device internet speeds, system preferences and accessibility needs. From a coding perspective, I’ve had dark mode on my never ending list of things to learn for a long time, so how lucky am I that the stars have aligned and I can delve into this for work and Samsung Internet’s month long series on responsive design? One of our lead engineers wrote about dark mode in the Samsung browser last year but I want to look at a more general overview of dark mode on the web.
All About the Contrast
Giving your site a dark theme isn’t as simple as inverting the colours, before you change your background black there are a few things to consider which all really come down to contrast. When choosing your fonts, colours, icons, and assets in general, you need to consider what the contrast between the asset and the background. The W3C Web Content Accessibility Guidelines define the appropriate contrast ratio between text and the background as 4.5:1, there is currently no contrast requirement for logos but you should definitely consider this in your design.
As we design and create web experiences, it’s important to consider the wellness and comfort of our users. As web creators, it’s not enough that something looks or feels good to us, in fact, how we feel about what we create doesn’t matter if the people we intend to use it can’t or don’t want to because it’s uncomfortable. In a dark context this means avoiding stark black and white, #ffffff text on a #000000 background ain’t it. These stark colours end up being too bright and can be uncomfortable for the eyes and lead to straining. Desaturation is where it’s at when it comes to choosing the right colours for your themes, off-whites and off-blacks and this isn’t just limited to whites and blacks, dark browns, greens, navys work well in dark themes too.
Achieving the look
There are a few ways to achieve dark mode on your website and the method you choose will entirely depend on your codebase e.g. the CSS option may fair well if you need something relatively quick to implement while respecting the operating system will be good if you intend your site to also work as a progressive web app. The best method would be to implement both of these for the most robust experience.
My next post will be a tutorial on how to implement dark mode on your own site but for now, let’s have a general look at the various ways to allow your users to set dark mode.
CSS & JS
This is the most straight forward option with a number of ways to implement it. The most best option, in my opinion, is to have a darktheme.css file which the user can toggle between using some javascript. Having a separate file allows your code to be easily findable and self-contained.
Operating system
Respecting the user’s operating system preferences is your best bet at guessing how they want to view your site. Thanks to the media-query prefers-color-scheme you can define your dark theme which will automatically be picked up depending on the operating system preferences. It’d look something like this:
@media (prefers-color-scheme: dark) {
/* YOUR DARK THEME RULES */
}Persisting the Changes
Ensuring the same user doesn’t have to toggle themes every time they visit your site, it’s best to have some way to persist the changes. How you do this will depend entirely on your setup but there are 3 options.
- LocalStorage: If you don’t have a server this is a good option. LocalStorage is the browser’s storage, it’s small but you can access it using JavaScript and can save non-sensitive information, like theme data, in there. The issue here is that because it’s JavaScript and JS is loaded after CSS, you may get a small visual glitch where the default theme (probably the light theme) flashes first before the chosen theme shows. Another issue is that if the user has JS turned off, you won’t be able to access their LocalStorage.
- Cookies: If you’re also running a server, you can bypass the issues that come with LocalStorage by using cookies instead. You can set a cookie on the server that stores the user’s preference which will persist until they delete their browser cookies. Personally, I don’t think this is a real problem but maybe theming is crucial to running your site, in which case, you may want to consider…
- The Database: this is the most “permanent” solution. It will persist regardless of the condition of the user’s browser and if they erase their cookies. Depending on your setup, you may not even need to run a full server and may be able to get away with using lambdas or server-less functions. But, if you’re considering this option, you probably do have a server. Storing in a database also allows the user’s settings to persist across browsers and devices unlike the previous two options, so if the user switches from viewing your site on their phone to their laptop the settings will persist. The issue here is for this to be a strong solution, you’d also have to collect user data that would tie a user to the settings and they’d have to “log in” in order for their settings to persist. So unless you’re already collecting user data to store in a database, this option is probably not for you.
Last Words
What we consider “responsive design” is evolving and we should welcome the evolution as it also means we’re being more accommodating of our users regardless of their needs and preferences. In my next post I’m going to be walking through implementing dark mode on my personal site.
