ztf-antdv-theme

主题插件

研发侧在项目中使用 npm 方式引入

1. 安装主题插件
pnpm install ztf-antdv-theme -S

2. 去掉项目中ant-design-vue的css引入文件
// @import 'ant-design-vue/dist/antd.less';

3. 引入主题样式文件 （按顺序： 全局样式文件 -> 公共主题样式文件 -> 自定义主题样式文件）
@import 'ztf-antdv-theme/dist/index.css';

4. 在项目index.html中初始化主题样式
<script type="text/javascript">
     const theme = window.localStorage.getItem('theme')
     document.body.className = theme === 'dark' ? 'dark' : 'dark-light'
</script>

5. 切换主题（给项目根目录增加主题类名（dark, dark-light, light））
const themeChange = (key: string) => {
  let theme = key || 'dark-light'
  window.localStorage.setItem('theme', theme)
  document.body.className = key || 'dark-light'
}