javascript - React：我怎样才能为明暗模式动态更改整个背景？Redux 持有我的 darkMode 状态

Question

如何动态地为light和dark模式动态更改整个背景？Redux 持有我的darkMode状态。

例如，我希望背景在开启时为黑色，darkMode而当我不在黑暗模式时为白色。如何动态调整？使用 HOC？

Redux（使用选择器）：

const darkMode = useSelector((state: ReduxState) => state.accountPreferencesReducer.darkMode);

这是我一直向下滚动时遇到的问题（白色背景）：

标签： javascriptreactjsreduxstatedarkmode

Answer 1

通常在明暗模式下，人们通常使用上下文提供程序 ( https://reactjs.org/docs/context.html ) 来传递全局样式化组件。如何做到这一点的一个很好的例子可以在这里看到：https ://www.smashingmagazine.com/2020/04/dark-mode-react-apps-styled-components/

但

您可以通过从您想要受影响的每个组件内的 redux 读取您的暗模式状态来使用暗模式设置组件的样式（不建议）。然后，您需要为每个组件创建 2 个样式并执行以下操作：

const lightStyle = { backgroundColor: "white" };
const darkStyle = { backgroundColor: "black" };
const themeStyle = state.darkMode ? darkStyle : lightStyle;
.
.
<div style = {themeStyle}>
   <JSX-components/>
</div> 

这是很多工作，我建议您使用类似于更易于使用的程式化组件库的东西。