Create dynamic theme using vanilla extract css

Question

i have theme Provider Component using vanilla extract

import { createContext, useEffect } from 'react';
import { ThemeManager } from './ThemeManager';
import { ThemeContextProps, ThemeProviderProps } from './ThemeProvider.d';
import { merge } from 'lodash';
import { amplienceStyleTokens } from '../themes/styleTokens';
import { ThemeOverrideOther } from '../themes';

export const ThemeContext = createContext<ThemeContextProps | null>(null);

export let theme: ThemeOverrideOther | null = null;

export const NewThemeProvider = ({
  light,
  dark,
  theme: themeObj,
  colorScheme = 'light',
  ...props
}: ThemeProviderProps) => {
  const newTheme = merge(
    {},
    colorScheme === 'dark' ? dark : light || {},
    themeObj || {},
    colorScheme === 'dark' ? amplienceStyleTokens : amplienceStyleTokens
  );

  useEffect(() => {
    theme = newTheme;
  }, [colorScheme, newTheme]);

  theme = newTheme;

  return (
    <ThemeContext.Provider
      value={{
        light,
        dark,
        colorScheme,
        theme: newTheme,
      }}
    >
      <ThemeManager {...props} />
    </ThemeContext.Provider>
  );
};

i want to use theme inside

import { style } from '@vanilla-extract/css';
import { theme } from './NewThemeProvider';

export const root = style({
  color: theme?.colors?.amp_ocean.amp_ocean_30,
});

so that this reflects the color

import { Meta, StoryFn } from '@storybook/react';
import { NewThemeProvider } from './NewThemeProvider';
import { useTheme } from './hooks/useThemePicker';
import * as classes from './test.styles.css';
export default {
  title: 'core/atoms/A',
  component: NewThemeProvider,
} as Meta;

const TestComponent = () => {
  const hookTheme = useTheme();

  console.log('Color from Hook');
  console.log(hookTheme?.colors?.amp_ocean.amp_ocean_30);
  return <div classNames={classes.root}>sdfcdsf</div>;
};

const Template: StoryFn<any> = (args) => {
  return (
    <NewThemeProvider>
      <TestComponent />
    </NewThemeProvider>
  );
};
export const Caption = Template.bind({});

Caption.args = {
  text: 'Caption',
};

but classes root creates a varable but doesnt assign the value of color how to update the theme at runtime as well in vanilla extract