React中的简易暗模式（和多种颜色主题！）

本指南在React应用程序中展示了直接的黑暗模式实现，重点是易用性和团队入职。它避免了复杂的CSS策略，并利用CSS变量和数据属性，以提供干净，高效的解决方案。

在大型反应项目中管理样式和实施黑暗模式的挑战通常会导致复杂的解决方案。尽管存在许多选项，但它们经常依靠特定的CSS方法或框架。这种方法优先考虑简单性和速度，使其非常适合各种技能水平的团队。

一种改进的方法，将CSS变量与useLocalStorage挂钩相结合，提供了强大且用户友好的主题系统。该教程使您通过从头开始设置和运行此系统，展示其在新的React应用程序中的有效性。此外，它证明了与增强CSS组织的react-scoped-css集成。

项目设置

本指南假定对CSS，JavaScript和React的基本熟悉。确保您安装了节点和NPM。使用以下方式创建一个新的React应用程序：

 npx create-react-app易于反应主题 -  themplate打字稿

（用您的项目名称替换easy-react-themes ；省略--template typescript ）。在您的代码编辑器中打开项目（例如，使用cd easy-react-themes; code . ）并启动开发服务器（ npm start ）。最后，安装use-local-storage ：

 npm i使用本地存储

代码实现

清除App.css的内容。在index.css中，使用CSS变量定义主题：

 ：根 {
   - 背景：白色；
  -Text-primary：黑色；
  -Text-ecredary：RoyalBlue；
   - 成年：紫色；
}
[data-theme ='dark'] {
   - 背景：黑色；
  -Text-primary：白色；
   - 文本中学：灰色；
   -  accent：darkred;
}

这利用CSS自定义属性（变量）和数据属性。当data-theme属性设置为'dark'时[data-theme='dark']选择器覆盖了:root变量。

在App.tsx中，导入useLocalStorage ：

从“使用本地存储”导入USELEACALSTOORY；

然后，管理主题状态：

 const defaultDark = window.matchmedia（'（prefers-color-scheme：dark）'）。
const [theme，settheme] = uselocalstorage（'主题'，defaultdark？'dark'：'light'）;

这使用useLocalStorage来跨会话持续主题选择，从而尊重浏览器首选项。 data-theme属性应用于顶级<div>：<pre class="brush:php;toolbar:false">&lt;div data-theme=&quot;{theme}&quot;&gt; {/ *您的应用程序内容在这里 */} &lt;/div&gt;</pre> <p>使用CSS变量在<code>App.css中样式组件：

 。应用程序 {
  颜色：var（ - 文本主要）;
  背景色：var（ - 背景）;
  / * ...其他样式... */
  过渡：全.5；
}
按钮 {
  / * ...使用CSS变量的按钮样式... */
  过渡：全.5；
}

这确保样式在主题更改时会顺利更新。添加一个按钮以切换主题。

扩展应用程序

添加一个新组件（例如，一个彩色正方形），以演示系统的可扩展性。将此组件导入App.tsx 。

奖励：与React范围范围集成CSS

为了改善CSS组织，可以整合react-scoped-css 。按照Craco和craco-plugin-scoped-css的安装说明。重命名您的CSS文件（例如， app.css到app.scoped.css ），并相应地更新导入。至关重要的是，请留下index.css ，以确保CSS变量的全局应用。

这种方法为实施黑暗模式和反应应用中的多个主题提供了一种简单，有效且可维护的解决方案。 GitHub存储库和实时演示提供了更多资源。