如何在React框架的深色与浅色模式下更改图标颜色？

下面结合你的代码示例，提供几种实用的实现方案：

方法1：CSS自定义属性（全局主题切换） #

适合全局统一切换主题，通过修改根元素CSS变量来批量控制颜色，维护性强。

步骤1：定义全局CSS变量 #

在全局样式文件（如index.css）中添加：

/* 浅色模式默认变量 */
:root {
  --icon-primary-color: #2d3748; /* 深色图标色 */
}

/* 深色模式变量覆盖 */
.dark-mode {
  --icon-primary-color: #f7fafc; /* 浅色图标色 */
}

步骤2：组件中管理主题状态 #

import { useState, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faComment } from '@fortawesome/free-solid-svg-icons';

const MyComponent = () => {
  // 从本地存储读取主题，默认浅色模式
  const [isDarkMode, setIsDarkMode] = useState(() => 
    localStorage.getItem('theme') === 'dark'
  );

  // 切换主题时更新根元素类名和本地存储
  useEffect(() => {
    const root = document.documentElement;
    if (isDarkMode) {
      root.classList.add('dark-mode');
      localStorage.setItem('theme', 'dark');
    } else {
      root.classList.remove('dark-mode');
      localStorage.setItem('theme', 'light');
    }
  }, [isDarkMode]);

  const mystyle = {
    height: "30px",
    marginTop: "10px",
    color: 'var(--icon-primary-color)' // 引用CSS变量
  };

  return (
    <div>
      <button onClick={() => setIsDarkMode(!isDarkMode)}>
        {isDarkMode ? '切换到浅色模式' : '切换到深色模式'}
      </button>
      
      <InfoBox
        size="150"
        Number="My Number 1"
        Name="Update Now"
        icon={<FontAwesomeIcon icon={faComment} style={mystyle}/>}
        classes="icon-primary"
      />
    </div>
  );
};

export default MyComponent;

方法2：React状态控制内联样式 #

适合单个组件内独立控制颜色，无需全局CSS，逻辑直接。

import { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faComment } from '@fortawesome/free-solid-svg-icons';

const MyComponent = () => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  const mystyle = {
    height: "30px",
    marginTop: "10px",
  };

  // 根据主题动态生成颜色样式
  const iconColorStyle = {
    color: isDarkMode ? '#f7fafc' : '#2d3748'
  };

  return (
    <div>
      <button onClick={() => setIsDarkMode(!isDarkMode)}>切换主题</button>
      
      <InfoBox
        size="150"
        Number="My Number 1"
        Name="Update Now"
        icon={<FontAwesomeIcon icon={faComment} style={{...mystyle, ...iconColorStyle}}/>}
        classes="icon-primary"
      />
    </div>
  );
};

export default MyComponent;

方法3：CSS类名切换 #

适合需要复杂样式的场景，通过主题类名嵌套控制图标颜色。

步骤1：定义主题相关CSS类 #

/* 浅色模式图标颜色 */
.icon-light {
  color: #2d3748;
}

/* 深色模式图标颜色 */
.dark-mode .icon-dark {
  color: #f7fafc;
}

步骤2：组件中动态切换类名 #

import { useState, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faComment } from '@fortawesome/free-solid-svg-icons';

const MyComponent = () => {
  const [isDarkMode, setIsDarkMode] = useState(() => 
    localStorage.getItem('theme') === 'dark'
  );

  useEffect(() => {
    const root = document.documentElement;
    isDarkMode ? root.classList.add('dark-mode') : root.classList.remove('dark-mode');
    localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
  }, [isDarkMode]);

  const mystyle = {
    height: "30px",
    marginTop: "10px",
  };

  return (
    <div>
      <button onClick={() => setIsDarkMode(!isDarkMode)}>切换主题</button>
      
      <InfoBox
        size="150"
        Number="My Number 1"
        Name="Update Now"
        icon={<FontAwesomeIcon 
                icon={faComment} 
                style={mystyle} 
                className={isDarkMode ? 'icon-dark' : 'icon-light'}
              />}
        classes="icon-primary"
      />
    </div>
  );
};

export default MyComponent;

进阶：全局主题上下文（Context） #

如果应用多个组件需要主题状态，用React Context全局管理，避免状态层级传递：

1. 创建ThemeContext #

// src/contexts/ThemeContext.js
import { createContext, useContext, useState, useEffect } from 'react';

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [isDarkMode, setIsDarkMode] = useState(() => 
    localStorage.getItem('theme') === 'dark'
  );

  useEffect(() => {
    const root = document.documentElement;
    isDarkMode ? root.classList.add('dark-mode') : root.classList.remove('dark-mode');
    localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
  }, [isDarkMode]);

  const toggleTheme = () => setIsDarkMode(!isDarkMode);

  return (
    <ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);

2. 根组件包裹ThemeProvider #

// src/App.js
import { ThemeProvider } from './contexts/ThemeContext';
import MyComponent from './MyComponent';

function App() {
  return (
    <ThemeProvider>
      <MyComponent />
    </ThemeProvider>
  );
}

export default App;

3. 组件中使用主题 #

import { useTheme } from './contexts/ThemeContext';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faComment } from '@fortawesome/free-solid-svg-icons';

const MyComponent = () => {
  const { isDarkMode, toggleTheme } = useTheme();

  const mystyle = {
    height: "30px",
    marginTop: "10px",
    color: isDarkMode ? '#f7fafc' : '#2d3748'
  };

  return (
    <div>
      <button onClick={toggleTheme}>切换主题</button>
      
      <InfoBox
        size="150"
        Number="My Number 1"
        Name="Update Now"
        icon={<FontAwesomeIcon icon={faComment} style={mystyle}/>}
        classes="icon-primary"
      />
    </div>
  );
};

export default MyComponent;

内容的提问来源于stack exchange，提问作者Muhammad Umar