A lot of websites these days are providing users with option of Dark Mode. This is getting increasingly popular. But it could sometimes be a challenge for the devs at least for the existing applications which were not designed considering dark mode in mind.

So following are the ways the devs are implementing dark mode in their websites -

1. Use a framework that supports dark mode

many UI frameworks support dark mode or themes natively. Ex- Vuetify

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    dark: true,
  },
})

To toggle -

// make a switch
<v-switch
        v-model="$vuetify.theme.dark"
        hide-details
        inset
        label="Theme Dark"
      ></v-switch>

Damn simple! Vuetify internally makes use of many variables - primary, secondary, success, background etc. Which is customisable as well. Similarly, many other frameworks have native support for Dark mode and themes. So, if you are starting with a new project - choose a framework which supports dark mode.

2. CSS variables

Using css variables are another way people implement dark mode, but this should only be done if the above two methods are not an option. This will require changing the css code in multiple places.

Start with defining css vars for both light and dark modes

:root {
    --primary-color: #302AE6;
    --secondary-color: #536390;
    --font-color: #424242;
    --bg-color: #fff;
    --heading-color: #292922;
}

[data-theme="dark"] {
    --primary-color: #9A97F3;
    --secondary-color: #818cab;
    --font-color: #e1e1ff;
    --bg-color: #161625;
    --heading-color: #818cab;
}

Make use of the css vars in the css style

body {
    background-color: var(--bg-color);
    color: var(--font-color);
}

h1 {
    color: var(--secondary-color);
}

a {
    color: var(--primary-color);
}

Add js code to change the data-theme

function setDarkTheme(){
    document.documentElement.setAttribute('data-theme', 'dark');
}

function setLightTheme(){
    document.documentElement.setAttribute('data-theme', 'light');
}

3. Invert the page's color using css

This is considered a bad way to implement the dark mode, but still exists as an option for people who have simple websites.

// css style
body {
    filter: invert(100%);
}
// undo inversion on images
img {
    filter: invert(100%);
}

This works well in text only websites which make use of a simple color scheme.

4. Replace css classes using js code

In this case we will need to define two classes for each element we want to change the mode for -

p.light {
    background: #fff;
    color: #000;
}

p.dark{
    background: #000;
    color: #fff;
}

We will then need to put the class in the respective html tags

<p class="light">Some text</p>

Next we will need to add js code to replace the classes (light->dark or dark -> light)

function setDarkMode() {
  var x = [...document.getElementsByClassName("light")];
  x.forEach(function (el,index){
      el.classList.add("dark");
    el.classList.remove("light");
  })
}

function setLightMode() {
  var x = [...document.getElementsByClassName("dark")];
  x.forEach(function (el,index){
      el.classList.add("light");
    el.classList.remove("dark");
  })
}