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

• [x] Project Proposal document (#3913)
• [x] #3958
• [x] #4268
• [x] #4325

Designs

• [x] #3959
• [x] #4157
• [x] #4155

Milestones/Issues

These milestones can be worked on in parallel:

• [x] Dark Mode A - Color Palette
• [x] Dark Mode B - Toggle

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, #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 #3959 are done and the ticket was closed.

• 4155 was created to decide how to switch the site theme.

• 4157 was created to decide the feature introduction.

• 4232 was created requesting the addition of a new component for #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

• 4268 and #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.

https://github.com/WordPress/openverse/pull/4687

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

https://github.com/WordPress/openverse/pull/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.

https://github.com/user-attachments/assets/52f0edcc-ca47-422b-a412-954325970713

[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 #4922, this closes out the dark mode feature introduction issue #4157.

[!IMPORTANT] The notice currently points to the Make site. The URL must be updated when the Make post has been published. https://github.com/WordPress/openverse/blob/3ac64779288c09db9ba7ff677a265b3a0c4a3984/frontend/src/components/VFeatureNotice/VDarkModeFeatureNotice.vue#L16

[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.

[obulat]

Update 2024-10-30

Done

The work on the two dark mode milestones has finished. Here are some bigger issues closed recently:

• 4911

• 4936

• 5026

  We have also finished adding all dark mode visual regression tests (#4305)

To do

New issues were identified after the milestones were closed:

• Prevent layout switching when the theme switcher is rendered (#5085)
• Change the text color on text-heavy pages to text-secondary for easier reading

Follow-up work

According to the project launch plan, we will need to write a make post and start the launch after the issues in the todo are done. Note that we might need to do one more testing after the dark mode is launched on staging before publicizing the launch.