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?