dante_wang

这个问题确实困扰了我好几个小时，直到我仔细的一遍一遍看shadcn的文档才解决，我是用shadcn+tailwindcss，因为shadcn的代码可以直接生成，所以用shadcn的provider方式处理。但是怎么也不好用。这个问题应该与我的是一个问题。 - 按照https://ui.shadcn.com/docs/dark-mode/vite先增加provider - 页面点击切换主题，会发现，其中class="dark"是可以变化为light的，说明provider是可用的 - 我们通过https://ui.shadcn.com/themes，定制自己的主题，拿到代码并放到global.css中，这个样式文件与components.json里的tailwind样式文件一致： ``` "tailwind": { "config": "tailwind.config.js", "css": "src/globals.css", "baseColor": "gray", "cssVariables": true }, ``` - 仔细阅读https://ui.shadcn.com/docs/theming，有两种控制主题样式的方式： 一种是dark:bg-white这样的，在tailwind里边直接用的这种。另一种是变量形式： 其中的background，foreground并不是tailwind自带的样式变量，需要我们要定义才能识别。 注意"cssVariables": true，要设置为true才可以用这种方式。因为我们要用的主题样式控制都是这种的： ``` @layer base {...