Storybook control css variables in story dynamically

Question

I am new to Storybook. I am looking for a way to control css variables (with args or parameters). The component is a vue3 app built with vite, and uses tailwind. The tailwind config defines custom colors, primary, secondary and accent, like so:

 theme: {
    extend: {
      colors: {
        primary: "var(--primary-color)"
        //...
        },
      }
    }
  }

The values for these colors are fetched at runtime (fetched from the browser, based on logged in user, a GET request is made to a theme config json), and they are added programatically when the root component mounts, like so:

const root = document.documentElement;
root.style.setProperty("--primary-color", primaryColorValue);
}

Now, since, these values are not being set, my components in storybook fall back to some default colors, which are grayscale.

However, in the storybook story, I would like to add a control, to change these css variables, so that I could visualize my components with different primary, secondary and accent color variations.

I don't know how to set it up though.