Page MenuHomePhabricator

Minerva/Vector: Dark mode toggle needs to be tri state
Closed, ResolvedPublicFeature

Description

Feature summary:
Browsers report the user’s preferred color scheme (dark/light) via media query.

  • The behavior should be changed to allow for deriving the color scheme from that media query instead of choosing an option manually.
  • The UI should be changed to allow switching between three options: “automatic”, “light”, and “dark”. Options for the UX are e.g. the “Theme” dropdown on https://developer.mozilla.org/en-US/, three radio buttons, or a button cycling through the three options.
  • The default should be “automatic” to follow the system wide setting (available in Windows 11, macOS, and most Linux desktop environments).

Use case(s):

  • I have my system set up to sync color scheme with daylight. I want all websites with dark/light toggles to honor this automatic switch at sundown/sunrise.
  • People with sensitive eyes need dark mode. Following the system scheme by default prevents a flash of light hurting them.

Benefits:

  • Less clicking around and searching for UX for users who have set a preference globally.
  • Less pain for people relying on dark mode for health reasons.
  • Only way to support daylight dependent dark/light mode.

Event Timeline

Oh I like this idea @flying-sheep! This is an edge case I hadn't considered.

My initial assumption was that we would automatically switch between day/night colour schemes based on the browser settings, then if a user overrides the automatic setting we would maintain that manual setting until they change it manually again. Essentially, the design was to be "automatic" by default, but then turn off the automatic behaviour as soon as they change the setting one time, and the user would lose the ability to go back to an automatic setting once they switch it once. Your solution gives the option to go back to an automatic setting later after trying the modes manually, which is actually really nice.

@Jdlrobson @ovasileva how would this impact our scope/timelines? Since we are already following browser settings by default, my hope is that it wouldn't be too much effort to go back to that setting after changing it.

We're working on this right now so we can easily revise this.

That's wonderful news. Thanks again @flying-sheep for raising this!

Change 994817 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/DarkMode@master] Support automatic dark mode

https://gerrit.wikimedia.org/r/994817

Test wiki on Patch demo by Kizule using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/409b3fda12/w/

Change 994817 abandoned by Jdlrobson:

[mediawiki/extensions/DarkMode@master] Support automatic dark mode

Reason:

Unfortunately this patch needs a significant rebase and I don't have capacity right now to do this.

https://gerrit.wikimedia.org/r/994817

Change 994817 restored by Jdlrobson:

[mediawiki/extensions/DarkMode@master] Support automatic dark mode

https://gerrit.wikimedia.org/r/994817

Change 994817 abandoned by Jdlrobson:

[mediawiki/extensions/DarkMode@master] [WIP] Support automatic dark mode

Reason:

https://gerrit.wikimedia.org/r/994817

Since this task was repurposed for Vector 2022 and Minerva to avoid confusion I've created a new ticket for replicating the behaviour in Extension:DarkMode:T362923

Jdlrobson renamed this task from Dark mode toggle needs to be tri state to Minerva/Vector: Dark mode toggle needs to be tri state.Apr 18 2024, 6:31 PM
Jdlrobson closed this task as Resolved.