The gray palette is not symmetric when "inverted"

[everdimension]

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.

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!

[fchristant]

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.

[everdimension]

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.