5 ms·

Show HN: HN dark mode in 2 lines of code

31 points by zikero 4y ago

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

cauefcr 4y ago
Nice, or as a tampermonkey user-script: // ==UserScript== // @name HN dark mode // @namespace http://tampermonkey.net/ http://tampermonkey.net/ // @version 0.1 // @description HN dark mode // @author You // @match https://news.ycombinator.com/\\ https://news.ycombinator.com/\\* // @icon https://www.google.com 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 4y ago
Not working for me, there is a big chunk of white surrounding around black part of page.
DedlySnek 4y ago
I use the Hacker News Dark[0] userscript with Tapermonkey [0] https://userstyles.org/styles/113994 https://userstyles.org/styles/113994
- bergpb 4y ago
  Works great, thanks for sharing
EdSchouten 4y 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.
xvello 4y 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.
- bArray 4y 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
- xvello 4y 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 https://news.ycombinator.com/item?id=32800642
romdev 4y 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%); }'; })();
anon115 4y ago
niceeee

31 points by zikero 4y ago

cauefcr 4y ago

Nice, or as a tampermonkey user-script: // ==UserScript== // @name HN dark mode // @namespace http://tampermonkey.net/ http://tampermonkey.net/ // @version 0.1 // @description HN dark mode // @author You // @match https://news.ycombinator.com/\\ https://news.ycombinator.com/\\* // @icon https://www.google.com 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 4y ago

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

DedlySnek 4y ago

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

bergpb 4y ago
Works great, thanks for sharing

EdSchouten 4y 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.

xvello 4y 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.

bArray 4y 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
xvello 4y 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 https://news.ycombinator.com/item?id=32800642

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

anon115 4y ago

niceeee