Dark/Light theme or UI colour improvements

[tuurep]

Ideas:

1. Default light theme and using dark/light theme on system preference with https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
   • Take a look how I've implemented it here: https://github.com/tuurep/NoDistractions-fork/blob/master/src/blocked/Blocked.css
2. Customizing beyond the defaults
   • Custom CSS box in the settings?
   • There's an example of a very similar extension that has a custom CSS box in settings: https://addons.mozilla.org/en-US/firefox/addon/block-website/

However, CSS is already customizable through userContent.css, if you know how. Could that be enough and do we want to add any of the above?

[AsciiJakob]

Dark/Light theme is something that might be worth considering. Custom CSS is something that I don't think is suitable for this extension, though. This is due to the fact that it's not worth complicating the settings page (and codebase) over something few people will use. And just like you said, for the few users that do want that (such as the one and only you), it is always possible to use userContent.css.

There are three problems I can think of with light/dark theme:

1. Some people (such as myself) might have their system preference to light, but actually do prefer dark themes for many things. Of course this is kind of a non-issue since we could have a radio dial with the options: system preference, dark and light. But I still thought it was worth writing down
2. There isn't really a good way to preview themes in the settings page. With Discord, for instance, the theme change is immediately visible, but our users would have to change the setting and then click the popup and then go to the blocked page etc. It's a bit annoying and unintuitive. One way we could resolve this would be to make a settings open its own thing outside of the Firefox extension settings page, where we would have custom CSS to make it look like the blocked page. I think it's uncommon to do this though.
3. Most people don't care about how the blocked page looks, they just want it to not make their eyes bleed late at night or with too extreme colours.

In conclusion, and in regard to point 3, I think the best thing is to have just one theme that is the best of both worlds. One thing I am interested in, though, is doing some UI improvements, specifically related to how the colours on the blocked page can be improved.

Now that I am reflecting over this, I'm a little troubled over the fact that the ND popup is white, but the blocked page is darker and more colourful. I really like the way the popup works, but maybe that would be even better with some colours? But I also like how clean it looks when it's white. Something interesting here is that the whiteness from the popup probably doesn't blind people nearly as much at night as a full webpage would.

There are obviously some interesting ideas here, so I'm keeping the issue open