Switch between light and dark mode automatically

To make your site looks better, or to provide a comfortable reading experience at night, you may consider to use a dark theme. But have you think about how to make a normal light theme switch automatically between light and dark? That's our topic today.

September 15, 2020
JokerM

CSS Dark Mode

You are advised to define all variables at root element. Because it can make the whole works easier to do. Here’re the vars I set:

:root {
  --bg: #fff;
  --textColor: #004050; 
  --borderColor: rgba(0,0,0,.15); 
}

Simply consider :root as <html> element with high priority.

If you want to use your pre-defined var in the CSS, you can:

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

Thereafter, whenever you want to change your theme color, just simply edit the vars. All elements and pages that use these vars will be updated coordinately.

We have a light vars set now. The next is a dark vars set. You can choose your favorite colors used in dark theme (e.g. dark blue, dark gray, pure black, etc.). Here is an example:

:root {
  --bg: rgb(30,30,34);
  --textColor: rgb(150,150,154);
  --borderColor: #2C2C3A;
}

Dark Mode Trigger

Now we have both light and dark mode sets. What we left is making a trigger to switch between these modes automatically. To achieve this feature, we use a media query prefers-color-scheme method.

@media (prefers-color-scheme: dark) {
  :root {
    --bg: rgb(30,30,34);
    --textColor: rgb(150,150,154);
    --borderColor: #2C2C3A;
  }
}

Click here to learn more about prefers-color-scheme.

To see how the dark theme works, you may need a smartphone or PC which support dark mode. So far, we have successfully made our auto dark theme switcher.

Appendix · Determine Dark Mode by JS

If you need JS to determine whether the device is dark mode, you can make it like this:

if(window.matchMedia('(prefers-color-scheme: dark)').matches){
  //Dark Mode Code
}

matchMedia method returns a MediaQueryList object. The object contains matches and media properties and addListener and removeListener methods.

addListener receives a MediaQueryList type parameter. Adding a listener to prefers-color-scheme to detect when the device switched between light and dark mode.

let listeners={
  dark:(mediaQueryList )=>{
    if(mediaQueryList.matches){
      alert('Dark mode activated.')
    }
  },
  light:(mediaQueryList)=>{
    if(mediaQueryList.matches){
      alert('Light mode activated.')
    }
  }
}

window.matchMedia('(prefers-color-scheme: dark)').addListener(listeners.dark)
window.matchMedia('(prefers-color-scheme: light)').addListener(listeners.light)

I’m JokerM.

This post was written by xugaoyi, translated and edited by me.

To report a copyright issue or abuse, please contact [email protected]