How to set body background color in globalStyle with vars from theme?

[lucasrabiec]

Hi, I want to set the body's background color using vars from createThemeContract and apply a color value from createTheme. Thanks to that I will be able to have body's background color depending on the selected style.
Something like that:

export const vars = createThemeContract({
  background: {
    default: null,
  },
});

export const lightTheme = createTheme(vars, {
  background: {
    default: 'green',
  },
});


globalStyle('body', {
  backgroundColor: vars.background.default,
});

and then in my App component I set:

export default function App() {
  return (
    <div className={lightTheme}>
    ...
    </div>
  );
}   

Unfortunately, it doesn't work. How can I achieve that?

[lucasrabiec]

Ok. I found a way that works:

export default function App() {
  document.body.className = lightTheme;
  ...

but maybe there is a better solution.
Some ideas?

Edit:
I found another solution with global styling and switching themes via hook: https://codesandbox.io/s/vanilla-extract-global-theme-rmz79?file=/src/vars.css.ts:1008-1049