Show HN: HN dark mode in 2 lines of code Paste this in the developer tools console of your browser document.documentElement.style.filter = "invert()" document.documentElement.style.background = '#fff' Edit: you can also create a bookmark with the code below in the URL field javascript: (() => { document.documentElement.style.filter = "invert()";document.documentElement.style.background = '#fff' })(); Then just click on the bookmark for instant dark mode |
javascript:(function() { var tag = document.createElement('style'); tag.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(tag); tag[ (typeof document.body.style.WebkitAppearance=='string') ? 'innerText' : 'innerHTML'] = '* { background-color: white !important; color: #444 !important; } html { filter: invert(100%) grayscale(100%); }'; })();
news.ycombinator.com##html:style(filter:invert(100%); background = #fff;)
news.ycombinator.com##html:style(filter:invert(100%) hue-rotate(180deg))
news.ycombinator.com##body:style(background: white)
Took me a moment to realize how to apply this (here for others benefit):
1. Right click > Block element
2. Click anywhere
3. Change the rule to:
##html:style(filter:invert(100%); background = #fff;)
// ==UserScript==
// @name HN dark mode
// @namespace http://tampermonkey.net/
// @version 0.1
// @description HN dark mode
// @author You
// @match https://news.ycombinator.com/\\*
// @icon https://www.google.com /s2/favicons?sz=64&domain=ycombinator.com
// @grant none
// ==/UserScript==
(function() {
'use strict';
document.documentElement.style.filter = "invert()";
document.documentElement.style.background = '#fff';