如何在 shadcn/ui Next.js 应用中默认启用深色模式？

2026-11-06数据阿明

结论

可以不使用 ThemeProvider。如果应用一直使用深色模式，可以在 Next.js 根布局的 <html> 元素上添加 dark 类。项目需要预先配置深色主题规则和对应的 CSS 变量。

设置方法

在 App Router 项目的 app/layout.tsx 中设置根元素：

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="zh-CN" className="dark">
      <body>{children}</body>
    </html>
  )
}

如果 <html> 上已有其他类名，例如字体类，请保留，并把 dark 加进去。

shadcn/ui 组件的深色外观通常依赖项目中的深色样式定义。使用 CSS 变量时，应在 .dark 选择器下定义深色变量；使用 Tailwind 的 dark: 变体时，也要确认深色模式采用基于类名的配置。添加 dark 类后，项目仍需定义相应的深色颜色和样式。

注意事项

这样设置后，应用会始终以深色主题渲染。如果之后要根据系统偏好或用户选择切换主题，可以再引入 ThemeProvider 或相应的主题管理逻辑。Tailwind 和 CSS 的配置因项目而异，请根据当前使用的版本检查深色模式规则。