如何在React項目中實現(xiàn)主題切換并持久化用戶偏好設置

要在React項目中實現(xiàn)主題切換并持久化用戶偏好設置，可以按照以下步驟進行：

1. 創(chuàng)建一個主題管理器組件，用于管理主題切換的邏輯和狀態(tài)。在該組件中，可以定義一個狀態(tài)變量來存儲當前選定的主題，以及一個方法來切換主題。

import React, { useState } from 'react';

const ThemeManager = () => {
  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');

  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };

  return (
    <div>
      <button onClick={toggleTheme}>Toggle Theme</button>
      <p>Current Theme: {theme}</p>
    </div>
  );
};

export default ThemeManager;

2. 在根組件中引入主題管理器組件，并在需要應用主題的子組件中使用theme變量來應用主題樣式。

import React from 'react';
import ThemeManager from './ThemeManager';

const App = () => {
  return (
    <div>
      <ThemeManager />
      <div className="content">
        <h1>Theme Switcher Demo</h1>
        <p>This is a sample text</p>
      </div>
    </div>
  );
};

export default App;

3. 根據用戶選擇的主題，動態(tài)切換應用的樣式。

// styles.scss

.light {
  background-color: #f0f0f0;
  color: #333;
}

.dark {
  background-color: #333;
  color: #f0f0f0;
}

// App.js

import React from 'react';
import ThemeManager from './ThemeManager';
import './styles.scss';

const App = () => {
  return (
    <div className={`app ${localStorage.getItem('theme') || 'light'}`}>
      <ThemeManager />
      <div className="content">
        <h1>Theme Switcher Demo</h1>
        <p>This is a sample text</p>
      </div>
    </div>
  );
};

export default App;

通過以上步驟，你可以在React項目中實現(xiàn)主題切換并持久化用戶偏好設置。當用戶切換主題時，應用會動態(tài)改變樣式，并且用戶的偏好設置會被保存在本地存儲中，以便下次訪問時重新加載。