NaiveUI 主题样式配置管理

使用

• package.json 添加配置项："type": "module"
• ApplyTheme 方法返回的对象传递给 n-config-provider 组件的 theme-overrides 属性

方法

ApplyTheme

import { ApplyTheme } from '@muops/theme-naive'
// 预设了 blue green 两种主题，可以通过 MixinTheme 扩展更多，如果传入了未定义的主题，则返回 null
ApplyTheme('blue')

// 临时扩展主题，参数都可选
import THEME from 'theme.json'
// inline 方式引入 css 以免被插入到 DOM 当中
import STYLE from 'style.styl?inline'
ApplyTheme('blue', THEME, STYLE)

MixinTheme

import { MixinTheme, ApplyTheme } from '@muops/theme-naive'

import THEME from 'theme.json'
import STYLE from 'style.styl?inline'
// 混合新的主题，或者扩展原有主题，扩展后会覆盖原主题配置
MixinTheme('red', THEME, STYLE)
MixinTheme('blue', THEME, STYLE)

// 混合后不会应用主题，需要手动进行应用
ApplyTheme('red')
ApplyTheme('blue')

维护

• 参照下方的文件结构修改对应部分的样式与配置
• 新增主题配置时需要修改 index.js，参照已有主题进行新增配置

.
├─ dist，构建结果目录，实际使用的文件
│
├─ fonts，字体文件目录
│  └─ source_hans_regular，思源黑
│
├─ style，基础样式目录
│  ├─ index.styl，通用工具样式
│  ├─ mobile.json，naive-ui 的移动端变量配置
│  ├─ naive.styl，naive-ui 的样式调整
│  ├─ theme.json，naive-ui 的变量配置
│  └─ theme.styl，涉及主题的公共样式部分
│
├─ theme，主题样式目录，内容以主题命名，两个一组构成配置
│  ├─ [color].json，主题变量配置
│  └─ [color].styl，主题样式调整，不便通过变量控制的样式覆盖部分
│
├─ index.js，主题配置部分
└─ utils.js，主题管理逻辑

发布

npm i nrm -g   # 通过 nrm 管理源
nrm use npm    # 使用 npm 源
npm login      # 首次使用需要先登录 npm 帐号
npm run build  # 构建生产版本
npm publish    # 每次推送前须在 package.json 中更新版本号