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:

• Dark Mode A - Color Palette
• 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, 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]

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.

[obulat]

Update 2024-10-30

Done

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

• Dark mode visual bugs #4911
• Darker homepage in dark theme #4936
• Update text area colors in dark mode #5026
  We have also finished adding all dark mode visual regression tests (Setup and add initial Dark Mode visual regression test screenshots #4305)

To do

New issues were identified after the milestones were closed:

• Prevent layout switching when the theme switcher is rendered (Prevent layout shift 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.

[fcoveram]

I asked in the amplification request ticket for the next steps regarding communicating this project publicly and now waiting for a response.

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

[fcoveram]

I dropped a new comment in the amplification request ticket asking for a possible date to start working on the announcement content.