HN Explorer

Show HN: HN dark mode in 2 lines of code

31 points by zikero ↗ HN
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

10 comments

[ 2.7 ms ] story [ 37.6 ms ] thread
cauefcr
Nice, or as a tampermonkey user-script:

// ==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';
})();
eimrine
Not working for me, there is a big chunk of white surrounding around black part of page.
EdSchouten
Still unfortunate that HN doesn’t offer this as a builtin feature. So many people have already requested this during the last couple of years.
xvello
Great idea, using it now! You can also apply styles with uBlockOrigin, for example the equivalent uBO rule is:

    news.ycombinator.com##html:style(filter:invert(100%); background = #fff;)
Setting topcolor to 0099ff (blue) in the profile settings returns it to its glorious orange state after color inversion.
bArray
Thanks!

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;)
4. Click preview and create if happy
xvello
For future reference, we can recover the orange colors by adding a hue-rotate filter too. Here's my current rule:

    news.ycombinator.com##html:style(filter:invert(100%) hue-rotate(180deg))
    news.ycombinator.com##body:style(background: white)
Published it in https://news.ycombinator.com/item?id=32800642
romdev
This works on HN and most other sites:

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%); }'; })();