Super Simple Ways to Add Dark Mode to Your Website

Dark Mode is a table sakes these days for any website. While proper dark mode requires a lot of work we can quickly achive dark mode with these two simple yet effective solutions.

Option 1 : Invert

This just inverts all the colors. It just converts one color to another irrespective of whether it is image or video or text. Like

black becomes white
light gray becomes dark gray
white becomes black

This solution is similar to the invert mode that exists in your OS like Mac

Light mode(left) Invert(center) Dark(right)

This is a < 10 line solution. The below CSS converts all elements to dark equivalant.

@media (prefers-color-scheme: dark) {
  body { 
    filter: invert(1) hue-rotate(180deg); 
  }
} 

But this has a problem like in the middele image above, the images and video are also inverted. Lets fix them

@media (prefers-color-scheme: dark) {
  body { 
    filter: invert(1) hue-rotate(180deg); 
  }

  img, video {
    filter: invert(1) hue-rotate(-180deg);
  }
}

Lets dig deep into this

Prefers-color-scheme : This media query that informs the website the user prefers dark mode. The users needs to set his preference either via the OS dark mode/ theme preference or via the browser settings.

Invert(1) : This converts all the color from light to dark. You can specify values from 0 to 100% or 0 to 1.

Hue-rotate(180deg) : This retains some of the colors in its original form. Thus in most cases only black/grey is converted to white(i know i am simplifying this)

We invert everything except video and image (and more based on your site)

We can improve this a bit more.

@media (prefers-color-scheme: dark) {
  body { 
    filter: invert(1) hue-rotate(180deg); 
  }

  img, video {
    filter: invert(1) hue-rotate(-180deg);
  }
}

@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
  body { 
    filter: invert(1); 
  }

  img, video {
    filter: invert(1);
  }
}

for people who prefer contrast lets not bother about retaining original color.

This is how the 3 modes looks on Google. In the contrast mode the blue becomes orange and links below are more readable(still not 100% but better).

As long as you have good contrast in light mode things will look good on dark mode too. What if all icons in your site are images then lets filter them

img:not(.icon) {
    filter: invert(1);
  }

It takes less than 1hr to convert your site to support dark mode. Now spend the next few hours testing your site to find any issues.

Option 2 : Theme vis CSS Variable

This approach requires considerable effort but it may be worth it. Here we replace all our colors with css variable like below

body { 
  --primary-text-color: black; 
} 

@media (prefers-color-scheme: dark) {
  body { 
    --primary-text-color: white; 
  } 
}
 
main { 
  color: var(--primary-text-color); 
} 

What if you use SASS. Then use SASS variables to fill these css variables.

$darkTextColor: white;
$lightTextColor: black;

@media (prefers-color-scheme: light) {
  body { 
    --primary-text-color: $lightTextColor;
  } 
}

@media (prefers-color-scheme: dark) {
  body { 
    --primary-text-color: $darkTextColor;  
  } 
}
 
main { 
  color: var(--primary-text-color);
}

This allows you to have myriads of themes. Tomorrow if you add themes in your site you can just change the variable and your site works perfectly.

An easier way to theme with css variable

Both the approaches have a few gotchas

1. The don't permeate to iframes. You need to do the same inside every iframe.
2. Make sure your images are transparent and dont have white borders etc. They wont look good on dark mode.
3. If your users wants dark mode for everything except your site or vice versa then there is no easy way for them to achieve this.
4. Browser support for these media queries is north of 95% but not 100%.

Want us to write more

Hit claps if you liked it. It will encourage us to write more. Follow, for more posts. Comment below if you have any other suggestions or inputs. And now you are on the dark side of things.