How hard is it add a dark mode to a website?

twitter logo github logo ・1 min read

I'm planning to work on a dark mode version of my web application and seeing that even big websites struggle to implement the dark mode on their website/apps, I'm curious on what's stopping them from doing it and what are the criteria that I should consider for the same.

twitter logo DISCUSS (5)
markdown guide
 

There are two potentially difficult parts:

  • Actually designing the color scheme. Getting something that looks good, provides good contrast, and still fits your branding is a serious pain in the arse. This DEV article might be of interest to you for this part of it:

  • Integrating that color scheme with your website. There are two major ways to go about this:

    • Use CSS custom properties for the colors throughout the stylesheet, default them to the default theme by setting them on :root, and then update the HTML element's style with the correct values for the selected theme. This is super efficient for users (they only have to fetch one style-sheet), easy to debug, and generally easy to code, but it takes some effort to get set up, making style updates atomic is a pain (you have to copy out the style property of the HTML element, update the copy, and then replace the original with the copy), and it's not universally portable.
    • Use SASS/LESS variables for the colors, and generate separate stylesheets for each theme. This makes theme switching dead simple (you just update the href attribute of the <link> that references your stylesheet) keeps your styles properly separated from your scripts, and works everywhere, but requires users to download potentially large amounts of data when they switch themes (you can work around this though by separating your colors from the rest of your styles and only updating that part of the styles when you switch themes).
 
 

Having a dark mode can be extremely simple to achieve, or super hard. It depends how you set your styles architecture. I believe the most straightforward way, with vanilla CSS, would be something like:

:root {
--light-text: #eee;
--light-background: #bbb;
--dark-text: #222;
--dark-background: #333;
}

body {
  color: var(--dark-text);
  background-color: var(--light-background);

  transition: all 300ms linear; /* 😉 */
}

body[data-theme="dark"] {
  color: var(--light-text);
  background-color: var(--dark-background);
}

Example in JSBin

As others have said, if you aren't using variables, you'll probably will want to do some refactoring first. Search/Replace is your friend! 😅

 

It's all about your CSS structure.

If you're using CSS by variables for all colours you're good to go. Just create some JavaScript with switches those variables depending on the current Dark or light mode.

If your using old school CSS with colors set by hand in every single declaration... Well... Have fun refactoring.

I guess option 2 is the main reason which stops larger applications from implementing a dark mode...

 

Hey @jappyjan thanks for the response unfortunately the option 2 is where my application is at. I'll make sure to upgrade my css quality too.

Classic DEV Post from Jan 3

Conversation with an Author - Ali Spittel

Malik and Dan sit down to talk shop with Ali Spittel

Shripathy 🚀 profile image
21st century schizoid man

Where the wild code grows

Sign up (for free)