使用反应钩子打字稿设置暗模式

Question

这里是 React 初学者，英语不是我的母语，对不起，我一直在寻找在我的网站上设置暗模式，我看到的示例大多是在暗和亮之间切换，你需要在其中指定每种颜色二。我的观点是如何在黑暗和明亮之间切换（这个灯应该是我在 css 中设置的默认颜色）

在我的组件中，每个组件都有自己的 css（自己的颜色）。如果我想要在深色和默认 css 之间切换的深色模式，例如更改背景颜色，会怎样？

我的代码：

import React, {useState, useEffect } from "react";

...

<div className="app">
      <Switch>
         <Route path="/a">
          <A />
        </Route>
        <Route path="/c">
          <C />
        </Route>
        <Route path="/b">
          <B />
        </Route>
        <Route path="/">
          <Redirect to="/a" />
        </Route>
      </Switch>
    </div>

如果需要更多信息，我可以提供。

Answer 1

您可以使用上下文提供程序来全局使用和更新 darkMode 状态和本地存储，以使其在每个会话中保持不变。确保在将项目设置到本地存储之前解析您的数据。

Here is a live demo