Dark mode/theme

[tektaxi]

I think it would be cool to have a dark theme, seeing as it's all the rage these days. It could be especially helpful on mobile. This could potentially be a pretty massive CSS undertaking, so it's definitely not urgent, but something to think about.

[psvenk]

This is a good idea; you are actually not the first to propose this. We can also use the (relatively) new prefers-color-scheme standard to select dark or light mode automatically depending on the user's operating system setting (see iv-org/invidious#559 and iv-org/invidious#601).

[jadebuckwalter]

Great idea! I'll try to tackle this in the next week or so.

[tektaxi]

Nice! thanks @jadebuckwalter . My original idea for implementing this was to change the color assignments in the CSS to variables, and then use media queries to reassign the variables based on the preferred mode. That way we can easily change everything of a specific color really easily, and could potentially be more organized. Not sure if that's actually the best way but that's what came to my mind.

[psvenk]

This sounds like a very clean and modern way to implement dark mode. I looked up CSS variables on caniuse.com and was surprised to see that they are supported by all reasonably modern browsers (and Aspine doesn't support old browsers anyway), so this should not introduce any compatibility issues.

[tektaxi]

I was thinking we could have a dark mode toggle like in the top corner of Aspine, that way it's accessible and people will easily know that the feature is there. Especially if there are no other settings right now, we probably don't need a whole settings page at the moment. Is that a good idea?

[psvenk]

This would be a good idea, but I think we should still add dark mode as a setting under the Settings page to show that it is being stored using localStorage. (The first step for a dark mode, though, can be done purely in CSS - by using prefers-color-scheme to determine whether or not dark mode should be activated without having a setting.)

[jadebuckwalter]

That's what I was thinking too @tektaxi . We can always add the dark mode toggle to a settings page later, once we have more settings in place. It would also be ideal if users could save their settings, so they don't have to adjust them every time they open Aspine. Again, this may be more of a priority once we add more settings.

[psvenk]

Adding on to what @jadebuckwalter and @tektaxi have said, I think it would be good to begin with dark mode implemented completely in CSS using prefers-color-scheme, then to add an override option (with a UI element), then to save the override in localStorage, then to add this as a setting on the settings page (this last step would be done whenever we implement #23, at which point the settings page would be populated with other settings as well).