Allow setting custom CSS in popup

[dtinth]

First, thanks for the extension! Made my life much more convenient. As I’m a user who prefers dark color schemes and certain font, I want to customize the CSS for the popup. This PR implements that. :)

Screenshots

Options

Custom CSS page

Result

[ken107]

Thank you for this, it's very cool. However, most users won't require this feature, and I'm not sure about including it for general availability.

[ruffsl]

I use this plugin to relieve eye strain while reading & listening to online content. For the same reason, relieving my eye strain, I theme the majority of my desktop UI/browser using dark backgrounds to supporting high contrast and improve readability. Note I intentionally avoid the high-contrast mode from the OS, as it is too egregious in inverting the colors of all content on the display.

However, most users won't require this feature

I think you should reconsider, as many users who use this extension to hear content will overlap greatly with the those who are also visually impaired, and thus would benefit from having a UI with a dark high contrast option.

[dtinth]

How about making it so that “edit custom CSS” button is not as prominent? Maybe have an advanced checkbox/menu that brings you to custom CSS page...

[ken107]

If we make a theming feature, or even just a dark-theme option, it would be useful. But very few users would be able to write CSS directly.

[ruffsl]

But very few users would be able to write CSS directly.

Then perhaps the PR could be extended to include a drop-down menu for a number of preset themes, like dark, light, magenta, etc. Or you could add color picker tool for each ccs object. In any case, theming could also be used to change the highlighting of the current sentence, a color that's is a bit faint for me to see currently. Many users also suffer from color blindness, so allowing users to control ui color could help even when the presets still aren't optimal.

[candideu]

If we make a theming feature, or even just a dark-theme option, it would be useful. But very few users would be able to write CSS directly.

I think it would still be a good idea to make the option available for those who wish and who can do so. Those who can't are under no obligation to make changes, and those who wish have an easy way to do so.

[ruffsl]

Looks like browser support for prefered color scheme has improved since this ticket was opened:

• Improved dark mode default styling with the color-scheme CSS property and the corresponding meta tag
  • https://web.dev/color-scheme/
  • https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme#browser_compatibility
  • https://www.w3.org/TR/mediaqueries-5/#prefers-color-scheme

Perhaps @ken107 or @dtinth could take another look at this?