theme-class-generator

theme-class-generator

A function which can generate theme style classes from a simple config

Admin UI专用的主题样式类生成工具

使用示例

let classes = themeClassGenerator({
  theme: {
    colors: { // 彩色配置，默认配置如下
      primary: '#1c86e2',
      info: '#68217a',
      warning: '#f5ae08',
      danger: '#ea3a46',
      success: '#0cb470',
      'custom-color': '#f00'
    },
    shadows: { // 阴影配置，默认配置如下
      primary: '2px 2px 4px #1c86e2',
      info: '2px 2px 4px #68217a',
      warning: '2px 2px 4px #f5ae08',
      danger: '2px 2px 4px #ea3a46',
      success: '2px 2px 4px #0cb470',
      'custom-shadow': '3px 3px 6px #00f'
    },
    radiuses: {
      small: '3px',
      large: '5px'
      'custom-radius': '13px'
    }
  },
  prefix: 'au-theme', // 样式类的前缀
  lightnessReverse: false, // 反转lightness排序（黑白主题）
  colorTopBottom: 10, // top和bottom颜色距离纯黑和纯白的lightness的距离，越小越接近纯黑纯白
  colorUpDown: 10, // 彩色上下接近色与正色的lightness距离
  baseColorLevel: 12, // 无彩色分级数量
  baseColorHue: 10%, // 无彩色饱和度
  baseShadowOpacity: 0.2, // 无彩色阴影不透明度
  colorShadowOpacity: 0.6 // 彩色阴影不透明度
})
let style = document.createElement('style')
style.innerHTML = classes
document.getElementsByTagName('head')[0].appendChild(style)

具体使用详见Admin UI 文档 - 主题 章节