32 ms·

Help me add dark mode in Hacker News natively

25 points by mohsen1 5y ago

riidom 5y ago
I'm a fan of dark mode but didn't believe it would happen anytime, tbh. I made my own setup with a mix of dark reader and stylus extensions. That's how it looks like on my side, if you wanna take some inspiration: https://i.imgur.com/Xrth0xx.png https://i.imgur.com/Xrth0xx.png Honestly, your approach as seen on github, is too dark and contrastful for my taste. /2c
- msoad 5y ago
  I like your theme! Mind sharing the CSS values?
  - riidom 5y ago
    Sure! For darkreader, it is brightness 89%, contrast 105%, scheme dark, mode dynamic, sepia 16%, background #181a1b, text #e8e6e3. For stylus, the CSS is https://gist.github.com/riidom/c07d6f5e9d77cbe01cdc9004e275fd9c https://gist.github.com/riidom/c07d6f5e9d77cbe01cdc9004e275f...
TowerTall 5y ago
When someone dies they top orange bar will have a black line. How do you plan to support this as it will be hard to see when the bar is there or not. https://github.com/minimaxir/hacker-news-undocumented#thin-black-bar https://github.com/minimaxir/hacker-news-undocumented#thin-b...
cercatrova 5y ago
Why not just use DarkReader? This is how my HN looks: https://i.imgur.com/nM3hZI3.png https://i.imgur.com/nM3hZI3.png This way, people can customize their dark mode how they want to with a GUI rather than needing a whole new way to do it via CSS.
- frosted-flakes 5y ago
  Can't do that on mobile, where you need dark mode most.
  - AlexSW 5y ago
    Materialistic is a good mobile app for Hacker News which has a dark mode. No affiliation, I just greatly like using it (Android).
    - appel 5y ago
      FWIW: Harmonic is another good one for Android.
  - deleted 5y ago
    [deleted]
  - sprokolopolis 5y ago
    I don't know what your mobile OS is, but Dark Reader works just fine for me on Firefox Nightly for Android. Mozilla is still in the process of adding all of the web extension APIs to mobile Firefox, so you need to go through a few steps to set it up, detailed here: https://blog.mozilla.org/addons/2020/09/29/expanded-extension-support-in-firefox-for-android-nightly/ https://blog.mozilla.org/addons/2020/09/29/expanded-extensio...
    - saladuh 5y ago
      Dark Reader just shows up in the addons section for me in fdroid Fennec, and Firefox mobile. I don't think you need to do anything special to get it to work.
      - sprokolopolis 5y ago
        Oh, thanks for letting me know. I have been using that little trick since they had first released that feature for unsupported addons and there were very few available then. That is good to know it is available in the supported list.
Tran69 5y ago
[dead]
gabrielsroka 5y ago
On Chrome or Brave for Android, I use: chrome://flags/#darken-websites-checkbox-in-themes-setting

25 points by mohsen1 5y ago

I'm a fan of dark mode but didn't believe it would happen anytime, tbh. I made my own setup with a mix of dark reader and stylus extensions. That's how it looks like on my side, if you wanna take some inspiration: https://i.imgur.com/Xrth0xx.png https://i.imgur.com/Xrth0xx.png Honestly, your approach as seen on github, is too dark and contrastful for my taste. /2c

msoad 5y ago
I like your theme! Mind sharing the CSS values?
- riidom 5y ago
  Sure! For darkreader, it is brightness 89%, contrast 105%, scheme dark, mode dynamic, sepia 16%, background #181a1b, text #e8e6e3. For stylus, the CSS is https://gist.github.com/riidom/c07d6f5e9d77cbe01cdc9004e275fd9c https://gist.github.com/riidom/c07d6f5e9d77cbe01cdc9004e275f...

TowerTall 5y ago

When someone dies they top orange bar will have a black line. How do you plan to support this as it will be hard to see when the bar is there or not. https://github.com/minimaxir/hacker-news-undocumented#thin-black-bar https://github.com/minimaxir/hacker-news-undocumented#thin-b...

cercatrova 5y ago

Why not just use DarkReader? This is how my HN looks: https://i.imgur.com/nM3hZI3.png https://i.imgur.com/nM3hZI3.png This way, people can customize their dark mode how they want to with a GUI rather than needing a whole new way to do it via CSS.

frosted-flakes 5y ago
Can't do that on mobile, where you need dark mode most.
- AlexSW 5y ago
  Materialistic is a good mobile app for Hacker News which has a dark mode. No affiliation, I just greatly like using it (Android).
  - appel 5y ago
    FWIW: Harmonic is another good one for Android.
- deleted 5y ago
  [deleted]
- sprokolopolis 5y ago
  I don't know what your mobile OS is, but Dark Reader works just fine for me on Firefox Nightly for Android. Mozilla is still in the process of adding all of the web extension APIs to mobile Firefox, so you need to go through a few steps to set it up, detailed here: https://blog.mozilla.org/addons/2020/09/29/expanded-extension-support-in-firefox-for-android-nightly/ https://blog.mozilla.org/addons/2020/09/29/expanded-extensio...
  - saladuh 5y ago
    Dark Reader just shows up in the addons section for me in fdroid Fennec, and Firefox mobile. I don't think you need to do anything special to get it to work.
    - sprokolopolis 5y ago
      Oh, thanks for letting me know. I have been using that little trick since they had first released that feature for unsupported addons and there were very few available then. That is good to know it is available in the supported list.

Tran69 5y ago

[dead]

gabrielsroka 5y ago

On Chrome or Brave for Android, I use: chrome://flags/#darken-websites-checkbox-in-themes-setting