Skip to content

Instantly share code, notes, and snippets.

@cferdinandi

cferdinandi/toggleNightMode.js

Created September 8, 2017 14:07
Show Gist options
  • Save cferdinandi/28a8896007cd26d91c6b8a403f4180b3 to your computer and use it in GitHub Desktop.
Save cferdinandi/28a8896007cd26d91c6b8a403f4180b3 to your computer and use it in GitHub Desktop.
Download ZIP
A simple script for toggling night mode on/off on a website.
Raw
toggleNightMode.js
var toggleNightMode = function () {
var nightMode = document.querySelector('#night-mode-styles');
if (nightMode) {
nightMode.parentNode.removeChild(nightMode);
return;
}
var ref = window.document.getElementsByTagName('script')[0];
nightMode = document.createElement('style');
nightMode.id = 'night-mode-styles';
nightMode.innerHTML = 'body{filter:invert(1) hue-rotate(180deg);background:#000000;}iframe,img,video{filter:invert(1) hue-rotate(180deg);}img{opacity:0.7;}img:hover{opacity:1;}';
ref.parentNode.insertBefore(nightMode, ref);
};
@Orraye
Copy link

Orraye commented Dec 31, 2024

@Geodine this is for websites, not apps or operating systems, and was part of an article on night mode for website CSS. It's not the approach I'd recommend today. Instead, I'd direct folks here: https://gomakethings.com/how-to-create-a-dark-mode-theme-for-your-site-or-app/

I’m asking this specifically because of Brave's AI assistant told me that the version of NightMode that was made by you was formerly used as Brave's NightMode for the mobile iOS version. So I'd like to see if that is true or not to remove any mysticism from this.

@cferdinandi
Copy link
Author

Never trust AI, or Brave

https://gomakethings.com/rage-against-the-ai-machine/

https://gomakethings.com/i-follow-you-for-tech-not-politics/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment