diff --git a/documentation/projects/proposals/dark_mode/20240313-project_proposal_dark_mode.md b/documentation/projects/proposals/dark_mode/20240313-project_proposal_dark_mode.md new file mode 100644 index 00000000000..aeece3b81d6 --- /dev/null +++ b/documentation/projects/proposals/dark_mode/20240313-project_proposal_dark_mode.md @@ -0,0 +1,104 @@ +# 2024-03-13 Project Proposal + +**Author**: @fcoveram + +## Reviewers + + + +- [x] @obulat +- [x] @zackkrida + +## 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 + + + +- Lead: @fcoveram +- Design: @fcoveram +- Implementation: @obulat + +## 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](https://www.w3.org/WAI/WCAG22/quickref/?currentsidebar=%23col_overview&levels=aaa&showtechniques=321#principle1) +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. diff --git a/documentation/projects/proposals/dark_mode/index.md b/documentation/projects/proposals/dark_mode/index.md new file mode 100644 index 00000000000..d73ae5163be --- /dev/null +++ b/documentation/projects/proposals/dark_mode/index.md @@ -0,0 +1,8 @@ +# Dark Mode + +```{toctree} +:titlesonly: +:glob: + +* +```