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
• Current and new color system #4268
• Semantics for the new color system #4325

Designs

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

Milestones/Issues

These milestones can be worked on in parallel:

• https://github.com/WordPress/openverse/milestone/31
• https://github.com/WordPress/openverse/milestone/32

Launch Plan

See launch plan here.

[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 (dark mode toggle) #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 (dark mode toggle) #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.

[zackkrida]

Update 05-10-2024

All issues and milestones have been created and added to the parent issue ✨. The project is ready to be worked on but will be moved to "On Hold".

There is some remaining work around color names that I raised here and am awaiting reply.

[fcoveram]

Update 14-05-2024

• Current and new color system #4268 and Semantics for the new color system #4325 were created to specify the new color system and the transition from current the current

cc: @zackkrida

[zackkrida]

Update 2024-07-31

I've initialized work on dark mode in light of the successful Nuxt 3 deployment. I've put up a PR for the first part of the "color palette" milestone. That milestone introduces the dark mode colors but doesn't expose them to end users.

#4687

I've also created an initial PR to add the dark mode color palette. It's close to being ready for review:

#4690

After that, the first milestone will be closed when we add visual regression tests and store screenshots for the dark version of components.

[zackkrida]

Update 2024-08-12

The first dark mode milestone is nearly completed, with one issue remaining #4305.

But first, we need to do two things:

• review the dark mode for improvements, issues, or concerns. @fcoveram will be able to start this next week.
• Complete the second milestone, which creates the UI and code necessary to toggle and introduce dark mode.

Once those are both completed, we can "lock in" the visual regression tests for dark mode.

Given that our Storybook Playwright tests are paused, I will constrain the scope of that issue to creating dark mode page screenshots for now.

[openverse-bot]

Hi @zackkrida, 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.

[zackkrida]

Update 2024-08-27

Progress! Dark mode is under extensive community review in #4783, with @obulat already pushing some improvements in #4808.

Work has begun on the second milestone. I've started writing the basic prerequisites in #4809 and #4810, while @dhruvkb plans to implement the Dark mode toggle component.

[fcoveram]

Yesterday, I spent half a day cleaning up some views to support dark mode. If you have edit permission in the Design Library, you can easily switch the theme of mockup sections marked as "ready for dev."

To avoid unintentional changes in the file, it is highly recommended that you switch between design and dev modes (Shift + D) and use the hand tool (H) to move around the file.

CleanShot.2024-08-29.at.10.02.27.mp4

[openverse-bot]

Hi @zackkrida, 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.

[dhruvkb]

Update 2024-09-19

• The new feature notice has been added in PR Add new feature notice for dark mode #4922, this closes out the dark mode feature introduction issue Dark mode feature introduction flow #4157.

Important

The notice currently points to the Make site. The URL must be updated when the Make post has been published.

openverse/frontend/src/components/VFeatureNotice/VDarkModeFeatureNotice.vue

Line 16 in 3ac6477

see-more-href="https://make.wordpress.org/openverse/"

[openverse-bot]

Hi @zackkrida, 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.

[openverse-bot]

Hi @zackkrida, 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.