read-aloud icon indicating copy to clipboard operation
read-aloud copied to clipboard

Published 20 hours ago • verified publisher icon ken107

Allow setting custom CSS in popup

Open dtinth opened this issue 5 years ago • 7 comments

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

image

Custom CSS page

image

Result

image

dtinth avatar Aug 15 '19 10:08 dtinth

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.

ken107 avatar Sep 16 '19 00:09 ken107

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.

ruffsl avatar Oct 02 '19 07:10 ruffsl

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...

dtinth avatar Oct 02 '19 07:10 dtinth

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.

ken107 avatar Oct 02 '19 14:10 ken107

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.

ruffsl avatar Oct 02 '19 14:10 ruffsl

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.

candideu avatar Jun 15 '23 19:06 candideu

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?

ruffsl avatar Jun 19 '23 13:06 ruffsl