'How to detect Night Mode event - CSS / JavaScript?

Is there any CSS prefix for night mode or javascript event that trigger when user change the mode? I want custom colors for the element if the user enables night mode from the browser setting.

Thanks

javascripthtmlcss


Solution 1:[1]

It’s almost 2020 and we have now css media query to detect night mode.

@media (prefers-color-scheme: dark){
  body {
    background-color: black;
    color: #ccc;
  }
}

Solution 2:[2]

There is a CSS filter, I'm not sure that Twitter used something like this (no images were inverted only text and background.

note1: you can lower index of invert filter, for ex: .8 note2: no IE support :( but Edge support it

$('button').on('click', function(){
  $('.wrap').toggleClass('day night') ;
});
.wrap{
  background: white;
}
.day{
  filter: invert(0);
}

.night{
  filter: invert(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="wrap day">
  <img src="https://placeimg.com/200/150/any" />

  <p>Lorem ipsus </p>
  <button>Day / night</button>
  
 </div>

Solution 3:[3]

Actually, today we can not only use @media (prefers-color-scheme: dark) in CSS like you've mentioned, but also check with js

const isDarkMode = window.matchMedia && 
    window.matchMedia('(prefers-color-scheme: dark)').matches

and listen to changes in it:

window.matchMedia('(prefers-color-scheme: dark)')
      .addEventListener('change', event => {
  if (event.matches) {
    //dark mode
  } else {
    //light mode
  }
})

(gratefully copy-pasted from this article, which may be not the original as the code is repeated in several others)

I'm not sure how to determine whether current browser will detect anything with these. I presume one should check if window.matchMedia('(prefers-color-scheme: dark)') is an object, but this is only my hypothesis, I haven't found any definitive info about this.

Solution 4:[4]

Because "night mode" will involve not only changing the background color, but also font colors (plus potentially a lot of other things) I would recommended a solution such as this:

Example HTML:

<body class="night">

Now, in standard mode the body tag wouldn't have the night class by default, but you would add this via a toggle class function such as jQuery's toggleClass.

Then in the CSS do something like...

CSS:

body {
    color: #000;
    background-color: #fff;
}

body.night {
    color: #fff;
    background-color: #000;    
}

NB: Example only, please don't use white text on a black background :)

Now when the class is toggled and the night class is added, all the colors will change and the page will be in "night" mode.

Unsure if you also want instructions on making this mode "stick" during page refresh/navigation; if so, that is probably best handled with a session or a cookie that expires on browser close.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Kresimir Pendic
Solution 3 YakovL
Solution 4 Brett

Related Questions