如何在Next.js13.4+next-theme下为Tailwind CSS类配置暗黑样式

结合你使用的Next.js 13.4 + next-theme + Tailwind CSS环境，以下是三种简单可行的实现方法：

方案一：CSS类选择器（无需修改组件代码） #

next-theme默认会在切换暗黑主题时给根元素（如<html>）添加dark类，直接在globals.css中通过.dark .gradient定义暗黑模式样式即可：

1. 确保ThemeProvider配置为使用class属性（默认配置，未改动可跳过）：

// layout.tsx
import { ThemeProvider } from 'next-themes';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

2. 在globals.css的.gradient类下方添加暗黑主题样式：

/* 原有浅色主题样式 */
.gradient {
    height: fit-content;
    z-index: 3;
    width: 100%;
    max-width: 640px;
    background-image: radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 1) 0px, transparent 0%),
        radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 1) 0px, transparent 50%),
        radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 1) 0px, transparent 50%),
        radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 1) 0px, transparent 50%),
        radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 1) 0px, transparent 50%),
        radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 1) 0px, transparent 50%),
        radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 1) 0px, transparent 50%);
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    filter: blur(100px) saturate(150%);
    top: 80px;
    opacity: 0.15;
}

/* 暗黑主题样式 */
.dark .gradient {
    /* 替换为你需要的暗黑模式渐变 */
    background-image: radial-gradient(at 27% 37%, hsla(215, 80%, 40%, 1) 0px, transparent 0%),
        radial-gradient(at 97% 21%, hsla(125, 80%, 50%, 1) 0px, transparent 50%),
        radial-gradient(at 52% 99%, hsla(354, 80%, 40%, 1) 0px, transparent 50%),
        radial-gradient(at 10% 29%, hsla(256, 80%, 50%, 1) 0px, transparent 50%),
        radial-gradient(at 97% 96%, hsla(38, 50%, 50%, 1) 0px, transparent 50%),
        radial-gradient(at 33% 50%, hsla(222, 50%, 50%, 1) 0px, transparent 50%),
        radial-gradient(at 79% 53%, hsla(343, 50%, 50%, 1) 0px, transparent 50%);
    opacity: 0.25;
    /* 其他需要修改的属性，比如filter、top等 */
}

这种方法无需改动组件JSX，完全通过CSS实现样式切换，最为省心。

方案二：动态切换className（灵活可控） #

如果需要根据主题状态做额外逻辑处理，可使用next-theme的useTheme钩子获取当前主题，动态给元素添加类：

1. 在组件中导入并使用useTheme：

import { useTheme } from 'next-themes';

export default function YourComponent() {
  const { theme } = useTheme();

  return (
    <div className='main'>
      {/* 根据当前主题切换类名 */}
      <div className={`gradient ${theme === 'dark' ? 'gradient-dark' : ''}`} />
    </div>
  );
}

2. 在globals.css中定义gradient-dark类：

.gradient-dark {
    background-image: /* 暗黑模式渐变 */;
    opacity: 0.25;
    /* 其他暗黑样式 */
}

这种方法适合需要在组件内根据主题做额外操作的场景，比如同步修改其他元素状态。

方案三：Tailwind自定义工具类（融入Tailwind生态） #

若想让自定义类贴合Tailwind使用习惯，可将.gradient放入Tailwind的@layer utilities中，配合dark变体使用：

@layer utilities {
  .gradient {
    /* 浅色主题样式 */
    height: fit-content;
    z-index: 3;
    width: 100%;
    max-width: 640px;
    background-image: radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 1) 0px, transparent 0%),
        radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 1) 0px, transparent 50%),
        radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 1) 0px, transparent 50%),
        radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 1) 0px, transparent 50%),
        radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 1) 0px, transparent 50%),
        radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 1) 0px, transparent 50%),
        radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 1) 0px, transparent 50%);
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    filter: blur(100px) saturate(150%);
    top: 80px;
    opacity: 0.15;
  }

  .dark .gradient {
    /* 暗黑主题样式 */
    background-image: radial-gradient(at 27% 37%, hsla(215, 80%, 40%, 1) 0px, transparent 0%),
        radial-gradient(at 97% 21%, hsla(125, 80%, 50%, 1) 0px, transparent 50%),
        radial-gradient(at 52% 99%, hsla(354, 80%, 40%, 1) 0px, transparent 50%),
        radial-gradient(at 10% 29%, hsla(256, 80%, 50%, 1) 0px, transparent 50%),
        radial-gradient(at 97% 96%, hsla(38, 50%, 50%, 1) 0px, transparent 50%),
        radial-gradient(at 33% 50%, hsla(222, 50%, 50%, 1) 0px, transparent 50%),
        radial-gradient(at 79% 53%, hsla(343, 50%, 50%, 1) 0px, transparent 50%);
    opacity: 0.25;
  }
}

自定义类会被Tailwind识别，可正常配合dark模式使用。

内容的提问来源于stack exchange，提问作者antonkornilov-ua