React项目动态修改主题颜色的方案

const getTheme = (isDark: boolean) => {
  const darkStyle: any = document.getElementById('darkTheme');
  
  if (!darkStyle) {
      var link = document.createElement('link');
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.id = "darkTheme"
      link.disabled = false;
      link.href = './dark.css';
      document.getElementsByTagName('head')[0].appendChild(link);
  }
  
  darkStyle.disabled = !!isDark;
}

:root[data-theme="light"] {
    --primary-text-color: #FFFFFF;
    --primary-white-color: #2A2A2D;
    --primary-color: #3591F4;
    --text-color: #363A45; 
}

:root[data-theme="light"] {
    --primary-text-color: #FFFFFF;
    --primary-white-color: #2A2A2D;
    --primary-color: #3591F4;
    --text-color: #fff; 
}

@import './theme/lightTheme.less';
@import './theme/darkTheme.less';

const getDarkTheme = (isDark: boolean) => {
    const root = document.documentElement;

    if (!isDark) {
      // 修改 data-theme 属性的值为 "light"
      root.setAttribute('data-theme', 'light');
      return
    }

    // 修改 data-theme 属性的值为 "dark"
    root.setAttribute('data-theme', 'dark');
}

getDarkTheme(theme)

.btn {
    color: var(--primary-color);
}