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.

#1 CSS Dark Mode

You are advised to define all variables at root element. Because it can make the whole works more 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;
}

#2 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 #1 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[link], translated and edited by me.

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Share on facebook
Share on twitter
Share on telegram
Share on whatsapp
Share on email