Show HN: HN dark mode in 2 lines of code

#1

Post by zikero » Mon, Sep 05, 2022, 1:21 AM UTC

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

Re: Show HN: HN dark mode in 2 lines of code

#2

Post by cauefcr » Mon, Sep 05, 2022, 1:32 AM UTC

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

})();

Re: Show HN: HN dark mode in 2 lines of code

#3

Post by eimrine » Mon, Sep 05, 2022, 3:26 AM UTC

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

Re: Show HN: HN dark mode in 2 lines of code

#4

Post by DedlySnek » Mon, Sep 05, 2022, 8:17 AM UTC

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

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

Re: Show HN: HN dark mode in 2 lines of code

#5

Post by EdSchouten » Mon, Sep 05, 2022, 8:59 AM UTC

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.

Re: Show HN: HN dark mode in 2 lines of code

#6

Post by xvello » Mon, Sep 05, 2022, 12:54 PM UTC

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.

Re: Show HN: HN dark mode in 2 lines of code

#7

Post by bArray » Mon, Sep 05, 2022, 1:46 PM UTC

xvello wrote: post #6

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.

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

Re: Show HN: HN dark mode in 2 lines of code

#8

Post by romdev » Tue, Sep 06, 2022, 2:46 AM UTC

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

Re: Show HN: HN dark mode in 2 lines of code

#9

Post by anon115 » Wed, Sep 07, 2022, 4:12 AM UTC

niceeee

Re: Show HN: HN dark mode in 2 lines of code

#10

Post by bergpb » Wed, Sep 07, 2022, 8:21 PM UTC

DedlySnek wrote: post #4

I use the Hacker News Dark[0] userscript with Tapermonkey [0] https://userstyles.org/styles/113994

Works great, thanks for sharing