1.1.12 • Published 1 year ago
@eoss-design/theme-tools v1.1.12
@eoss-design/theme-tools
eoss-design换肤工具
安装
# 依赖安装
$ npm install @eoss-design/theme-tools
// or
$ yarn add @eoss-design/theme-tools引用
// npm
$ npm i @eoss-design/color --save
import { changeMode, handleSetThemeVar, handleColorLoad } from '@eoss-design/theme-tools';
// 浏览器
<script src="@eoss-design/color/lib/@eoss-design/theme-tools.js"></script>
<script>
window['@eoss-design/theme-tools'].changeMode('dark' , '#333333');
</script>使用
获取内置色系
import { handleGetDefaultColor } from '@eoss-design/theme-tools';
/**
* 获取内置色系
* @function themeTools#handleGetDefaultColor
* @example
* ```js
* const colorList = handleGetDefaultColor()
* console.log(colorList)
* >> [{key: color:'blue',color:'#1890ff'},{key:'gold',color:'#faad14'},...]
* ```
* @return {Array} 内置12个主色列表red|volcano|orange|gold|yellow|lime|green|cyan|blue|geekblue|purple|magenta
*/
const colorList = handleGetDefaultColor()
console.log(colorList)
// [ {key: color:'blue',color:'#1890ff'},{key:'gold',color:'#faad14'},...]设置项目主题全局变量
import { handleSetThemeVar } from '@eoss-design/theme-tools';
// 通过计算新的主题色系，将计算好的主题色系通过 <style theme-color='color'>标记放入全局:root以便使用
handleSetThemeVar(globalNewColor, mode, backgroundColor);风格模式切换
import { changeMode } from '@eoss-design/theme-tools';
/**
* 风格模式切换,切换theme-mode风格模式，然后通过<html theme-mode='dark'>切换全局变量
* @function themeTools#changeMode
* @param {String} mode - 风格模式light ｜ dark
* @param {String} backgroundColor - mode = dark时的页面背景颜色
* @return {null} document 新增<style theme-var="globalNewColor">
* //主题色色卡列表的css var变量
* <html theme-mode="light"></html>
* <style theme-var="globalNewColor">
* //主题色色卡列表的css var变量
* :root[theme-color='#0E91EF'][theme-mode='dark']{
* --brand-1:#e6f9ff;
* --brand-2:#b3e9ff;
* --brand-3:#8adaff;
* --brand-4:#61c8ff;
* --brand-5:#38b1fc;
* --brand-6:#0e91ef;
* --brand-7:#0270c9;
* --brand-8:#0054a3;
* --brand-9:#003c7d;
* --brand-10:#002757
* }
* </style>
*/
changeMode('dark' , '#333333');获取样式文件方法
import { handlerGetCSSString } from '@eoss-design/theme-tools';
const url = `http://git.wisesoft.net.cn/fe/element-ui/raw/commit/2d25eee89a2a7d7a8fb68f1014f6cefe01aaa5d3/lib/theme-chalk/index.css`;
/**
* 获取样式文件方法
* @function themeTools#handlerGetCSSString
* @param {String} url - element主题文件远端地址
* @return {Promise} element主题scss文件字符串
*/
handlerGetCSSString('url');获取色彩列表的方法
import { handlerGetThemeCluster } from '@eoss-design/theme-tools';
/**
* 获取色彩列表的方法
* @function themeTools#handlerGetThemeCluster
* @param {String} color - 主题色
* @param {String} mode - 风格模式light ｜ dark
* @param {String} backgroundColor - mode = dark时的页面背景颜色
*
* @example
* ```js
* handlerGetThemeCluster('#0e91ef','dark','#000000');
* ```
* @return {Array} ['#e6f9ff','#0e91ef',...]
*/
handlerGetThemeCluster('#0e91ef','dark','#000000')更新样式的方法
import { handleUpdateColor } from '@eoss-design/theme-tools';
/**
* 更新样式的方法
* @function themeTools#handleUpdateColor
* @param {String} chalk - element主题scss文件代码字符串
* @param {String} newCluster - 新的主题色系
* @param {String} oldCluster - 旧的主题色系
*
* @example
* ```js
* handleUpdateColor(chalkString,['#1890ff',...],['#bfbfbf',...])
* ```
* @return {String} 更新完主题颜色的element主题scss文件字符串
*/
handleUpdateColor(chalkString,['#1890ff',...],['#bfbfbf',...])色彩同步到页面
import { handleColorLoad } from '@eoss-design/theme-tools';
/**
* 色彩同步到页面
* @function themeTools#handleColorLoad
* @param {String} newVal - 新主题的
* @param {String} oldVal - 旧主题色
* @param {String} mode - 风格模式light ｜ dark
* @param {String} backgroundColor - mode = dark时的页面背景颜色
* @return {null} 通过将element-theme.scss文件色彩进行更新，更新完后再将字符串写入到<style id='chalk-style'>中,更新全局element到组件样式
*/
handleColorLoad('#1890ff','#bfbfbf','dark','#000000')