@theme与@theme inline选哪个？如何让@theme inline适配暗色模式？

当使用Next.js推荐的@theme inline语法时，传统的暗色模式覆盖方法失效，核心原因是@theme inline会将主题样式内联到生成的CSS中，优先级和作用范围与传统@theme不同。以下是具体解决步骤：

1. 确认Tailwind配置的暗色模式设置 #

确保tailwind.config.js中启用class模式的暗色模式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  // 其他配置项...
}

2. 用类选择器结合@theme inline定义暗色模式样式 #

@theme inline不支持直接嵌套dark:变体语法，需要通过.dark类选择器直接覆盖主题变量或样式，确保优先级匹配：

示例1：CSS变量类的暗色模式覆盖 #

@theme inline {
  :root {
    --color-primary: #ffffff;
    --color-bg: #f3f4f6;
  }

  /* 直接用.dark类覆盖根变量 */
  .dark:root {
    --color-primary: #1f2937;
    --color-bg: #111827;
  }

  /* 自定义工具类或组件类时，直接引用变量 */
  .btn-primary {
    background-color: var(--color-primary);
    color: var(--color-bg);
  }
}

示例2：固定色值的暗色模式覆盖 #

如果是直接定义固定色值的主题样式，同样通过.dark类选择器覆盖：

@theme inline {
  .text-custom {
    color: #374151;
  }

  .dark .text-custom {
    color: #e5e7eb;
  }
}

3. 确保Next.js的暗色模式切换逻辑正确 #

确认你的Next.js项目中，切换暗色模式时会正确给根元素（如<html>）添加/移除dark类。比如使用next-themes库时，配置示例：

// app/providers.tsx
'use client';

import { ThemeProvider } from 'next-themes';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider attribute="class">
      {children}
    </ThemeProvider>
  );
}

关键注意点 #

• @theme inline生成的样式是内联优先级，不需要额外加!important，但必须通过.dark类选择器直接命中元素，不能依赖Tailwind的dark:变体嵌套在@theme内部。
• 原生Tailwind的dark:变体生效是因为它是基于类选择器生成的样式，和@theme inline的样式优先级匹配，而自定义的@theme样式需要手动对齐这种类选择器逻辑。

内容的提问来源于stack exchange，提问作者rozsazoltan