Last active
October 10, 2020 10:04
-
-
Save ashish-r/86f7e2144d6d1e21da438b6c30ddbec8 to your computer and use it in GitHub Desktop.
Enable Dark mode toggle feature on every website. Good for reading articles and blogs. Not suitable for websites with images or videos.
This file contains 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
// ==UserScript== | |
// @name Forced Dark Mode | |
// @namespace http://ashish.link/ | |
// @version 0.1.2 | |
// @description Enable Dark mode toggle feature on your favourite website. Good for reading articles and blogs. Not suitable for websites with images or videos. | |
// @author Ashish Ranjan | |
// @include * | |
// @grant none | |
// @license MIT | |
// @run-at document-start | |
// ==/UserScript== | |
(function() { | |
let isSet = window.localStorage.getItem('forcedDarkMode'); | |
const defaultCSS = document.documentElement.style.cssText; | |
function init() { | |
document.documentElement.style.cssText = | |
defaultCSS + | |
(isSet ? 'filter: invert(1) hue-rotate(180deg) !important; background-color: black !important;' : ''); | |
} | |
function toggle() { | |
isSet = !isSet; | |
init(); | |
window.localStorage.setItem('forcedDarkMode', isSet || ''); | |
} | |
window.addEventListener( | |
'load', | |
function() { | |
var btn = document.createElement('BUTTON'), | |
t = document.createTextNode('Toggle Dark Mode'); | |
btn.setAttribute( | |
'style', | |
'color: black;font-size:10px;position: fixed;bottom: 42px;right: -42px;transform: rotate(270deg);z-index: 100000;background: #80808021;cursor: pointer;font-weight: 100;margin: 0;padding: 2px;' | |
); | |
btn.appendChild(t); | |
document.body.appendChild(btn); | |
btn.onclick = toggle; | |
}, | |
false | |
); | |
init(); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment