Dark Mode Design Proposal

[zackkrida]

Written by @fcoveram

Problem

As part of the #3592 project we need a finalized design proposal which provides:

• The mapping of dark mode color values to the existing color tokens
• The position of new UI elements

---

Color system

The current color system of Openverse has worked great conveying the relationship between content hierarchy and brand identity. The unique look of the homepage stands out with its vibrant color compared to other search services, and the use of pink complements the overall design without becoming distracting during the search experience.

However, adding a dark theme to the site presents a substantial challenge in keeping that balance untouched and reach a look-and-feel that feels familiar.

Here I am introducing a proposal for Openverse in dark theme and their main characteristics.

Neutrality

My first explorations began with reusing the current dark charcoal shades to test how the UI feels. After making some mockups, I immediately noticed the overall pink tone caused by this scale as it comes from lightness variants of Pink.

The pink tones in the background competed with the search result and the details page, adding a distracting tone that does not exist in the current theme. Because of that, I decided to neutralize those shades to be entirely gray and remove any hue nuances in the UI.

Lightness

In parallel, I aimed to keep the gray shades simple and use one scale for both light and dark themes. I used Huetone to generate shades based on LCH color mode. This mode sets color values based on the human perceptive lightness rather than computing red-green-blue values, as sRGB does.

This scale sets the baseline for hierarchies in backgrounds, surfaces, and texts. Now that gray is a separate color with shades, yellow and pink also have their scale.

Brand

Given that keeping the brand identity is among the requirements, the tests began by “turning off” the lightness of pink and yellow while keeping their accent and complementary roles, respectively. However, and because of the nature of each color, the inversion felt forced and the UI ended up with a muddy yellow and a saturated neon.

Shifting the role of yellow and pink was sufficient to reach the brand’s familiar tone. Among the tweaks applied, both tones moved slightly toward the surface lightness to make them more visible. In that same vein, brand colors in the audio wave also tap into brand shades to make the UI richer.

Design Library

Creating variables in the design library helped streamline the application of the new color system in pages and components. The "Colors" collection gathers all colors with a more straightforward name and sets the baseline for their use.

To apply color in the UI, the "Alias" collection assigns meaning to each color through a name format that describes how the color is used in both light and dark themes. So, for instance, a surface placed above the background should use the color bg-surface , whereas for an interactive element where the background color changes once the pointer goes over, the color used should be bg-fill-primary-hover

Describing the meaning of each color in the library would make the mockup creation and the library maintenance easier. Acknowledging that this benefits Figma users, I would like your suggestions on how to sync better design and frontend documentation.

Designs

Together, these three pillars consolidate the new color system for both light and dark themes. Please take a look at the design page that gathers the main sections and components in both versions, and let me know what you think.

---

Pending tasks

As part of the requirements pointed out in the project proposal, the following is pending from my side:

• Add the design of the onboarding process introducing the feature → Dark mode feature introduction flow #4157
• Add the design for switching theme → Site theme switcher (dark mode toggle) #4155
• Share the documentation for transiting to the new color system → Current and new color system #4268

Mockups

Figma file: Dark mode

[openverse-bot]

Subscribe to Label Action

cc @WordPress/gutenberg-design, @WordPress/openverse

This issue or pull request has been labeled: "🖼️ aspect: design"

Thus the following users have been cc'd because of the following labels:

• WordPress/gutenberg-design: 🖼️ aspect: design
• WordPress/openverse: 🖼️ aspect: design

To subscribe or unsubscribe from this label, edit the .github/subscribe-to-label.json configuration file.

Learn more.

[zackkrida]

@WordPress/openverse-frontend Please provide Francisco some feedback on these designs this week; thank you!

[sarayourfriend]

These look great to me, Francisco. I don't have any questions. The explanation of layers and names for different colours is awesome and will make working with these colours in the actual code more pleasant. Having names based on usage is always easier to remember, I think, thank references to the specific colours, which are easier to mix up what they're for. Extra kudos there, from me 🙂

For syncing the colours, I don't know what Figma has built in, but it looks like there is at least a community plugin to export variables. If it's possible to extract a JSON file of the variables, then it's really easy for us to add those directly to our Tailwind configuration, it may even just be a matter of copy/paste depending on how the variables are organised in the JSON. Even if it isn't JSON, a file that defines each variable name the colour code it represents in a structured format would make it easy for a maintainer to update the variables without too much hassle. That's only possible once (/if, depending on how the implementation plan approaches things) we've made the requisite changes to the application to use the new names.

Into the future, if Figma has a web API for it, even better! We could one day write a GitHub workflow that someone could just press a button (basically) and have a PR generated with the new variables on their behalf. We have a suite of tests that take screenshots of almost every part of the application, and once we have that configured for dark mode, we'll have a decent level of confidence that any changes to colours will be reflected in the snapshots and be easy to review and confirm.

[jasmussen]

Looks great!

[fcoveram]

…it looks like there is at least a community plugin to export variables. If it's possible to extract a JSON file of the variables, then it's really easy for us to add those directly to our Tailwind configuration, it may even just be a matter of copy/paste depending on how the variables are organised in the JSON…

Nice! I will take a look. If you @obulat have time to check as well, I would appreciate how the exported file meets your frontend needs.

[obulat]

The designs look awesome, @fcoveram !

…it looks like there is at least a community plugin to export variables. If it's possible to extract a JSON file of the variables, then it's really easy for us to add those directly to our Tailwind configuration, it may even just be a matter of copy/paste depending on how the variables are organised in the JSON…

Nice! I will take a look. If you @obulat have time to check as well, I would appreciate how the exported file meets your frontend needs.

I tried copying the Dark theme to my Figma drafts and running this plugin there but it exported 0 variables. I'm not sure how it works.
I guess I need to open the collection with the colors with this plugin, where is it?

[fcoveram]

Variables are already part of the design library. There are other old collections in the library so just check the “Colors” and “Alias” ones.

[stacimc]

This looks fantastic to me, @fcoveram :) I love the way the roles of the pink and yellow have been shifted. The branding feels totally consistent while being so visually interesting.

[AetherUnbound]

These designs are excellent!! Thanks for sharing the process with us too, it was really helpful to see how you arrived at the current approach. I completely agree with the swapping of the primary/secondary accent colors, it's also in line with what I've seen other applications do with their dark mode. I can't wait to see this live! 🕶️

[zackkrida]

@fcoveram all of this feedback is quite positive, I think we are ready to move on to the pending tasks 🎉. I will finish the implementation plan this week.

[fcoveram]

Yes! I plan to begin the pending work this week.

[krysal]

I see the design has already been approved, but I wanted to echo how well inverting the colors works for the Dark mode. Love it!

[fcoveram]

Given that all feedback is positive. I will close this issue and create new ones for the remaining design tasks.

[dhruvkb]

While this issue has been closed, I wanted to note this point for @fcoveram's consideration.

The homepage with the pink background looks great on its own but when considering with respect to the other screens and surfaces in the app, which all have black/grey backgrounds, the pink background feels out of place and too bright.

For example, in this screenshot of a message sharing some implemented dark mode mockups, the homepage is the one that is the brightest and the background is taking up more attention.

Personally I feel that the background of the homepage should be made darker.

[fcoveram]

I applied the same lightness as in its light version (in yellow) to achieve consistency between both themes. I agree it feels brighter, but I would go with that version and use Openverse in dark mode for a few days to see how it feels before making conclusions.

The new theme might feel strange at first, but the change could blend easily into our personal experiences in the daily use.

If then we all agree about the brightness, we can definitely make an exception to lower the shade.

[obulat]

I applied the same lightness as in its light version (in yellow) to achieve consistency between both themes. I agree it feels brighter, but I would go with that version and use Openverse in dark mode for a few days to see how it feels before making conclusions.

I also feel that the homepage is too bright, and it loses some of the advantages of the dark mode. I didn't want to share a simple "I don't like it" comment, so I researched some color advice on the dark themes. I've found an idea of using lower saturation, so I tried applying it. In this screenshot below, the header is 40% saturation, the main content - 50%, the footer is the current 70%. I think 40% looks too dull, but 50% looks easier on the eyes than the current color. What do you think, @fcoveram?

I do agree on getting more people to use the dark theme (in staging) for a longer period of time and collecting their opinions.

[fcoveram]

Lightness and saturation are two different attributes of colors. The former refers to how close from from white or black color is; and the latter to how much saturation the color has.

Despite this difference, I understand your point and I'm open to revisit the decision.

In this screenshot below, the header is 40% saturation, the main content - 50%, the footer is the current 70%. I think 40% looks too dull, but 50% looks easier on the eyes than the current color.

How did you set the saturation? Ideally, we should keep within the pink shades defined in #4268. For the dark theme, the pink defined as complementary is pink-9 (#911A71), so we can try pink-10 instead.