使用反應掛鈎 typescript 設置暗模式

Question

在這里反應初學者，英語不是我的母語對不起，我一直在尋找在我的網站上設置暗模式，我看到的例子大多是在暗和亮之間切換，你需要在這兩個中指定每個 colors。 我的觀點是如何在黑暗和光明之間切換（這個燈應該是我在 css 中設置的默認 colors）

在我的組件中，每個組件都有自己的 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 state 和本地存儲，以使其在每個 session 上持久化。 確保在將項目設置到本地存儲之前解析您的數據。

這是一個現場演示