Is it possible to use globalCss with variables?

[igortullio]

Like this:

const globalStyles = globalCss({
  '*': {
    margin: 0,
    padding: 0,
    boxSizing: 'border-box',
  },
  body: {
    background: '$primary',
    color: '$text',
  }
});

I want to use it to change the background based on the theme (light or dark).

[mattp0123]

I can do this:

import { createStitches } from '@stitches/react';

const { globalCss } = createStitches({
  // Your config here
})

// Create global CSS with theme
const useGlobalStyles = globalCss({
  // Your global styles with theme variable
})