Background & User story

This ticket will contain all tasks related to setting night mode and turning it on and off

As a reader, I want the ability to control whether night mode is on or off, so that I can read with optimal light

Requirements

1. An option to turn night mode on or off will be available on the mobile site
2. Users will be prompted to choose from three options:
   • An option which switches the interface to day mode
   • An option which switches the interface to night mode
   • An option that allows the operating system to control color (usually will turn on night mode after sunset)
3. The default option will be the option which allows the operating system to control color
4. The night mode option will appear after the text preference and before the width preference
5. The night mode preference will not work on all pages. Certain pages may be excluded from night mode on a per-page basis.
6. For pages excluded from night mode, a notice will appear on the page informing the user that the page will not appear in night mode regardless of the setting choice

Requirements v2

1. Night Mode Toggle Accessibility: A toggle for night mode must be accessible from the main menu on the mobile site interface.
2. Night Mode Options: When accessing the night mode settings, users must be presented with three distinct options:
   • Day Mode: Switches the interface to a light theme optimized for daylight reading.
   • Night Mode: Switches the interface to a dark theme optimized for low-light reading.
   • Automatic (Based on Operating System Settings): The interface theme automatically switches between day and night modes based on the operating system's color scheme settings, typically after sunset for night mode and after sunrise for day mode.
3. Default Setting: The default night mode setting upon first use or after clearing the browser's cache will be set to "Automatic."
4. Menu Placement: In the settings menu, the option for night mode settings will be positioned immediately after the text size preference and before the column width preference option.
5. Limited Page Availability: Not all pages will support night mode due to content or design constraints.
6. Exclusion Notification: For pages where night mode is not supported, a clear and concise notice must be displayed, informing the user that night mode is unavailable for the current page despite the global setting.

BDD

Feature: Night Mode Toggle on Wikipedia Mobile Site
  As a reader
  I want the ability to control whether night mode is on or off
  So that I can read with optimal light

  Background:
    Given the user is on the Wikipedia mobile site

  Scenario: Accessing the night mode toggle from the main menu
    When the user opens the main menu
    Then the option to toggle night mode should be visible

  Scenario: Presenting night mode options to the user
    Given the user selects the night mode option from the main menu
    Then the user is presented with three options:
      | Day Mode      |
      | Night Mode    |
      | Automatic     |

  Scenario: Default night mode setting
    Given the user is using the site for the first time or has cleared the browser cache
    When the user accesses the night mode settings
    Then the default setting should be "Automatic"

  Scenario: Order of night mode option in settings menu
    When the user views the settings menu
    Then the night mode option appears after the text size preference and before the width preference

  Scenario: Handling pages that do not support night mode
    Given night mode is enabled
    When the user navigates to a page that does not support night mode
    Then the page does not display in night mode
     And a notice is shown explaining night mode is not available for this page

  Scenario: Retaining user's night mode preference across sessions
    Given the user has selected a night mode preference
    When the user closes and reopens the browser or app
    Then the previously selected night mode preference is retained

Test Cases

Test Case 1: Accessing the Night Mode Toggle from the Main Menu

Navigate to the Wikipedia mobile site on a mobile device or a browser set to mobile view.
Open the main menu by tapping the menu icon.
Look for the night mode toggle option.
Expected Result: The night mode toggle is visible and can be accessed from the main menu.

Test Case 2: Presenting Night Mode Options to the User

Access the night mode settings by selecting the night mode option from the main menu.
Check for the presence of the three options: Day Mode, Night Mode, and Automatic.
Expected Result: The user is presented with all three selectable options.

Test Case 3: Default Night Mode Setting

Clear the browser's cache or access the site for the first time on a new device.
Navigate to the night mode settings without altering any settings beforehand.
Observe the pre-selected night mode option.
Expected Result: The "Automatic" option is selected by default.

Test Case 4: Order of Night Mode Option in Settings Menu

Open the settings menu from the main menu.
Locate the text size preference, night mode option, and column width preference in the menu.
Confirm the order of these settings.
Expected Result: The night mode option is correctly positioned after the text size preference and before the column width preference.

Test Case 5: Handling Pages That Do Not Support Night Mode

Enable night mode from the settings menu.
Navigate to a known page that does not support night mode.
Check for the appearance of the page and any notice about night mode unavailability.
Expected Result: The page appears in day mode, and a clear notice is provided about the unavailability of night mode for this page.

Test Case 6: Retaining User's Night Mode Preference Across Sessions

Select a night mode preference in the settings menu.
Close the browser or app completely.
Reopen the browser or app and navigate to the settings menu to check the night mode setting.
Expected Result: The user's previously selected night mode preference is retained and still selected upon reopening the browser or app.

Acceptance criteria

• All product and design requirements are completed

Developer notes on technical requirements and targets

...

Signoff criteria

• Document in Asana updates
• Document completion in mediawiki

Open questions:

…
…
…