ant-design-pro +nginx+cookie实现动态切换主题的功能

目前采用最新版本and-design-pro v5，当然，其他版本也是支持的。

第一步：
yarn build构建后，会有切换主题的按钮，先删除它：

npm uninstall umi-plugin-setting-drawer

第二步：修改ant-design-pro，支持构建不同的主题的版本
（1）修改package.json

    "build:t1": "cross-env BUILD_THEME=t1 umi build",
    "build:t2": "cross-env BUILD_THEME=t2 umi build",
    "build:t3": "cross-env BUILD_THEME=t3 umi build",
    "build:t4": "cross-env BUILD_THEME=t4 umi build",
    "build:t5": "cross-env BUILD_THEME=t5 umi build",

(2)修改config/defaultSettings.ts

import { Settings as LayoutSettings } from '@ant-design/pro-layout';
const { BUILD_THEME } = process.env;
console.log('------------------------BUILD_THEME:'+BUILD_THEME+'------------------------:')
const themes={
  t1:{//mix_dark_not_splitMenus
    navTheme: 'dark',
    layout: 'mix',
    contentWidth: 'Fluid',
    fixedHeader: true,
    fixSiderbar: true,
    splitMenus: false,
  },
  t2:{//mix_dark_splitMenus
    navTheme: 'dark',
    layout: 'mix',
    contentWidth: 'Fluid',
    fixedHeader: true,
    fixSiderbar: true,
    splitMenus: true,
  },
  t3:{//mix_realDark_not_splitMenus
    layout: "mix",
    navTheme: "realDark",
    contentWidth: "Fluid",
    fixedHeader: true,
    fixSiderbar: true,
    splitMenus: false,
  },
  t4:{ //top_realDark
    layout: "top",
    navTheme: "realDark",
    contentWidth: "Fluid",
    fixedHeader: true,
    splitMenus: false,
  },
  t5:{ //top_dark
    layout: "top",
    navTheme: "dark",
    contentWidth: "Fluid",
    fixedHeader: true,
    splitMenus: false,
  },
}

const Settings: LayoutSettings & {
  pwa?: boolean;
  logo?: string;
} = {
  // 拂晓蓝
  primaryColor: '#1890ff',

  ...themes[BUILD_THEME || 't1'],

  colorWeak: false,
  title: '我的测试平台',
  pwa: false,
  logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
  iconfontUrl: '',
};

export default Settings;

(3)修改config/config.ts

import defaultSettings from './defaultSettings';
import proxy from './proxy';
const { REACT_APP_ENV,BUILD_THEME } = process.env; 增加1 
export default defineConfig({
  hash: true,
  antd: {
    //暗黑模式
    dark: defaultSettings.navTheme == 'realDark',  //增加2
    //紧凑模式
    // compact: true,
  },
  outputPath: BUILD_THEME || 'dist',  //增加3

//......后面的忽略

第三步：配置nginx

location / {
          if ($request_filename ~ .*\.(htm|html)$){
            add_header Cache-Control "no-cache, no-store";
          }
          set $is_matched 0;
		  if ($cookie_admin_theme = "t1") {
            root   /home/test/html/admin/t1;
			set $is_matched 1;
		  }
		  if ($cookie_admin_theme = "t2") {
            root   /home/test/html/admin/t2;
			set $is_matched 1;
		  }
		  if ($cookie_admin_theme = "t3") {
            root   /home/test/html/admin/t3;
			set $is_matched 1;
		  }
		  if ($cookie_admin_theme = "t4") {
            root   /home/test/html/admin/t4;
			set $is_matched 1;
		  }
		  if ($cookie_admin_theme = "t5") {
            root   /home/test/html/admin/t5;
			set $is_matched 1;
		  }
          if ($is_matched = 0) {
            root   /home/test/html/admin/t1;
          }
          root   /home/test/html/admin;
          index  index.html index.htm;
          try_files $uri /index.html;
        }

第四步：在前端界面上增加一个功能(后端也可以)，
设置一个cookie:
key为admin_theme，值为：t1 或t2或t3或t4或t5
并JAVASCRIPT刷新页面：location.reload()

第五步：构建

构建第各主题的版本，并部署到nginx下

yarn run build:t1      

上传

yarn run build:t2      

yarn run build:t3      

yarn run build:t4      

yarn run build:t5      

这样就可以了