Steps to replicate the issue (include links if applicable):
- Enable dark mode on mobile site - log in, click settings, click "advanced mode" to make the dark mode show up
- Do something which triggers a bottom of page notification / toast e.g. watch a page
What happens?:
Text is black on a dark background and unreadable
What should have happened instead?:
Either text should be light, or background should be light
Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):
Other information (browser name/version, screenshots, etc.):
- Notes for first-time taskers **
- Click "mobile view" at the bottom of the page to get mobile site
- you will need to install Extension:MobileFrontend to test this
- The fix will live in the https://www.mediawiki.org/wiki/Skin:Minerva_Neue skin
- Adding the notheme class to any element will make the element look the same in night and day themes - this should be used here.
Requirement
Ensure that the bottom of the page notification/toast is readable in dark mode on mobile.
BDD
Feature: Bottom of Page Notification/Toast Readability in Dark Mode
Scenario: Ensure notification/toast readability in dark mode
Given the user has enabled dark mode on the mobile site
When a bottom of page notification/toast is triggered
Then the notification/toast text should be readable
And the text should either be light on a dark background or have a light backgroundTest Steps
Test Case 1: Ensure Notification/Toast Readability in Dark Mode
- Enable dark mode on the mobile site by logging in, clicking settings, and enabling "advanced mode."
- Trigger a bottom of page notification/toast (e.g., watch a page).
- AC1: Confirm that the notification/toast text is readable, either light on a dark background or with a light background.
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T364117#9851717 |
QA Results - PROD
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T364117#9886606 |