[Feature Request] Built In Dark Mode

[adithyabsk]

I've been using a modified version of a Hacker News dark mode user styles CSS modification to work with this extension. Though, if dark mode could be added to the extension itself I could ditch the user style.

https://gist.github.com/adithyabsk/33893e52cf3744663a4c18458a087068 The original CSS: https://userstyles.org/styles/184485/hacker-news-basic-dark

[Forbo]

I'm not sure I'm understanding what to do with the CSS that is generated in the extension, or the examples that you link to. Does this require another extension to be installed to apply the CSS? This extension popped up in a discussion today about HN's lack of dark mode, and this was one of the features that was espoused in the description of the add-on. Not seeing any way to apply an actual dark mode to HN, or to the extension's pop-out window.

[plibither8]

@adithyabsk, the extension popup offers a "Dark Mode" preset that generates dark-mode CSS styles in the "Custom CSS" text field. So technically, it already is built-in.

[plibither8]

@Forbo After the CSS is generated and filled in the "Custom CSS" text field, just close the extension popup and refresh Hacker News to see the new CSS in effect. :)

[adithyabsk]

@plibither8 oh interesting, I missed that option. For some reason it does not seem to work for me. I can click away from the popup but the preset Dark mode style seems to disappear. (i.e. when I referesh I see no change in site style)

[plibither8]

@adithyabsk Hmmm, that's weird. Could you check your devtools console to see if any errors were logged?

[Forbo]

I also click the "dark mode" link, click away, refresh, and nothing changes. I also tried closing Firefox and starting it up again, and doing ctrl+shift+r to do a complete refresh. Still no dark mode effect. I get the following message in the console:

Source map error: Error: NetworkError when attempting to fetch resource. Resource URL: moz-extension://554fa046-0d16-4e9d-a042-728ebf840c93/browser-polyfill.min.js Source Map URL: browser-polyfill.min.js.map

[plibither8]

@Forbo I suppose apart from this, the extension is working alright? @adithyabsk are you on FF too?

[adithyabsk]

@plibither8 no dice, I'm on Chrome.

[plibither8]

@Forbo I was able to reproduce this bug on Firefox. Will investigate it as soons as I get some time. Could you create a separate issue for this? Thanks! :)

[plibither8]

@adithyabsk that's... even weirder, seems like the options are not being saved to Chrome's sync storage. If you can, could you right-click the popup icon and inspect it for error logs?

[Forbo]

@Forbo I was able to reproduce this bug on Firefox. Will investigate it as soons as I get some time. Could you create a separate issue for this? Thanks! :)

Can do! The extension otherwise works flawlessly. I love the features you've added, it will make my browsing experience of HN much better! Thank you! I'll open the other issue in just a moment.

[adithyabsk]

@plibither8 Looks like Chrome is blocking some asset loads?

[plibither8]

@Forbo Awesome, I'm glad it helps otherwise :)

[plibither8]

@adithyabsk Hmm, that's not quite the issue - the console looks fine :/

This seems to be a hard bug to catch. Could you navigate to chrome://extensions and see if RHN logs errors in its background page?

[adithyabsk]

@plibither8 Gave that a go as well, still no luck

[plibither8]

I was just able to reproduce this - and with a fix! This is insanely stupid, but once you click "Dark Mode" and the text field gets filled, type something, literally anything, into the field and delete it. This should trigger the onChange event that updates the settings, and HN should turn dark on reload.

I think I know the root of the issue: changing the value of the textbox is not causing an onChange/onInput event to trigger, and subsequently it is not being saved.

Could you try this?

[plibither8]

@Forbo, if you could give this a shot too it would be great! Refer to my comment above.

[adithyabsk]

@plibither8 that works! Though, my only issue would be the load time of the app since the screen flickers white before the css theme loads in. That's a minor issue, though. Thanks for working with me to debug this!

[plibither8]

the screen flickers white before the css theme loads in

Ahh yes, that is definitely an issue. I'll need to find a way to supply the CSS at the earliest stages of page rendering. I'll look into that too.

Thanks for bringing this up, quite an annoying bug! I'll attempt to fix it soon. :)

[aheckler]

One possible change might be wrapping the default CSS in a media query to detect if someone's OS is in dark mode:

/* Preset: darkMode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black !important;
        filter: invert(90%) hue-rotate(180deg) !important;
    }
    .__rhn__profile-dropdown {
        background-color: #f6f6ef !important;
    }
}

Result being HN shown normally if the OS in in light mode, and your dark mode CSS being used if the OS is in dark mode.

[Forbo]

@Forbo, if you could give this a shot too it would be great! Refer to my comment above.

It looks like that worked for me, as well. Awesome, thank you!

[ofek]

Any update?

[plibither8]

@ofek Sorry for not being able to close this issue, haven't got much time these days to focus on opensource or my personal projects, admittedly.

What exact issue are you facing?

[ofek]

I was just wondering the status of https://github.com/plibither8/refined-hacker-news/issues/84#issuecomment-740898765

[plibither8]

@ofek @adithyabsk @Forbo I've just pushed a new update that fixes all the issues listed in this thread (including the flash of the unstyled page). Chrome takes a few days to review and publish the update on their webstore, but the item is available now on FF.

Cheers!

[ofek]

Thank you!!!