Extension settings unreadable using Firefox dark theme

[glenneroo]

As seen in screenshot:

To enable dark theme, menu > customize > theme (very bottom) > dark theme.

[plibither8]

Thanks for pointing this out, will look into it.

[plibither8]

Hi @glenneroo, @sjuxax. I was not able to reproduce this on my system, but I've pushed a style file (webext-base.css) that should fix this. Please do update!

[glenneroo]

Did you push the update to the Firefox plugin or do I have to manually install the css file somewhere?

I tried via Firefox update mechanism but it says there are no updates:

Or does it silently update when after restarting my browser?

[plibither8]

I pushed the update to Mozilla Add-ons, and Firefox should ideally silently update your extension. The latest version is 20.4.4, is that the one you have installed?

[glenneroo]

I'm on 20.4.4 and it's still unfortunately the same. Did you set your FireFox to dark theme? Otherwise I guess it's one of my many extensions.

[plibither8]

That's unfortunate :(

I still have not been able to reproduce this on my machine -- I'm using Firefox 74.0.1 on Linux Ubuntu 18.04. What's your system info?

[glenneroo]

Half the battle of fixing bugs is being able to reproduce them ;)

Firefox 74.0.1 on Windows 10.

Here's a list of my extensions:
Name Version
Amazon.com 1.1
Bing 1.1
Decentraleyes 2.0.14
DuckDuckGo 1.0
DuckDuckGo Privacy Essentials 2019.12.12
Enhancer for YouTube™ 2.0.101
Film scores for Netflix 0.9.1
Firefox Multi-Account Containers 6.2.3
Forest: stay focused, be present 3.11.0
Fraidycat 1.1.3
Free Download Manager 3.0.49
Google 1.0
Google Translator for Firefox 3.0.3.3
LastPass: Free Password Manager 4.45.0.5
Panel View for Google™ Translate 0.4.3
Privacy Badger 2020.2.19
Reddit Enhancement Suite 5.18.11
Refined Hacker News 20.4.4
Twitter 1.0
uBlock Origin 1.26.0
Unpaywall 3.91
Weather 4.3.252
Wikipedia (en) 1.0
Ratings Preview for YouTube™ 6.1.5

[sjuxax]

Not fixed here either on Firefox 75b12 or Firefox 76b1 on Win10, nor Firefox 75b12 on Ubuntu 18.10 (haven't tested 76b1). Backticks work though. 😉 🎉

If you don't beat me to it @plibither8, I'll try to debug sometime this week and see if I can see what's going on. I did check the extension debug view briefly and saw some path errors, but didn't do anything more than a superficial glance so they may be related to something else, like installing the temporary extension incorrectly. 😅

[plibither8]

Thanks for the details @glennero!

@sjuxax that would be great since I'm not able to reproduce on my machine. Hopefully you'll be able to work it out :D. Thanks!

[lookfirst]

Using Brave, I just noticed it... 20.4.4

[plibither8]

Hi @glenneroo, @sjuxax. I've merged #76 (thanks @lookfirst!) which should fix the issue. I've published the update on the marketplaces (v20.4.14) too.

[glenneroo]

Still unfortunately happening on my end with 20.4.14 and after restarting my browser.

[plibither8]

I'll try to debug this on my Win10 Firefox tonight when I get time. Thanks for pointing it out.

[lookfirst]

darn that it doesn't fix FF... .14 hasn't hit chromestore yet so i can't confirm it is fixed there...

[plibither8]

Chrome will take a week or two to update - they're review process takes time, especially during these days.

[lookfirst]

That's insane... =)

Is it possible to easily clone the repo and load it as a dev extension?

[plibither8]

I can send over the "dist/" directory zipped, and you can load it up on your machine. How's that?

[plibither8]

20.4.14.zip

You can unzip this and proceed! :)

[lookfirst]

Thanks! It is fixed in Chrome now. Silly me... loading the extension that way, removed my settings though. =( oh well!

[plibither8]

Ahh that's unfortunate :/
Thanks for reviewing it though! :)

[Forbo]

I'm also getting this in Firefox on Ubuntu. I'm using the "Default" Firefox theme with Gnome Tweaks' "Adwaita-dark" applications theme.

[glenneroo]

This issue is also related to a DarkReader firefox addon bug-report I just submitted: darkreader/darkreader#5512 (comment)

After disabling Refined-Hacker-News, I can once again read code blocks normally, which are otherwise white text on white background, the same as this plugin.

[ParkerM]

The settings become legible if you turn off the popup.css style sheet. Perhaps the issue is somewhere in there.

With popup.css enabled:

With popup.css disabled:

[ian-h-chamberlain]

Looking at the stylesheet https://github.com/plibither8/refined-hacker-news/blob/main/src/popup.styl#L6 it's not surprising that it becomes unreadable, since the colors look to be mostly hardcoded to a light background there.

Some potential options to fix might be:

• Update those colors to use var() like in the base style https://github.com/plibither8/refined-hacker-news/blob/main/src/webext-base.css#L67
• just force the foreground colors to be dark, so they are at least readable on the default light background
• @media (prefers-color-scheme: light) around all the hardcoded colors (use defaults or alternatives in dark mode)