material-foundation / material-color-utilities

Color libraries for Material You
Apache License 2.0
1.67k stars 144 forks source link

SchemeFidelity issue when dark mode with primary color "#000000" (black) #134

Closed kohheepeace closed 9 months ago

kohheepeace commented 9 months ago

Hello, I am currently developing a feature using SchemeFidelity that allows users to select their own primary color by #hex and automatically set the site's theme color.

An example of its use in the Navbar is shown below. Of particular note is the "Sign Up" button. This button uses primary-container for the background and on-primary-container for the text color.

/* CSS applied to Sign Up button */
background: primary-container
color: on-primary-container

Problems

As shown in Example 2 below, using SchemeFidelity causes problems in dark mode "Sign Up" Button when the user selects #000000(black).  

Questions

Is this problem a bug? Or is it a specification?

Ideally I would like it to work like Vercel.com shown in Example 3.

Any suggestions would be appreciated.

Example 1: user selected primary color is #411cc4

✅ In this case the behavior is as expected.

Light ModeDark Mode
スクリーンショット 2023-12-06 20 25 50
スクリーンショット 2023-12-06 20 26 04

--md-sys-color-primary-container: 81 52 211;

--md-sys-color-on-primary-container: 250 245 255;

--md-sys-color-primary-container: 56 5 188;

--md-sys-color-on-primary-container: 210 202 255;

Example 2: primary color is #000000

❌ I am concerned about readability in dark mode when #000000 is selected.

Light ModeDark Mode
スクリーンショット 2023-12-06 20 23 49
スクリーンショット 2023-12-06 20 23 59

--md-sys-color-primary-container: 38 38 38;

--md-sys-color-on-primary-container: 177 177 177;

--md-sys-color-primary-container: 0 0 0;

--md-sys-color-on-primary-container: 150 150 150;

Example 3: Vercel.com

✅ Example2 would ideally have a color scheme like this in dark mode.

Light ModeDark Mode
スクリーンショット 2023-12-06 20 22 52
スクリーンショット 2023-12-06 20 23 07
kohheepeace commented 9 months ago

I should use SchemeType.MONOCHROME instead of SchemeType.FIDELITY in this case.

The below one is dark mode Navbar with SchemeType.MONOCHROME. It works as expected 😁

スクリーンショット 2023-12-19 5 39 03

To accommodate this, I will provide a checkbox for monochrome, in addition to the input for color selection.

I will close this issue. Thanks for awesome library 👍