UNPKG

theme-class-generator

Version:

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

49 lines (43 loc) 1.5 kB
# theme-class-generator A function which can generate theme style classes from a simple config > Admin UI专用的主题样式类生成工具 ## 使用示例 ```js 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 文档 - 主题 章节