I cannot change button background colours the right way. Help?

[thangk]

I've been trying to modify the look of the components.

This is my setup; I currently have a light and dark theme. It's set up in a data-theme style. It's working. I have a custom background colour I want to set for the buttons.

In global.css

[data-theme="dark"] {
--mybackground: theme(colors.gray.700);
}

In tailwind.config.js:

module.exports = {
theme: {
  extend: {
      colors: {
           mybackground: "var(--background)";
      }
   }
}

Now in the react components, I should be able to do this

<Button variant="default" className="bg-mybackground">Test Button</Button>

But it's not working. The background of the button didn't change.

In component.json (cssVariables is set to true), tried it with false as well—both show the same result, no colour change.

However, it'll change if my do this in my CSS file

[data-theme="dark"] {
   .bg-test {
      @apply bg-red-6000;
   }
}

Then use that class name in the button's className. This works with both cssVariables false and true.

What is it that I am missing? I've been at this for a couple of hours. I thought it'd be straight forward modifying these unstyled headless UI components.