如何在shadcn/ui Next.js应用中默认启用深色模式（无需ThemeProvider）

当然可以实现，核心思路是直接给页面根元素添加深色模式触发类，让shadcn/ui的组件自动适配深色样式，具体操作步骤如下：

• 修改全局样式文件
  打开项目中的全局CSS文件（比如app/globals.css），确保shadcn/ui的样式和Tailwind样式正确导入，无需额外修改样式内容，默认的shadcn/ui样式已经适配了dark类触发的深色模式：

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  @import "@/components/ui/styles.css";
  

• 给根元素添加dark类
  在Next.js的根布局文件（app/layout.tsx）中，直接为<html>标签加上dark类，强制全局启用深色模式：

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

  shadcn/ui的组件样式都是基于dark类编写的条件样式，根元素带上这个类后，所有组件会自动切换为深色模式表现。

• 验证效果
  启动应用后，检查按钮、卡片、输入框等shadcn/ui组件，它们应该默认显示深色模式样式。如果个别组件样式异常，检查组件的自定义类名是否覆盖了默认的深色样式规则。

这种方式是强制全局锁定深色模式，不会响应系统的主题偏好设置，完全满足不需要主题切换功能的需求。

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