DEV Community


Discussion on: How hard is it add a dark mode to a website?

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).
shripathy profile image
Shripathy 🚀 Author • Edited

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