Page MenuHomePhabricator

Deploy dark mode to all logged in users on Vector 2022
Closed, ResolvedPublic

Description

NOTE: Deployment is currently scheduled for July 15th

Background

  • This ticket will track the deployment and any blockers of dark mode for logged-in users to the Vector22 skin

User story

  • As a readers, I want the ability to read in dark mode so that I can read easily in low-light settings

Requirements

  • The color section should be available on the appearance menu
  • The default color should be "light"
  • Selecting dark mode should change the page to appear in dark mode
  • If the page is not available in dark mode, users will not be able to switch to dark mode and a notice will be available
  • List of pages/features that appear/do not appear in dark mode is available here

Deploy 1

  • Jul 10 - logged-in users for tier 1 wikis
  • Jul 16 - all logged-in users

Requirement

Deploy dark mode to all logged-in users on Vector 2022, ensuring the color section is available in the appearance menu, defaulting to "light" mode. Users should be able to switch to dark mode, and if a page is not available in dark mode, a notice should be shown.

BDD

Feature: Deploy Dark Mode to All Logged-in Users on Vector 2022

  Scenario: Enable dark mode for logged-in users
    Given the user is logged in
    When the user accesses the appearance menu
    Then the color section should be available
    And the default color should be "light"
    When the user selects dark mode
    Then the page should change to appear in dark mode
    And if the page is not available in dark mode
    Then a notice should be shown

Test Steps

Test Case 1: Verify Dark Mode Deployment

  1. Log in as a user.
  2. Navigate to the appearance menu.
  3. AC1: Confirm that the color section is available.
  4. AC2: Confirm that the default color is "light".
  5. Select dark mode.
  6. AC3: Confirm that the page changes to appear in dark mode.
  7. Navigate to a page not available in dark mode.
  8. AC4: Confirm that a notice is shown indicating the page is not available in dark mode.

Design

  • Add mockups and design requirements

Acceptance criteria

  • All subtasks are complete
  • All requirements are complete
  • All Communication criteria is complete

Communication criteria - does this need an announcement or discussion?

  • Community is informed across wikis and any necessary questions and concerns are addressed

Rollback plan

  • What is the rollback plan in production for this task if something goes wrong?

This task was created by Version 1.0.0 of the Web team task template using phabulous

Event Timeline

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

[operations/mediawiki-config@master] [July 15th] Deploy dark mode to all logged-in users

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

ovasileva renamed this task from Deploy dark mode to all logged in users on Minerva and Vector 2022 to Deploy dark mode to all logged in users on Vector 2022.Jul 9 2024, 9:31 AM

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

[operations/mediawiki-config@master] [July 10th] Vector: enable dark mode for tier 1 wikis (logged in only)

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

Change #1053036 merged by jenkins-bot:

[operations/mediawiki-config@master] [July 10th] Vector: enable dark mode for tier 1 wikis (logged in only)

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

Mentioned in SAL (#wikimedia-operations) [2024-07-10T20:37:14Z] <jdrewniak@deploy1002> Started scap sync-world: Backport for [[gerrit:1053036|[July 10th] Vector: enable dark mode for tier 1 wikis (logged in only) (T368795)]], [[gerrit:1053358|Add beta tag & feedback link to Appearance menu (T367871)]]

Mentioned in SAL (#wikimedia-operations) [2024-07-10T21:06:21Z] <jdrewniak@deploy1002> jdrewniak, jdlrobson: Backport for [[gerrit:1053036|[July 10th] Vector: enable dark mode for tier 1 wikis (logged in only) (T368795)]], [[gerrit:1053358|Add beta tag & feedback link to Appearance menu (T367871)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2024-07-10T21:09:33Z] <jdrewniak@deploy1002> Started scap sync-world: Backport for [[gerrit:1053036|[July 10th] Vector: enable dark mode for tier 1 wikis (logged in only) (T368795)]], [[gerrit:1053358|Add beta tag & feedback link to Appearance menu (T367871)]]

Mentioned in SAL (#wikimedia-operations) [2024-07-10T21:17:48Z] <jdrewniak@deploy1002> jdlrobson, jdrewniak: Backport for [[gerrit:1053036|[July 10th] Vector: enable dark mode for tier 1 wikis (logged in only) (T368795)]], [[gerrit:1053358|Add beta tag & feedback link to Appearance menu (T367871)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2024-07-10T21:18:27Z] <jdrewniak@deploy1002> Started scap sync-world: Backport for [[gerrit:1053036|[July 10th] Vector: enable dark mode for tier 1 wikis (logged in only) (T368795)]], [[gerrit:1053358|Add beta tag & feedback link to Appearance menu (T367871)]]

Mentioned in SAL (#wikimedia-operations) [2024-07-10T21:23:03Z] <jdrewniak@deploy1002> jdlrobson, jdrewniak: Backport for [[gerrit:1053036|[July 10th] Vector: enable dark mode for tier 1 wikis (logged in only) (T368795)]], [[gerrit:1053358|Add beta tag & feedback link to Appearance menu (T367871)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2024-07-10T21:30:03Z] <jdrewniak@deploy1002> Finished scap: Backport for [[gerrit:1053036|[July 10th] Vector: enable dark mode for tier 1 wikis (logged in only) (T368795)]], [[gerrit:1053358|Add beta tag & feedback link to Appearance menu (T367871)]] (duration: 11m 35s)

This is now deployed to all logged in users on tier 1 wikis. After deployment we noticed a bug fix in wmf.12 didn't make it into wmf.13 (the report a link shows for gadget users), so we [[ https://en.wikipedia.org/w/index.php?title=MediaWiki%3AGadget-dark-mode-toggle-pagestyles.css&diff=1233786787&oldid=1187865768 | hot fixed this on enwik ]]i (And this can be undone after the deployment tomorrow)

Screenshot 2024-07-10 at 2.45.25 PM.png (223×237 px, 15 KB)

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

[mediawiki/skins/Vector@master] Dark mode should default to day theme

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

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

[operations/mediawiki-config@master] Vector theme should default to day

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

First deployment done, onto remaining Tier 2, 3 logged-in users on the 15th. Moving to next sprint

ovasileva subscribed.

Change #1050082 merged by jenkins-bot:

[operations/mediawiki-config@master] [July 15th] Deploy dark mode to all logged-in users

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

Mentioned in SAL (#wikimedia-operations) [2024-07-15T20:18:58Z] <catrope@deploy1002> Started scap sync-world: Backport for [[gerrit:1050082|[July 15th] Deploy dark mode to all logged-in users (T368795)]]

Mentioned in SAL (#wikimedia-operations) [2024-07-15T20:22:07Z] <catrope@deploy1002> jdlrobson, catrope: Backport for [[gerrit:1050082|[July 15th] Deploy dark mode to all logged-in users (T368795)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2024-07-15T20:29:24Z] <catrope@deploy1002> Finished scap: Backport for [[gerrit:1050082|[July 15th] Deploy dark mode to all logged-in users (T368795)]] (duration: 10m 26s)

Edtadros subscribed.

Test Result - Prod

Status: ✅ PASS
Environment: see table below
OS: macOS Sonoma
Browser: Chrome
Device: MBS
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Verify Dark Mode Deployment

  1. Log in as a user.
  2. Navigate to the appearance menu.
  3. AC1: Confirm that the color section is available. See table below
  4. AC2: Confirm that the default color is "light". See table below
  5. Select dark mode.
  6. AC3: Confirm that the page changes to appear in dark mode. See table below
  7. Navigate to a page not available in dark mode.
  8. AC4: Confirm that a notice is shown indicating the page is not available in dark mode. Note: I wasn't able to reliably confirm excluded pages
WikiAC1 AC2 - Default ThemeAC3 - Dark Mode ToggleScreen Capture
https://ga.wikipedia.org
recording_ga_wikipedia_org_pass.mov.gif (850×1 px, 887 KB)
https://kab.wikipedia.org
recording_kab_wikipedia_org_pass.mov.gif (850×1 px, 821 KB)
https://zh.wikipedia.org
recording_zh_wikipedia_org_pass.mov.gif (850×1 px, 1 MB)
https://fr.wikipedia.org
recording_fr_wikipedia_org_pass.mov.gif (850×1 px, 809 KB)
https://pa.wikipedia.org
recording_pa_wikipedia_org_pass.mov.gif (850×1 px, 698 KB)
https://hyw.wikipedia.org
recording_hyw_wikipedia_org_pass.mov.gif (850×1 px, 1 MB)
https://ja.wikipedia.org
recording_ja_wikipedia_org_pass.mov.gif (850×1 px, 767 KB)
https://sr.wikipedia.org
recording_sr_wikipedia_org_pass.mov.gif (850×1 px, 1 MB)
https://vec.wikipedia.org
recording_vec_wikipedia_org_pass.mov.gif (850×1 px, 1 MB)
https://ha.wikipedia.org
recording_ha_wikipedia_org_pass.mov.gif (850×1 px, 970 KB)
https://am.wikipedia.org
recording_am_wikipedia_org_pass.mov.gif (850×1 px, 799 KB)
https://bn.wikipedia.org
recording_bn_wikipedia_org_pass.mov.gif (850×1 px, 882 KB)
https://co.wikipedia.org
recording_co_wikipedia_org_pass.mov.gif (850×1 px, 1 MB)
https://dag.wikipedia.org
recording_dag_wikipedia_org_pass.mov.gif (850×1 px, 1 MB)
https://hsb.wikipedia.org
recording_hsb_wikipedia_org_pass.mov.gif (850×1 px, 971 KB)
https://ia.wikipedia.org
recording_ia_wikipedia_org_pass.mov.gif (850×1 px, 954 KB)
https://is.wikipedia.org
recording_is_wikipedia_org_pass.mov.gif (850×1 px, 939 KB)
https://kcg.wikipedia.org
recording_kcg_wikipedia_org_pass.mov.gif (850×1 px, 843 KB)
https://la.wikipedia.org
recording_la_wikipedia_org_pass.mov.gif (850×1 px, 1 MB)
https://mt.wikipedia.org
recording_mt_wikipedia_org_pass.mov.gif (850×1 px, 782 KB)
https://nl.wikipedia.org
recording_nl_wikipedia_org_pass.mov.gif (850×1 px, 883 KB)
https://nov.wikipedia.org
recording_nov_wikipedia_org_pass.mov.gif (850×1 px, 886 KB)
https://pt.wikipedia.org
recording_pt_wikipedia_org_pass.mov.gif (850×1 px, 908 KB)
https://sa.wikipedia.org
recording_sa_wikipedia_org_pass.mov.gif (850×1 px, 818 KB)
https://sd.wikipedia.org
recording_sd_wikipedia_org_pass.mov.gif (850×1 px, 941 KB)
https://smn.wikipedia.org
recording_smn_wikipedia_org_pass.mov.gif (850×1 px, 1 MB)
https://ami.wikipedia.org
recording_ami_wikipedia_org_pass.mov.gif (850×1 px, 923 KB)
https://bs.wikipedia.org
recording_bs_wikipedia_org_pass.mov.gif (850×1 px, 743 KB)
https://fa.wikipedia.org
recording_fa_wikipedia_org_pass.mov.gif (850×1 px, 912 KB)
https://ne.wikipedia.org
recording_ne_wikipedia_org_pass.mov.gif (850×1 px, 924 KB)
https://si.wikipedia.org
recording_si_wikipedia_org_pass.mov.gif (850×1 px, 897 KB)
https://so.wikipedia.org
recording_so_wikipedia_org_pass.mov.gif (850×1 px, 1 MB)
https://wuu.wikipedia.org
recording_wuu_wikipedia_org_pass.mov.gif (850×1 px, 995 KB)
https://zh-yue.wikipedia.org
recording_zh-yue_wikipedia_org_pass.mov.gif (850×1 px, 857 KB)
https://pl.wikipedia.org
recording_pl_wikipedia_org_pass.mov.gif (850×1 px, 749 KB)
https://tg.wikipedia.org
recording_tg_wikipedia_org_pass.mov.gif (850×1 px, 1 MB)
https://ko.wikipedia.org
recording_ko_wikipedia_org_pass.mov.gif (850×1 px, 929 KB)
https://ban.wikipedia.org
recording_ban_wikipedia_org_pass.mov.gif (850×1 px, 847 KB)
https://bjn.wikipedia.org
recording_bjn_wikipedia_org_pass.mov.gif (850×1 px, 1 MB)
https://tum.wikipedia.org
recording_tum_wikipedia_org_pass.mov.gif (850×1 px, 1 MB)
https://no.wikipedia.org
recording_no_wikipedia_org_pass.mov.gif (850×1 px, 868 KB)
https://eu.wikipedia.org
recording_eu_wikipedia_org_pass.mov.gif (850×1 px, 855 KB)
https://ar.wikipedia.org
recording_ar_wikipedia_org_pass.mov.gif (850×1 px, 1 MB)
https://hak.wikipedia.org
recording_hak_wikipedia_org_pass.mov.gif (850×1 px, 755 KB)
https://nv.wikipedia.org
recording_nv_wikipedia_org_pass.mov.gif (850×1 px, 915 KB)
https://mnw.wikipedia.org
recording_mnw_wikipedia_org_pass.mov.gif (850×1 px, 1 MB)
https://ky.wikipedia.org
recording_ky_wikipedia_org_pass.mov.gif (850×1 px, 838 KB)
https://kn.wikipedia.org
recording_kn_wikipedia_org_pass.mov.gif (850×1 px, 992 KB)
https://gn.wikipedia.org
recording_gn_wikipedia_org_pass.mov.gif (850×1 px, 922 KB)
https://fy.wikipedia.org
recording_fy_wikipedia_org_pass.mov.gif (850×1 px, 896 KB)
https://bcl.wikipedia.org
recording_bcl_wikipedia_org_pass.mov.gif (850×1 px, 1 MB)
https://azb.wikipedia.org
recording_azb_wikipedia_org_pass.mov.gif (850×1 px, 810 KB)
https://ca.wikipedia.org
recording_ca_wikipedia_org_pass.mov.gif (850×1 px, 1 MB)
https://es.wikipedia.org
recording_es_wikipedia_org_pass.mov.gif (850×1 px, 893 KB)
ovasileva claimed this task.