Skip to content

Instantly share code, notes, and snippets.

@ashish-r
Last active October 10, 2020 10:04
Show Gist options
  • Save ashish-r/86f7e2144d6d1e21da438b6c30ddbec8 to your computer and use it in GitHub Desktop.
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.
// ==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