【開發】3.6-動態主題

簡單幾步可以實現 Pro 動態主題，此方法既適應於V4版本，也適應於v2版本。

1. antd 主題切換

antd 中的動態主題能力來自 umi-plugin-antd-theme，主要思路仍然是將 antd 的變量規則與項目中規則進行抽取，然後進行的 less 的編譯。

首先，安裝此插件：

➜ npm i umi-plugin-antd-theme --save-dev

• umi@3

umi@3 會自動讀取插件 只需要安裝 umi-plugin-antd-theme 即可生效。爲了簡化使用現在需要通過 config/theme.config.json 來配置主題。

• v2 版本

將下面的代碼複製到 config/config.*.js 文件中去，最後如下：

const plugins = [
  [
    'umi-plugin-react',
    ...
  ],
  [
    'umi-plugin-antd-theme',
    {
      theme: [
        {
          fileName: 'theme1.css',
          key:'theme1',
          modifyVars: {
            '@primary-color': '#13C2C2',
            '@menu-dark-color': '#324444',
            '@menu-dark-bg': '#5A5A5A',
          },
        },
        {
          fileName: 'theme2.css',
          key:'theme2',
          modifyVars: {
            '@primary-color': '#4992BF',
            '@menu-dark-color': '#9B9B9B',
            '@menu-dark-bg': '#3A3A3A',
          },
        },
      ],
      // 是否壓縮css
      min: true,
      // css module
      isModule: true,
      // 忽略 antd 的依賴
      ignoreAntd: false,
      // 忽略 pro-layout
      ignoreProLayout: false,
      // 不使用緩存
      cache: true,
    },
  ],
];

• umi@2 版本

在 config/themePluginConfig.ts 添加類似代碼：

export default {
  theme: [
    ...{
      fileName: 'theme1.css',
      key: 'theme1',
      modifyVars: {
        '@primary-color': '#13C2C2',
        '@menu-dark-color': '#324444',
        '@menu-dark-bg': '#5A5A5A',
      },
    },
    {
      fileName: 'theme2.css',
      key: 'theme2',
      modifyVars: {
        '@primary-color': '#4992BF',
        '@menu-dark-color': '#9B9B9B',
        '@menu-dark-bg': '#3A3A3A',
      },
    },
  ],
};

所有的配置變量都可以在 default.less 找到

配置的 theme 節點數量越多編譯越慢，一個 css 文件編譯大約需要 1s。

v4 中自帶了 theme 插件，但是隻有在 Pro 部署的時候纔打開，你可以刪除判斷，直接打開，比如：

plugins.push(['umi-plugin-antd-theme', themePluginConfig]);

2. 自定義組件

在 global.less 文件中，添加如下代碼：

.body-wrap-theme1 {
  // theme1下的全局變量在此定義
  --font-color: #000000;
  --bg-color: #011313;
}

.body-wrap-theme2 {
  // theme2下的全局變量在此定義
  --font-color: #ffffff;
  --bg-color: #ffffff;
}

自定義組件的 index.less 中用法如下：

.flatButton{
  color: var(--font-color);
  background: var(--bg-color);
}

3.主題切換

在主題切換的方法中添加如下代碼，可以根據自己需要進行修改，比如添加從本地獲取上次主題配置項等：

3.1 與 SettingDrawer 一起使用

建議配置 SettingDrawer 一起使用，umi-plugin-antd-theme 插件會將主題配置信息掛載到 window.umi_plugin_ant_themeVar，SettingDrawer 會去讀這個配置自動生成相應的 UI。

3.2 自定義的使用方式

theme1 = true;
onClick = () => {
  let styleLink = document.getElementById('theme-style');
  let body = document.getElementsByTagName('body')[0];
  if (styleLink) {
    // 假如存在id爲theme-style 的link標籤，直接修改其href
    if (this.theme1) {
      styleLink.href = '/theme/theme1.css'; // 切換 antd 組件主題
      body.className = 'body-wrap-theme1'; // 切換自定義組件的主題
    } else {
      styleLink.href = '/theme/theme2.css';
      body.className = 'body-wrap-theme2';
    }
    this.theme1 = !this.theme1;
  } else {
    // 不存在的話，則新建一個
    styleLink = document.createElement('link');
    styleLink.type = 'text/css';
    styleLink.rel = 'stylesheet';
    styleLink.id = 'theme-style';
    if (this.theme1) {
      styleLink.href = '/theme/theme1.css';
      body.className = 'body-wrap-theme1';
    } else {
      styleLink.href = '/theme/theme2.css';
      body.className = 'body-wrap-theme2';
    }
    this.theme1 = !this.theme1;
    document.body.append(styleLink);
  }
};