Tailwind: theming with custom variants like theme-2:bg-gray-500

Hi! I am working on a project where we have two themes and also have plans to add dark mode (now only light mode). Is it a good approach to create a custom tailwind variant to be able to style second theme like so second-theme:bg-some-color?

I know I can add custom tailwind variant like so, but I dont know whether I would run into some problems with this approach later.

plugins: [
    plugin(function ({ addVariant }) {
      addVariant('second-theme', 'html[data-theme='second-theme']')
    })
  ]

On tailwind youtube channel example they use CSS custom properties for theming and create semantic classes like

--color-primary
--color-secondary

and then style them differently based on theme.

I also started with this approach and it worked for a while, but then my designer started using different colors for main theme and second theme in some components and I didnt feel like I want to add extra css vars for situations where that color is different only in one component. So what I am doing now is I add css styles targeting my two themes, in the cmoponents that need them but that breaks out of nice tailwind workflow since I have to add styles like so.

<style>
#header-mobile {
  --header-mobile-bg: var(--color-accent);

  background: var(--header-mobile-bg);
}

html[data-theme='second-theme'] #header-mobile {
  --header-mobile-bg: var(--color-primary);
}

So my question is: since theming with css custom properties is not enough for me, should i just go the custom variant way or it is going to bite me in the ass a month later and the second question is would this approach work nicely when I add support for dark mode?

P.S I dont want to ask the designer to use a consistent color palette because I dont think that code problems should affect designer decisions, at least not in this case.

P.S 2 We dont have plans to add more themes that these two (only dark mode).

Thank you!