Darker homepage in dark theme

[fcoveram]

Problem

As pointed out by @dhruvkb and @obulat in the main design ticket (#3959) for the Dark Mode project (#3592), the homepage feels brighter compared to the rest of the UI.

Although the color picked (bg-fill-complementary = pink-9) corresponds to its light version in the shade scale, there is room for improving the color perception and make the page to feel less brighter.

Proposal

Before describing the change, here is the idea that I like most.

Surface lightness

I shared the pink-filled homepage with a designer friend, and she commented something that dove into @dhruvkb and @obulat points.

A dark input over a lighter background is unusual in dark themes. The design approach was inverting the lightness of background and surface to mirror the current color scheme. The relationship of background and search input changes from yellow-to-white (heading to the highest lightness) to pink-to-dark (heading to the lowest lightness).

This change doesn't feel natural. From a lightness perspective, the dark input is "pushed back" to the bottom, making the pink background brighter towards the surface. On the other hand, this effect does not happen in the search results because the UI background is dark and the proportion of pink is fewer.

The same lightness reversion of background and input happens when changing from homepage to search results in the current light mode, but a gray input over white background is more common and therefore, familiar.

I made other tests with a darker pink for the background, but outcome feels detached of the palette used in the rest of the pages. Here are those tests if you want to take a look.

Flat border

I also think we can remove the colored border in the announcement banner to make it more simple. The gradient previously made was to stand out the component and be consistent with the glowing theme switcher in the footer, but after reviewing #4922, I think we can simplify it.

---

What do you think of this idea?

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

[dhruvkb]

I like the changes, especially the switch to black background for the dark mode, with subtle yellow accents.

[fcoveram]

Awesome. I updated the mockups in the Dark mode file.

[zackkrida]

Excellent! I liked the pink but I do think this is a good route to take. It better conveys the state of the dark mode across and sets an expectation, "Don't worry, this is the typical dark mode you know and love, not a unique pink/purple theme".

[dhruvkb]

I unassigned myself because I realised this is not yet at the implementation stage. The Dark Mode Figma file doesn't yet describe the various interaction states of the components on the homepage.

[fcoveram]

The Dark Mode Figma file doesn't yet describe the various interaction states of the components on the homepage.

Can you please specify what you would like to see in the design file?

[obulat]

@fcoveram, here are some points that need clarification:

• what color should the search input be when there's focus within, or the content switcher is open?
• should there be a border when the input has focus within?
• does the content switcher need any modifications?
• what should the colors of the search input text and its placeholder be, both when resting and when the input is active/hovered over.

[fcoveram]

Thanks @obulat for the ping. I will add all the variants mentioned in the design file this week.

[fcoveram]

I updated all designs in the "Mockups" section and added two new ones: Selecting media type and Focus flow. These two have all the missing designs mentioned in your last comment @obulat

Here is a screenshot from the Figma file.

Please take a look and let me know if I missed something.

Note

The current style of "Selecting media type" flow in light mode was not added as it doesn't need changes.