Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Show HN: HN dark mode in 2 lines of code
31 points by zikero on Sept 5, 2022 | hide | past | favorite | 10 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



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.


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


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.


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


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


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


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

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


Works great, thanks for sharing


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


niceeee




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: