DEV Community

loading...

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

Shripathy πŸš€
21st century schizoid man
・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.

Discussion (5)

Collapse
ahferroin7 profile image
Austin S. Hemmelgarn

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).
Collapse
shripathy profile image
Shripathy πŸš€ Author • Edited

Thank you so much @ahferroin7 . This would help me a lot.

Collapse
atila profile image
Atila Fassina

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! πŸ˜…

Collapse
jappyjan profile image
jappyjan

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...

Collapse
shripathy profile image
Shripathy πŸš€ Author

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.