NOTE: In the current state various users reported the site being unusable - these users were not aware they were using the gadget and didn't know how to disable it (or how to switch from automatic to light mode). In response to this, English Wikipedia was hot-fixed with https://en.wikipedia.org/w/index.php?title=MediaWiki%3AGadget-dark-mode-toggle.js&diff=1224049699&oldid=1187865629 . It's recommended that you copy across this change to their own local version of the gadget until this is addressed until this task is fixed. Note, on enwiki this was later reverted 20th May which will likely lead to more support requests.
Background
The dark mode gadget is conflicting with the new desktop dark mode. We encountered a similar issue with page previews.
User story
As a user who is using the dark mode gadget and happy with my dark mode experience, it should be possible to continue to use the gadget without conflicts with Vector's dark mode.
Requirement
Ensure that the color options in the appearance menu are disabled if the dark mode gadget is detected.
BDD
Feature: Color Options Disabled with Dark Mode Gadget
Scenario: Disable color options when dark mode gadget is detected
Given the user has enabled the dark mode gadget
When the user views the appearance menu
Then the color options should be disabled
And an exclusion notice should be shown
And clicking "Disable the gadget" should disable the gadget and reload the pageTest Steps
Test Case 1: Disable Color Options When Dark Mode Gadget is Detected
- Go to Special:Preferences on the beta cluster and enable the dark mode gadget.
- Visit the Main Page.
- Open the appearance menu.
- AC1: Confirm that the color options are disabled.
- AC2: Confirm that an exclusion notice is shown.
- AC3: Confirm that clicking "Disable the gadget" disables the gadget and reloads the page, showing the enabled appearance menu.
Design
- Add mockups and design requirements
Acceptance criteria
- If I enable the gadget in Special:preferences for dark mode and turn it on, the dark mode toggle in the appearance menu should be disabled.
- When we detect the gadget, we will remove the associated classes on the HTML to force day theme and we will make the color control disabled.
- We will show an exclusion notice that reads ""You're using a dark mode gadget that interferes with this feature. Disable the gadget https://wikipedia.org to use dark mode."
- When "Disable the gadget" is tapped, the gadget should be disabled and the page will reload showing the enabled appearance menu. This will require hitting the user preference API.
- Since the gadget may be localized per wiki, we will need to use a message to obtain the gadget name. On English Wikipedia we can check this by calling mw.loader.getState('dark-mode-toggle') !== 'registered'. A localized version would look like mw.loader.getState(mw.msg('vector-gadget-darkmode-name')) !== 'registered'
QA beta cluster
- Go to https://en.wikipedia.beta.wmflabs.org/wiki/Special:Preferences#mw-prefsection-gadgets and enable ⧼gadget-dark-mode⧽
- Visit https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page
- Dark mode should be unavailable in settings
Communication criteria - does this need an announcement or discussion?
No.
Rollback plan
No rollback should be necessary here. However after deployment we should check if any changes to https://en.m.wikipedia.org/wiki/MediaWiki:Gadget-dark-mode-toggle.js need to be made.
Sign off steps
- Jon should rollback any unnecessary gadget changes.
This task was created by Version 1.0.0 of the Web team task template using phabulous
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T365083#9851628 |
| 2 | ✅ | T365083#9851628 |
| 3 | ✅ | T365083#9851628 |
QA Results - PROD
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T365083#9882191 |
| 2 | ✅ | T365083#9882191 |
| 3 | ✅ | T365083#9882191 |
