The gray palette is not symmetric when "inverted"
everdimension opened this issue · comments
A common pattern to create light and dark theme is to define variables like the following:
@media (prefers-color-scheme: light) {
:where(html) {
--neutral-0: var(--gray-0);
--neutral-1: var(--gray-1);
/** ...and so on... */
--neutral-11: var(--gray-11);
--neutral-12: var(--gray-12);
}
}
/** For dark theme, define values in the "opposite" order */
@media (prefers-color-scheme: dark) {
:where(html) {
--neutral-0: var(--gray-12);
--neutral-1: var(--gray-11);
/** ...and so on... */
--neutral-11: var(--gray-1);
--neutral-12: var(--gray-0);
}
}
This doesn't work very well with the current palette. You can see here, that while var(--gray-1)
is clearly visible on white background, var(--gray-11)
is not clearly visible on the black background.
![image](https://private-user-images.githubusercontent.com/5347023/333818293-0d0b29de-2bdd-4c55-9025-0c8b1f9a77af.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE3MTIzNjUsIm5iZiI6MTcyMTcxMjA2NSwicGF0aCI6Ii81MzQ3MDIzLzMzMzgxODI5My0wZDBiMjlkZS0yYmRkLTRjNTUtOTAyNS0wYzhiMWY5YTc3YWYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcyMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MjNUMDUyMTA1WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NTVmMzA1ZGZkNWIwYmU2YTQ3NjNmMDhjODIzMGE2MWM5OGVhZGM5ZTMxMTUxZjdjMDRkNGU2YTUxNDJiYmQ2YSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.cmDi4u33XHwMMyINhA0CscCo0SbOPUbxz20-K2KjvTY)
![image](https://private-user-images.githubusercontent.com/5347023/333818351-5e1f65e1-4033-490d-ad5e-944314ec842d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE3MTIzNjUsIm5iZiI6MTcyMTcxMjA2NSwicGF0aCI6Ii81MzQ3MDIzLzMzMzgxODM1MS01ZTFmNjVlMS00MDMzLTQ5MGQtYWQ1ZS05NDQzMTRlYzg0MmQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcyMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MjNUMDUyMTA1WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9M2JlZmQ1MWU5OTA2OTM4YzdiZDhlODBkZjg5MTEwZjQxOTk1MjFhMjA4Y2Q3NTQwMGE0NWI3YTY4MmExOTkxZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.ndszkcO0FROOEPyZ8l9b-7mr7GWxhq_cErbFjNeRZZ0)
Btw, I think a similar problem can be observed in your article:
Here, on black background the rectangles "8" and "9" are defined well, but on the white background they're indistinguishable:
I am not sure this is something that can be fixed in a general way, but if it's possible, it would be quite helpful!
Thanks for the feedback. I agree with the findings. I think neither OpenColor nor this derived version was designed with dark mode in mind. They are hand-picked colors that are maximally attractive but steps changes between colors are not uniform.
For now the only workaround I can think of is to hand-pick the opposite color. For example, instead of grey 11, use grey 10 for your dark mode, or whichever value is suitable.
Thanks! Yes, for now I ended up "shifting" the colors for the dark mode (i.e. start from "gray-11" for general neutral colors and from "gray-10" for backgrounds). Now it's legible, but I think it still feels not really symmetric between the light and dark mode.
Btw, I also wanted to mention that the technique I'm describing is used on stackoverflow: https://stackoverflow.blog/2020/03/31/building-dark-mode-on-stack-overflow/
And I think their darkmode is one of the most aesthetically pleasing and very readable.
As far as I understand, they did a lot of handcrafting and manual adjustments to achieve this palette.
But ever since I read about their palette my dream was to find an open-source one that has similar properties and ideally can be generated with different colors.