search

nolanlawson / pinafore

Alternative web client for Mastodon (UNMAINTAINED)
https://pinafore.social
GNU Affero General Public License v3.0
1.02k stars 174 forks source link

Automatic dark mode switching #2141

Open nolanlawson opened 2 years ago

nolanlawson commented 2 years ago

Some OSes may switch dark mode based on the time of day. Users with those OSes may want to have a light theme during the day but a dark theme at night. Currently Pinafore uses the prefers-color-scheme CSS to set the initial theme, but after that it's locked.

A simple fix may be to let the theme fluctuate if you never set it, although unfortunately this means that as soon as you set a theme, it would be locked. A more complex option would be to allow users to choose both a light and dark theme.

chriscoyier commented 1 year ago

Curious about themes in general. Say one wanted to make a theme for Pinafore, beyond just "dark" or "light". Out of scope?

nolanlawson commented 1 year ago

Historically we've only had dark and light (hence the current bug). What did you have in mind?

chriscoyier commented 1 year ago

My whole thinking was just that social media, ideally to me anyway, is fun. And themes can bring the fun.

Screenshot 2022-11-12 at 11 34 51 AM Screenshot 2022-11-12 at 11 36 15 AM

This could be wildly out of scope here, so nbd. People can apply custom CSS to their own Mastodon instances. It's just Pinafore is so much simpler and faster it seems like a better theming target.

nolanlawson commented 1 year ago

In the past I was pretty lax about accepting any new themes people wanted to contribute. But we did reach a point where there were so many, that I started getting worried about bogging down the interface with options.

I'd say if you want to experiment with themes, take a look at Theming.md and try it out. :slightly_smiling_face: If it doesn't fit into "dark" or "light," maybe we should add a third category? Or worst case scenario, you can self-host Pinafore and make it your default theme.

nolanlawson commented 1 year ago

Some thoughts on how automatic dark mode might be implemented:

  1. By default, it automatically switches between Royal (light) and Ozark (dark).
  2. There is an option, checked by default, called "Automatically switch between light and dark mode"
  3. When this option is checked, the "dark" and "light" radio groups become two groups instead of one
  4. We modify instanceThemes to not be a simple key-value of instance to theme but instead a key-value of instance to array of themes (or object with dark/light keys). For backwards compat we will have to support both formats
  5. When disabling the option, you get whichever theme is your current prefers-color-scheme mode.

Another option is to not have an explicit option, but instead to just do it automatically. That's reasonable, but I wonder if it would confuse people who aren't on an OS that automatically switches from light to dark mode. (AFAIK only Android does this?) I.e. they would be confused that they have to set two themes, one of which does nothing. (Although arguably it is already confusing, since changing the dark color would do nothing in the day time, and changing the light color would do nothing at night...)