Pigment: add a "system" mode to the dark mode switch

[maartenschumacher]

Summary

With the current colorSchemeSelector API that is available to implement a dark mode switch in a pigment app, it is possible to choose the media option which relies on the prefers-color-scheme media query, or choose class or data which enables a manual toggle. But for a "system" option, we need both the media query selector and the class/data selector (since, if the system option is selected, we fall back to the media query). I've found a workaround to achieve this, but it feels a bit hacky, so it would be nice if there is an official documented way to do this.

To be fair, the Pigment CSS docs also don't specify how to implement a "system" option to the dark mode switch, but they have a more flexible getSelector API which allows you to write something like

getSelector: (colorScheme: string, css) => {
    if (!colorScheme) return ":root";
    return {
        [`@media (prefers-color-scheme: ${colorScheme})`]: {
            ":root": css,
        },
        [`.${colorScheme}`]: css,
    };
}

which achieves the desired effect of both supporting a manual switch, and being able to fall back to the media query if the system option is chosen. So my workaround is to first create my theme with createTheme from material-ui, then pass that to the extendTheme function from @pigment-css/vite-plugin, where I can add this getSelector function. I cannot just create my theme directly with extendTheme because there is functionality in material-ui's createTheme that is missing from extendTheme. Please let me know if there is a better way to do it!

Examples

No response

Motivation

Most dark mode switches have a "system" option, enabled by default, that falls back to the browser preference. It would be great to be able to do this in Pigment apps as well.

Search keywords: pigment, dark mode

[brijeshb42]

Added it to post v1 roadmap.