Show HN: HN dark mode in 2 lines of code

31 points by zikero 3 years ago · 10 comments · 1 min read

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

EdSchouten 3 years ago

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.

romdev 3 years ago

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

xvello 3 years ago

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.

xvello 3 years ago
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
bArray 3 years ago
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

cauefcr 3 years ago

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

})();

DedlySnek 3 years ago

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

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

bergpb 3 years ago

Works great, thanks for sharing

eimrine 3 years ago

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

anon115 3 years ago

niceeee

Settings

Show HN: HN dark mode in 2 lines of code

Keyboard Shortcuts