Ability to create global theme with media queries

[bassoGeorge]

I'm enjoying VanillaExtract a lot, but have run into a bit of a roadblock.

Context

• I use CSS variables to control theming in my application. Currently this is limited to two themes, 'light' and 'dark'.
• The themes are controlled by the presence of a corresponding class on the :root element.
• I use the createGlobalThemeContract API. This allows me to have a nice typesafe object to refer to theme variables.
• The themes are created by using the createGlobalTheme API, attaching them to their :root selectors.

Problem
I need to extend this with the ability to start with a sensible default based on the @media (prefers-color-scheme: dark) media query. The createGlobalTheme API only supports a string selector.

Any way I can do this? The following is an example code snippet which illustrates the issue.

const ContextualColors = createGlobalThemeContract({
  page: {
    a: 'page-a'
  },
  neutral: {
    a: 'neutral-a'
  },
});

const lightThemeColors = {
  page: {
    a: 'white'
  },
  neutral: {
    a: 'hsl(189 67% 6% / 0.8)'
  },
};

const darkThemeColors = {
  page: {
    a: 'black'
  },
  neutral: {
    a: 'hsl(45 100% 99% / 0.8)'
  },
};

// All good till now
createGlobalTheme(':root.light', ContextualColors, lightThemeColors);
createGlobalTheme(':root.dark', ContextualColors, darkThemeColors);

// Set contextual colors to the dark if (prefers-color-scheme: dark)

// Either A)
globalStyle(':root', {
  '@media': {
    '(prefers-color-scheme: dark)': {
      // How to use darkThemeColors here?
    },
  },
});

// Or B)
createGlobalTheme(
  '<root selector with media query?>',
  ContextualColors,
  darkThemeColors
);

Thanks in advance!

[bassoGeorge]

Okay, with a bit of digging, it turns out I can use assignVars with globalStyle to get this done

globalStyle(':root', {
  '@media': {
    '(prefers-color-scheme: light)': {
      vars: assignVars(ContextualColors, lightThemeColors)
    },
    '(prefers-color-scheme: dark)':  {
      vars: assignVars(ContextualColors, darkThemeColors)
    },
  },
});

From the documentation it wasn't immediately obvious that assignVars can also be used with a globalThemeContract. Makes sense, but getting to this point was a bit of maze.

This is the best way to go about it right?

[shyuuuuni]

I'm solving the same problem. Thank you for leaving a good code. This helps me a lot.

[coreylight]

Thank you!

[guillaumebrunerie]

I’m having the same problem, and I think that a simpler way to solve it for modern browsers is to use the new light-dark CSS function, which can both respect the user preference and be overridden using color-scheme.

const colors = createGlobalTheme(':root', {
  page: {
    a: 'light-dark(white, dark)'
  },
  neutral: {
    a: 'light-dark(hsl(189 67% 6% / 0.8), hsl(45 100% 99% / 0.8)'
  },
});

And then you simply set one of the following styles on the root:

:root {
  color-scheme: light dark; /* Respect user preference */
  color-scheme: light; /* Force light theme */
  color-scheme: dark; /* Force dark theme */
}