NUR

主题

主题定制 ​

NUR 使用 CSS Variables（CSS 自定义属性）构建主题系统。覆盖这些变量即可全局改变组件外观，无需修改组件源码或重写样式。

快速覆盖 ​

在你的全局 CSS 文件中覆盖变量：

css
:root {
  --my-color-primary: #ff6b35;
  --my-border-radius-base: 8px;
  --my-font-size-default: 16px;
}

所有使用这些变量的组件会自动应用新值。

暗色主题 ​

在 <html> 上添加 data-theme="dark" 属性，或为容器添加 .dark 类名：

html
<html data-theme="dark">
  <body>
    <!-- 所有组件自动切换为暗色主题 -->
  </body>
</html>
css
/* 自定义暗色主题变量 */
.dark {
  --my-bg-color: #1a1a2e;
  --my-bg-color-page: #16213e;
  --my-color-text-primary: #e0e0e0;
  --my-color-text-regular: #b0b0b0;
  --my-border-color-base: #333;
}

完整 Token 列表 ​

品牌色 ​

色值Token说明默认值
--my-color-primary主题色#409eff
--my-color-primary-light-3主题色 3 级浅色#79bbff
--my-color-primary-light-5主题色 5 级浅色#a0cfff
--my-color-primary-light-7主题色 7 级浅色#c6e2ff
--my-color-primary-light-9主题色 9 级浅色#ecf5ff
--my-color-primary-dark-2主题色深色#337ecc

功能色 ​

色值Token说明默认值
--my-color-success成功色#67c23a
--my-color-success-light-3成功色浅色#95d475
--my-color-success-light-5成功色浅色#b3e19d
--my-color-success-light-7成功色浅色#d1edc4
--my-color-success-light-9成功色浅色#f0f9eb
--my-color-warning警告色#e6a23c
--my-color-warning-light-3警告色浅色#eebe77
--my-color-warning-light-5警告色浅色#f3d19e
--my-color-warning-light-7警告色浅色#f8e3c5
--my-color-warning-light-9警告色浅色#fdf6ec
--my-color-danger危险色#f56c6c
--my-color-danger-light-3危险色浅色#f89898
--my-color-danger-light-5危险色浅色#fab6b6
--my-color-danger-light-7危险色浅色#fcd3d3
--my-color-danger-light-9危险色浅色#fef0f0
--my-color-info信息色#909399
--my-color-info-light-3信息色浅色#b1b3b8
--my-color-info-light-5信息色浅色#c8c9cc
--my-color-info-light-7信息色浅色#dedfe0
--my-color-info-light-9信息色浅色#f4f4f5

文字颜色 ​

色值Token说明默认值
--my-color-text-primary主要文字#303133
--my-color-text-regular常规文字#606266
--my-color-text-secondary次要文字#909399
--my-color-text-placeholder占位文字#c0c4cc
--my-color-text-disabled禁用文字#c0c4cc

边框 ​

色值Token说明默认值
--my-border-color-base基础边框色#dcdfe6
--my-border-color-light浅边框色#e4e7ed
--my-border-color-lighter更浅边框色#ebeef5
--my-border-color-extra-light极浅边框色#f2f6fc
--my-border-width-base边框宽度1px

背景 ​

色值Token说明默认值
--my-bg-color组件背景色#ffffff
--my-bg-color-page页面背景色#f2f3f5
--my-bg-color-overlay浮层背景色#ffffff

字号 ​

Token说明默认值
--my-font-size-extra-large特大号20px
--my-font-size-large大号16px
--my-font-size-default默认14px
--my-font-size-small小号12px

字重 ​

Token说明默认值
--my-font-weight-primary主要字重500
--my-font-weight-normal正常字重400
--my-font-weight-bold加粗字重700

字体族 ​

Token说明默认值
--my-font-family默认字体'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif
--my-font-family-code代码字体Menlo, Monaco, Consolas, 'Courier New', monospace
--my-line-height-base基础行高1.5

间距 ​

Token说明默认值
--my-spacing-extra-large超大间距24px
--my-spacing-large大间距16px
--my-spacing-default默认间距12px
--my-spacing-small小间距8px
--my-spacing-extra-small超小间距4px

圆角 ​

Token说明默认值
--my-border-radius-base基础圆角18px
--my-border-radius-small小圆角10px
--my-border-radius-round胶囊圆角999px
--my-border-radius-circle正圆50%

阴影 ​

Token说明默认值
--my-box-shadow-base基础阴影0px 2px 4px rgba(0,0,0,0.12), 0px 0px 6px rgba(0,0,0,0.04)
--my-box-shadow-light浅阴影0px 2px 12px 1px rgba(0,0,0,0.1)
--my-box-shadow-lighter更浅阴影0px 2px 12px 1px rgba(0,0,0,0.06)
--my-box-shadow-dark深阴影0px 2px 4px rgba(0,0,0,0.12), 0px 0px 6px rgba(0,0,0,0.12)

运行时切换主题 ​

ts
// 切换暗色主题
document.documentElement.setAttribute('data-theme', 'dark')

// 切换亮色主题
document.documentElement.removeAttribute('data-theme')

// 动态修改某个 token
document.documentElement.style.setProperty('--my-color-primary', '#ff6b35')