Dark mode

[fcoveram]

Description

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

Background

Dark mode is a product-wide setting that adapts the user interface to provide a comfortable experience in low-light environments and, in some cases, improve accessibility for those with visual impairments, as pointed out by NN/g.

As described in Material Design documentation, dark themes also reduce the luminance emitted by device screens and conserve battery power, as devices with OLED screens benefit from the ability to turn off black pixels at any time of day.

Documents

• Project Proposal document (Project proposal for dark mode project #3913)
• Implementation Plan: Dark Mode Frontend #3958

Designs

• Dark Mode Design Proposal #3959
• Dark mode feature introduction flow #4157
• Site theme switcher #4155

Milestones/Issues

TBD

[zackkrida]

Hi @fcoveram! Once you're ready with some preliminary designs, it would be excellent if you could update the project status and begin a proposal. The priority here hasn't changed or anything, I'm just following up on last month's priorities meeting.

[fcoveram]

Update 2024-03-25

• Project proposal document is done, Project proposal for dark mode project #3913
• Project status changed to "In RFC"

[openverse-bot]

Hi @fcoveram, this project has not received an update comment in 14 days. Please leave an update comment as soon as you can. See the documentation on project updates for more information.

[fcoveram]

Update on 2024-04-16

• Feedback on Dark mode designs were positive and two design tasks remain. Those will be shared in new tickets.
• Frontend implementation plan is still in progress.

[openverse-bot]

Hi @fcoveram, this project has not received an update comment in 14 days. Please leave an update comment as soon as you can. See the documentation on project updates for more information.

[fcoveram]

Update on 2024-05-01

• Frontend implementation plan is still in progress but very close to finish.
• Dark mode designs Dark Mode Design Proposal #3959 are done and the ticket was closed.
• Site theme switcher #4155 was created to decide how to switch the site theme.
• Dark mode feature introduction flow #4157 was created to decide the feature introduction.
• Component: Theme switcher #4232 was created requesting the addition of a new component for Site theme switcher #4155
• In parallel, @fcoveram has been updating the Design Library with the new variables to have every Figma component in light and dark mode.

[zackkrida]

The implementation plan for the project is approved and merged.

Next, I will create issues and milestones for the project. Once created I will outline the workflows and link to the milestones in the project issue body. At that point I will move the project to "On Hold" while we work on the Nuxt 3 migration. This will not be worked on until that project is completed, or is again put on hold due to limiting circumstances.