Created
September 8, 2017 14:07
-
-
Save cferdinandi/28a8896007cd26d91c6b8a403f4180b3 to your computer and use it in GitHub Desktop.
A simple script for toggling night mode on/off on a website.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| }; |
@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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@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/