Using Multi-Theme with Next.js, Ant Design, and Tailwind CSS - Changing Primary-Color in Ant Design Component

Question

I'm working with Next.js, Ant Design, and Tailwind CSS, implementing multi-theme functionality in my globals.css file. I am currently facing an issue with changing the primary-color value in Ant Design components while not encountering any problems with Tailwind. Below is an example of my globals.css file:

  @import 'tailwindcss/base';
  @import 'tailwindcss/components';
  @import 'tailwindcss/utilities';

  @layer base {
    html[data-theme='light'] {
      --color-primary: black;
      --color-text: black;
      --color-background: white;
    }

    html[data-theme='dark'] {
      --color-primary: black;
      --color-text: white;
      --color-background: black;
    }

    html[data-theme='gold'] {
      --color-primary: orange;
      --color-text: black;
      --color-background: white;
    }
  }