elk-zone / elk

A nimble Mastodon web client
https://elk.zone
MIT License
5.4k stars 556 forks source link

Grayscale theme #1332

Closed ljrk0 closed 1 year ago

ljrk0 commented 1 year ago

Clear and concise description of the problem

Colorful UI interfaces may encourage interaction, leading to addiction-like behaviors.

Suggested solution

As part of Elk's digital wellbeing configurations, adding a greyscale-optimized theme could tone down the aforementioned effect.

Alternative

Alternatively, some systems such as iOS already support a device-wide greyscale mode. While this is definitely nice to reduce time spent on the phone in general, this filter may work against us by also decreasing contrast of certain UI elements. We track detection of this mode and automatically switching to the optimized theme in #1333 .

(Additionally, a system-wide greyscale theme is no replacement for a per-app setting. Especially on the desktop I need the colors for work but would like to have my social media client to be less distracting. Also, some systems don't have system-wide greyscale in general.)

Instead, this theme would need to take into account how to distinguish UI elements (and state) w/o color. From previous discussions:

I think we need to do a lot of work to rework our use of color and change active states to always include a shape difference (like line icons to fill icons).

... theme support that uses only gray colors but is intentional in that, so it may need to use a darker background to improve contrast, and maybe use full white for primary color so that the things we want to highlight from a functional POV are still visually different

Additional context

This was already touched upon in issue #1122 and the corresponding PR #1177.

Also note the now unmaintained client pinafore.social had the option to turn on a greyscale mode (theme) based in recommendations of humantech.com. This includes previous work on distinguishing UI elements and state by shape.

Also, if we can find design guidelines for building e-readers, they may prove helpful as well.

stackblitz[bot] commented 1 year ago

Solve in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

boehs commented 1 year ago

Do you think it's OK now that we have grayscale in settings? It's not full grayscale but it's something

boehs commented 1 year ago

Closing in favour of #1333