Please document the inversion of colors in dark mode on the Stacks website

Question

There is this really useful website that documents all of the design elements Stack Exchange uses. It can be found at https://stackoverflow.design.

I find it especially useful when doing a suggestion on a new design element, like I did in this answer to the announcement of new mod and staff badges. When tinkering with the CSS to accomplish that I noticed that the variables I used didn't result in the same results as the design website showed.

Today during a chat with Kyle Pollard he pointed out that when one is browsing the Stacks design website in dark mode, the colours are inverted. This perfectly explains why my results were not lining up here on MSE, as there is no dark mode here of course.

Can you please add a mention of the inverted colours in dark mode on the page about colors? Or even better, duplicate the table to show the values for dark and normal mode at the same time.

Answer 1

This is now status-completed.

Back this August, as I commented, I opened a PR that adds in a paragraph that mentions colors being inverted. Two days ago, that PR was merged, and the colors page you linked now contains the following note:

When dark mode is enabled, the values of numbered color variables will be inverted from what they are with dark mode disabled—900 being the lightest, and 025 or 050 being the darkest. This is because the values don't represent lightness, but rather contrast with the background. The same also applies to lighter variants of non-numbered color variables.