2024-03-13 Project Proposal

Author: @fcoveram

Reviewers

Project summary

Include a feature that changes the UI from light to a dark color scheme.

Motivation

Dark mode is a customization level that is in the spirit of adapting the UI to user’s contexts. The benefits span a11y, personal preferences set on the devices, energy efficiency in devices, and an alternative browsing experience of visual content due to the background contrast.

Goals

Refine Search Experience

Requirements

  1. Add the dark theme to the site and set the Light theme as default. The reason comes from not changing the site settings without user consent through an action.

  2. Introduce the feature to users on the site once deployed.

  3. Allow visitors to change the UI in an reachable manner from the whole site through three options: Light theme, Dark theme, or follow device setting.

  4. Design a dark theme preserving the brand identity.

  5. Design a dark theme that meet the color contrast requirements pointed out in the accessibility section below.

  6. Document the design of pages and UI components in the Design Library and any other additional Figma files.

  7. Document the dark variant of every UI element on Storybook.

  8. Document the transition from current to new frontend implementation.

  9. Include an analytic event to record how users utilize the functionality.

Success

  • The use of this feature will be recorded and analyzed to assess its success.

  • Evaluate the color contrast with an automated tool and a revision from contributors.

Participants and stakeholders

Infrastructure

This project only concerns frontend user interface code, and swapping colors. It should not require any changes to our infrastructure.

Accessibility

Shifting the UI theme should be actioned through a mix of one or more of the following current elements:

  • VCheckbox

  • VRadio

  • VItemGroup

  • VSelectField

  • VPopover

  • VButton

  • VIconButton

The designs of pages and components need to meet the contrast color requirements described in WCAG 2.2 to meet AA. See the Perceivable section of the guideline for more context.

Marketing

An announcement showing the functionality will be created in conjunction with marketing team based on their existing workflows.

Required implementation plans

Frontend implementation plan.