React中的主题切换实践

在现代的Web开发中，用户体验的提升常常通过细节的优化来实现。其中一个重要的功能就是主题切换，允许用户根据个人喜好或环境光线来选择不同的主题模式。今天我们来探讨如何在React应用中实现一个优雅的主题切换功能，以一个实际的例子来说明。

项目概览

我们有一个ERP系统，其核心组件RootApp.jsx负责管理整个应用的组件树。其中包含了路由、状态管理、主题提供者等核心功能。主界面组件ErpApp.jsx控制着布局和主要内容的展示。

实现主题切换

1. 创建主题上下文

首先，我们需要创建一个主题上下文，用于在整个应用中共享和管理主题状态。

// ThemeContext.js import React, { createContext, useState, useContext, useEffect } from 'react'; const ThemeContext = createContext(); export const ThemeProvider = ({ children }) => { const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light'); const toggleTheme = (newTheme) => { setTheme(newTheme); localStorage.