Is it possible to change a theme variable from Javascript? (Tailwind v4 / React 19)

[diego-gt]

Hello, first of all, thanks for this awesome tool!

Background: I've used Tailwind for about half a year, I know CSS somewhat well. I'm new to React and using JS heavily, just with a couple of months of experience with my current work project.

Now, to my situation: I built a React component library to use in a React project at work. I set a custom theme variable color-primary-* to represent our main brand color.

However, a senior dev has made some remarks about it as he doesn't really like that specific hue. Nothing I can do to actually change the brand color but I thought about adding an option for the users to choose a "colorscheme", mainly changing the custom theme variable I mentioned. Like the light/dark theme feature.

I did a little experiment and just resetting the each variable at the document level seemed to work:

document.documentElement.style.setProperty(
    "--color-primary-50",
    "oklch(<values>)",
  );

But that just changes it for the current document, so when the user navigates to another page, it goes away.

Before investing more time in trying to implement something (that I'm not sure it's going to be the best as I'm trying to use Server Components wherever possible and I think that'll lead me to try to change everything to a Client Component), I wanted to see if there's any API/procedure I could use to achieve what I want.

I thought maybe creating more variants like the dark:*, but I don't think I can add that kind of task if I want to deliver my project soon.

Any ideas, tips or recommendations are appreciated.

Thanks!