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 background

Test Steps

Test Case 1: Ensure Notification/Toast Readability in Dark Mode

1. Enable dark mode on the mobile site by logging in, clicking settings, and enabling "advanced mode."
2. Trigger a bottom of page notification/toast (e.g., watch a page).
3. AC1: Confirm that the notification/toast text is readable, either light on a dark background or with a light background.

QA Results - Beta