Background

QuickSurveys have a non-standard background color that clashes with dark mode (which can be activated by putting ?vectornightmode=1 at the end of any URL)

User story

As someone who wants to run a quick survey, I need to be able to target users using dark mode.

Requirement

• Surveys should be readable in dark mode.
• The background show use the design token @background-color-neutral

BDD

Feature: Readable QuickSurveys in Dark Mode

  Scenario: Ensure QuickSurveys are readable in dark mode
    Given the QuickSurveys feature is enabled
    When the user views a survey in dark mode
    Then the survey should use the `@background-color-neutral` design token for the background color
    And the survey should be readable and accessible

Test Steps

Test Case 1: Verify QuickSurveys in Dark Mode

1. Enable dark mode.
2. Navigate to this beta test page.
3. In the Developer console, run:

mw.loader.using( 'ext.quicksurveys.init' )
    .then( () => {
        mw.extQuickSurveys.showSurvey( 'AutoModerator Patroller Workstream Survey' );
    } );

4. AC1: Confirm that the survey uses the @background-color-neutral design token for the background color.
5. AC2: Confirm that the survey is readable and accessible in dark mode.

QA Results - Beta

QA Results - Prod

Design

• Add mockups and design requirements

Communication criteria - does this need an announcement or discussion?

N/A

Rollback plan

N/A

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