Background & User story

Why are we doing this ticket?

• This ticket will be used to set up the feature flag for night mode on desktop. The feature flag will help us and other teams with testing the feature in a production environment

How does it connect to our overall plans? What goal does it link to?

• See task tree

What previous/central documentation exists?

• https://www.mediawiki.org/wiki/Reading/Web/Accessibility_for_reading

User Stories

As a WMF or community member, I would like the ability to test the current version of night mode so that it's easier for me to report and fix issues

Requirements

• Set up a feature flag with url parameter
• Enabling the feature flag will add the night mode option to the reading accessibility menu, as in T347309: Refine typography settings interface
  

<Note: this mock is outdated and only for reference>

• Selecting night mode will turn night mode on

Acceptance criteria

• All product and design requirements above must be complete
• Client preferences should appear in the order: Font size, color, width <Not done: T357707 is follow up ticket>
• The new option should be "Color" and the options "Day" and "Night"
• Can be enabled by feature flag ?vectodarkmode=1

Developer checklist

• When the feature flag is disabled, the class skin-darkmode-clientpref-0 is present on the HTML element in addition to (vector|minerva)-feature-night-mode-disabled
• When the feature flag is enabled, but the user has opted out of night mode, the class skin-darkmode-clientpref-0 should be present on the HTML element.
• When the feature flag is enabled, but the user has opted into night mode, the class skin-darkmode-clientpref-1 should be present on the HTML element.
• When the feature flag is enabled, and the user has opted into "automatic" mode, the class skin-darkmode-clientpref-2 should be present on the HTML element.
• The feature flag should be associated with a user preference

QA steps

• When the feature flag is disabled the item should NOT show up in the menu and there should be no change in appearance regardless of whether you have enabled night mode at the operating system level.

Note: Since the feature flag is disabled, QA for steps other than the first are blocked on T356074 and requires coordinating a test environment with a developer

• The default is light mode for anonymous users
• The default is light mode for logged in users
• When the feature flag is enabled a night mode option should show up in the accessibility menu (under the goggles)
• When night mode is selected, certain parts of the UI should reflect a darker color theme. Note: not all UI is expected to be in night mode at this point so look for any indication that a night mode has been enabled.
• When auto mode is selected, night mode is enabled when configured at the operating system level.
• When light mode is selected, I should get the default experience.
• The controls work for anonymous users and logged in users
• Changing the user preference should only impact the Vector skin. It should not impact the equivalent setting on the mobile skin.

Signoff criteria

QA Results - Beta

QA Results - Prod