我需要做两个主题，我希望它能根据主题动态变化，我使用这两个主题“光”和“暗”，这就是我如何在我的组件内使用它
这是我的_app. js

export default function App(appProps) 
{
  return (
    <Context>
      <ContextProvider {...appProps}/>
    </Context>
  )
}

function ContextProvider({ Component, pageProps })
{
  const context = useContext(GlobalContext) ;

  const [prefs , setPrefs] = useState("");

  useEffect(() => 
  {
    setPrefs(context?.preferences);
  }, [context])

// here is my issue inside className

  return(
    <div className={`p-3 bg-${prefs?.theme}-primary h-screen`}> // prefs?.theme here is either "dark" or "light"
      <Component {...pageProps}/>
    </div>
  )
}

下面是我的tailwind.config.js：

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
    colors:
    {
      "dark":
      {
        "primary":  "#063159",
      },
      "light":
      {
        "primary":  "#grey"
      }
    }
  },
  plugins: [],
}

当我将bg-${prefs?.theme}-primary更改为bg-dark-primary时，它工作正常，但我需要它动态更改