如何在particlesConfig中动态修改particles.js的颜色配置？

• 不要把粒子配置存为静态particlesconfig.json文件，改为在组件内定义为JS对象，结合React的状态管理和你的主题上下文联动即可实现动态修改
• 示例代码逻辑：

// 引入styled-components的主题获取钩子，以及粒子组件
import { useTheme } from 'styled-components'
import Particles from 'react-tsparticles'

const ParticleBackground = () => {
  // 拿到当前生效的主题变量，你可以提前在主题配置里定义好深浅模式对应的粒子色值
  const { isDark, colors } = useTheme()
  
  // 动态生成粒子配置
  const particlesConfig = {
    particles: {
      color: {
        // 颜色值直接关联当前主题的对应配色
        value: isDark ? colors.dark.particle : colors.light.particle
      },
      // 你原json文件里的其他配置（shape、size、move等参数）原样迁移到此处即可
      // ... 其余原配置项
    }
  }

  return <Particles options={particlesConfig} />
}

• 主题切换时配置会自动重新计算，粒子会同步更新配色，不需要额外加其他监听逻辑。如果遇到没有实时更新的情况，可以给Particles组件加key={isDark ? 'dark-particle' : 'light-particle'}属性，强制主题切换时组件重渲染加载新配置即可。

如果你不想调整原来的配置结构，也可以通过CSS变量打通主题和粒子配色：

• 第一步在全局样式中定义和主题绑定的CSS变量：

// 你的全局样式定义（比如用createGlobalStyle）
const GlobalStyle = createGlobalStyle`
  body {
    --particle-color: ${props => props.theme.isDark ? '#ffffff' : '#222222'};
    /* 其余全局样式 */
  }
`

• 第二步把粒子配置里的颜色字段改为读取该CSS变量：

// 粒子配置的color字段修改为如下内容，你甚至可以保留原json文件，直接修改json里的对应值即可
color: {
  value: 'var(--particle-color)'
}

• 这种方式不需要调整配置结构，主题切换时CSS变量自动更新，粒子颜色会同步生效。

不要尝试直接修改静态particlesconfig.json文件内容，客户端运行时无法修改静态资源内容，所有动态修改需求都要通过上述两种运行时动态传参的方式实现。

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