Show HN: HN dark mode in 2 lines of code

31 pointsby zikero4 lata temu10 comments

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

EdSchouten4 lata temu

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.

romdev4 lata temu

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

xvello4 lata temu

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.

xvello4 lata temu

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

bArray4 lata temu

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

cauefcr4 lata temu

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';

})();

DedlySnek4 lata temu

I use the Hacker News Dark[0] userscript with Tapermonkey

[0] https://userstyles.org/styles/113994

bergpb4 lata temu

Works great, thanks for sharing

eimrine4 lata temu

Not working for me, there is a big chunk of white surrounding around black part of page.

anon1154 lata temu

niceeee