Install
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 文档 - 主题 章节