Класс dark: перебивает дефолтный bg-

Question

Есть header, который при светлой теме (для смены тем используется "next-themes"), должен быть просто белым bg-white, а при темной теме dark:bg-black.

<header className="flex justify-between items-center px-8 rounded-
        [30px] bg-white dark:bg-black">

Но у меня почему то dark:bg-black активен всегда, в независимости от темы, которая висит на html.

Провайдер и конфиг вроде как в порядке.

return (
<html lang="en" suppressHydrationWarning>

<body className={`${myFont.className} antialiased`}>
  <CustomThemeProvider>
    <ReduxProvider>
      <div className="flex min-h-screen flex-col max-w-[1400px] m-auto py-2 px-2">
        <HeaderWrapper />
        <main className="grow">
          {children}
        </main>
      </div>
    </ReduxProvider>
  </CustomThemeProvider>
</body>

</html>
);

const CustomThemeProvider = ({
  children
}: {
  children: ReactNode
}) => {
  return ( <
    NextThemesProvider attribute = "class"
    defaultTheme = "dark"
    enableSystem >
    {
      children
    } <
    /NextThemesProvider>
  )
};

module.exports = {
  darkMode: 'class',
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {},
    },
  },
  plugins: [],
}

БЛОГ НА HUSL

Класс dark: перебивает дефолтный bg-

Ответы (0 шт):