如何在现有的 React 站点上实现主题切换器

Question

我目前有两个主题文件，theme.js 和 theme-dark.js。我也有一个复杂的基于 React 的站点已经建立，我找不到一种方法来实现用户通过站点上的某些切换器在两个主题文件之间切换的方式。

这就是我的index.js 渲染函数的样子：

const rootElement = document.getElementById('root')
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
)

这就是App.tsx文件中的相关代码的样子：

<ThemeProvider theme={theme}>
     <CssBaseline />
     <SnackbarProvider
          .....
     </SnackbarProvider>
</ThemeProvider>

App.tsx 文件中的上述代码嵌套在一些自定义上下文提供程序组件中，并包含一些用于加载站点初始组件的数据。

我在使用现有代码实现主题切换器以在theme.js 和theme-dark.js 之间切换时遇到了一些问题。如果有人可以推动我朝着正确的方向前进，我将不胜感激。不幸的是，由于我公司的安全原因，这是我可以粘贴的所有实际代码，但我认为这里的主要问题是index.js 中的<Provider> 元素在提供自定义主题提供程序时会中断。

Answer 1

一个简单的状态就足够了，但您可能需要在应用程序的深处切换状态，即开关/按钮所在的位置。

你可以通过 Context，但既然你已经在使用 redux，为什么要重新发明轮子。

为您的主题类型创建一个 reducer，

// isDarkModeReducer.js

export default function isDarkModeReducer(state = false, action) {
  switch (action.type) {
    case 'toggleDarkMode': {
      return !state;
    }

   default: 
    return state;
  }
}

将其添加到您的rootReducer

// rootReducer.js
...
import isDarkModeReducer from '<location of your isDarkModeReducer reducer>';
...
const rootReducer = combineReducers({
  ...
  isDarkMode: isDarkModeReducer
})
...

在您的App.tsx 上，从创建的存储中访问isDarkMode 值，并使用它有条件地传递theme.js 或theme-dark.js 文件。

// App.tsx
...
import theme from 'theme.js';
import theme-dark from 'theme-dark.js';
import { useSelector } from 'react-redux'

const isDarkMode = useSelector(state => state.isDarkMode);
...
return (
  <ThemeProvider theme={isDarkMode ? theme-dark : theme}>
     <CssBaseline />
     <SnackbarProvider
          .....
     </SnackbarProvider>
  </ThemeProvider>
);
...

对于切换，您只需在切换按钮所在的位置dispatch 操作toggleDarkMode。

// SwitchButton
import { useDispatch } from 'react-redux'

const dispatch = useDispatch();

const toggleTheme = () => {
  dispatch({ type: 'toggleDarkMode' });
};


return (
  <button onClick={toggleTheme}>Switch Theme</button>
);

您可能还希望将值保存到 localStorage 以进行持久化，您可以按照docs 中的说明轻松完成。