CODEWITHSUNDEEP
javascripthtmlcss
Ismail Farooq
Ismail Farooq

Reputation: 6807

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

Upvotes: 4

Views: 1723

Answers (4)

YakovL
YakovL

Reputation: 8316

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.

Upvotes: 0

Ismail Farooq
Ismail Farooq

Reputation: 6807

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;
  }
}

Upvotes: 5

Kresimir Pendic
Kresimir Pendic

Reputation: 3614

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>

Upvotes: 0

Brett
Brett

Reputation: 20049

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.

Upvotes: -1

Related Questions