devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

element如何动态切换主题(vite+vue+ts+elementPlus)_element plus 主题 :root

作者：繁依Fanyi0 | 2024-03-29 00:08:42

赞

踩

element plus 主题 :root

前言

提示：动态切换主题使用的是css3的var函数现实

示例：切换--main-bg-color的值,使用<div style="--main-bg-color:red"> </div> 那么当前标签下的所有节点使用到当前变量的都会发生变化

  1. :root {
  2.   --main-bg-color: coral;
  3. }
  4.  
  5. #div1 {
  6.   background-color: var(--main-bg-color);
  7. }
  8.  
  9. #div2 {
  10.   background-color: var(--main-bg-color);
  11. }

一、elementui css变量都有哪些

 通过浏览器检查,发现element ui库的变量

二、如何修改这些变量

提示: 众所周知css是从上往下执行,如果我们可以在hand标签里最后一个添加一个style标签,是不是就可以重写掉element ui的变量

1.添加在head标签里面添加style标签(在main.ts添加如下代码)

代码如下（示例）：

 

代码如下: 
 

  1. const style = document.createElement("style");
  2. style.innerText = ":root{--el-color-primary:red}";
  3. document.head.appendChild(style);
 

可以发现elementui的主色调已经被我们替换为红色
 

三、如何动态修改颜色
 

 前言: 
 

  1. 查看element.sass源码可以发现,一个primary样式,可以生成多个渐变色 
    1. $types: primary, success, warning, danger, error, info;
    2. @each $type in $types {
    3.   @for $i from 1 through 9 {
    4.     @include set-color-mix-level($type, $i, 'light', $color-white);
    5.   }
    6. }
    7.  
    8. // --el-color-primary-dark-2
    9. @each $type in $types {
    10.   @include set-color-mix-level($type, 2, 'dark', $color-black);
    11. }
     
 

不难发现 --el-color-primary-dark-2变量 是当前primary颜色跟黑色混和百分之20生成的颜色
 

所以设置一个primary的颜色会生成会生成1-9的和白色混的渐变色,生产一个百分之20的和黑色混的颜色
 

那么我们的变量就分为俩种:
 

  推断类型: 通过一个主色调变量,生成n个渐变色
 

  键值类型：一个变量对应一个值 
 

直接上代码
 

定义数据类型
 

  1. interface ThemeSetting {
  2.   /**
  3.    *element-ui Namespace
  4.    */
  5.   namespace: string;
  6.   /**
  7.    * 数据分隔符
  8.    */
  9.   division: string;
  10.   /**
  11.    * 前缀
  12.    */
  13.   startDivision: string;
  14.   /**
  15.    * 颜色外推设置
  16.    */
  17.   colorInferSetting: ColorInferSetting;
  18. }
  19.  
  20. /**
  21.  * 颜色混和设置
  22.  */
  23. interface ColorInferSetting {
  24.   /**
  25.    * 与白色混
  26.    */
  27.   light: Array<number>;
  28.   /**
  29.    * 与黑色混
  30.    */
  31.   dark: Array<number>;
  32.   /**
  33.    * 类型
  34.    */
  35.   type: string;
  36. }
  37.  
  38. /**
  39.  * 平滑数据
  40.  */
  41. interface KeyValueData {
  42.   [propName: string]: string;
  43. }
  44. type UpdateInferData = KeyValueData;
  45.  
  46. type UpdateKeyValueData = KeyValueData;
  47. /**
  48.  *平滑数据
  49.  */
  50. interface InferData {
  51.   /**
  52.    * 设置
  53.    */
  54.   setting?: ColorInferSetting | any;
  55.   /**
  56.    * 健
  57.    */
  58.   key: string;
  59.   /**
  60.    * 值
  61.    */
  62.   value: string;
  63. }
  64.  
  65. export type {
  66.   KeyValueData,
  67.   InferData,
  68.   ThemeSetting,
  69.   UpdateInferData,
  70.   UpdateKeyValueData,
  71. };
 

定义配置数据
 

  1. import type { ThemeSetting } from "./type";
  2. const setting: ThemeSetting = {
  3.   namespace: "el",
  4.   division: "-",
  5.   startDivision: "--",
  6.   colorInferSetting: {
  7.     light: [3, 5, 7, 8, 9],
  8.     dark: [2],
  9.     type: "color",
  10.   },
  11. };
  12. export default setting;
 

定义默认推断数据
 

  1. import type { InferData } from "./type";
  2. const inferDatas: Array<InferData> = [];
  3. export default inferDatas;
 

定义默认键值数据
 

  1. import type { KeyValueData } from "./type";
  2. const keyValueData: KeyValueData = {
  3.   "menu-item-height": "56px",
  4. };
  5. export default keyValueData;
 

编写动态修改主题代码
 

  1. import type {
  2.   ThemeSetting,
  3.   InferData,
  4.   KeyValueData,
  5.   UpdateInferData,
  6.   UpdateKeyValueData,
  7. } from "./type";
  8. import tinycolor from "@ctrl/tinycolor";
  9.  
  10. declare global {
  11.   interface ChildNode {
  12.     innerText: string;
  13.   }
  14. }
  15. class Theme {
  16.   /**
  17.    * 主题设置
  18.    */
  19.   themeSetting: ThemeSetting;
  20.   /**
  21.    * 键值数据
  22.    */
  23.   keyValue: KeyValueData;
  24.   /**
  25.    * 外推数据
  26.    */
  27.   inferDatas: Array<InferData>;
  28.   /**
  29.    *是否是第一次初始化
  30.    */
  31.   isFirstWriteStyle: boolean;
  32.   /**
  33.    * 混色白
  34.    */
  35.   colorWhite: string;
  36.   /**
  37.    * 混色黑
  38.    */
  39.   colorBlack: string;
  40.  
  41.   constructor(
  42.     themeSetting: ThemeSetting,
  43.     keyValue: KeyValueData,
  44.     inferDatas: Array<InferData>
  45.   ) {
  46.     this.themeSetting = themeSetting;
  47.     this.keyValue = keyValue;
  48.     this.inferDatas = inferDatas;
  49.     this.isFirstWriteStyle = true;
  50.     this.colorWhite = "#ffffff";
  51.     this.colorBlack = "#000000";
  52.   }
  53.  
  54.   /**
  55.    * 拼接
  56.    * @param setting 主题设置
  57.    * @param names   需要拼接的所有值
  58.    * @returns       拼接后的数据
  59.    */
  60.   getVarName = (setting: ThemeSetting, ...names: Array<string>) => {
  61.     return (
  62.       setting.startDivision +
  63.       setting.namespace +
  64.       setting.division +
  65.       names.join(setting.division)
  66.     );
  67.   };
  68.  
  69.   /**
  70.    * 转换外推数据
  71.    * @param setting      主题设置对象
  72.    * @param inferData    外推数据
  73.    * @returns
  74.    */
  75.   mapInferMainStyle = (setting: ThemeSetting, inferData: InferData) => {
  76.     const key: string = this.getVarName(
  77.       setting,
  78.       inferData.setting
  79.         ? inferData.setting.type
  80.         : setting.colorInferSetting.type,
  81.       inferData.key
  82.     );
  83.     return {
  84.       [key]: inferData.value,
  85.       ...this.mapInferDataStyle(setting, inferData),
  86.     };
  87.   };
  88.   /**
  89.    * 转换外推数据
  90.    * @param setting    设置
  91.    * @param inferDatas 外推数据
  92.    */
  93.   mapInferData = (setting: ThemeSetting, inferDatas: Array<InferData>) => {
  94.     return inferDatas
  95.       .map((itemData) => {
  96.         return this.mapInferMainStyle(setting, itemData);
  97.       })
  98.       .reduce((pre, next) => {
  99.         return { ...pre, ...next };
  100.       }, {});
  101.   };
  102.   /**
  103.    * 转换外推数据
  104.    * @param setting      主题设置对象
  105.    * @param inferData    外推数据
  106.    * @returns
  107.    */
  108.   mapInferDataStyle = (setting: ThemeSetting, inferData: InferData) => {
  109.     const inferSetting = inferData.setting
  110.       ? inferData.setting
  111.       : setting.colorInferSetting;
  112.     if (inferSetting.type === "color") {
  113.       return Object.keys(inferSetting)
  114.         .map((key: string) => {
  115.           if (key === "light" || key === "dark") {
  116.             return inferSetting[key]
  117.               .map((l) => {
  118.                 const varName = this.getVarName(
  119.                   setting,
  120.                   inferSetting.type,
  121.                   inferData.key,
  122.                   key,
  123.                   l.toString()
  124.                 );
  125.                 return {
  126.                   [varName]: tinycolor(inferData.value)
  127.                     .mix(
  128.                       key === "light" ? this.colorWhite : this.colorBlack,
  129.                       l * 10
  130.                     )
  131.                     .toHexString(),
  132.                 };
  133.               })
  134.               .reduce((pre, next) => {
  135.                 return { ...pre, ...next };
  136.               }, {});
  137.           }
  138.           return {};
  139.         })
  140.         .reduce((pre, next) => {
  141.           return { ...pre, ...next };
  142.         }, {});
  143.     }
  144.     return {};
  145.   };
  146.  
  147.   /**
  148.    *
  149.    * @param themeSetting 主题设置
  150.    * @param keyValueData 键值数据
  151.    * @returns            映射后的键值数据
  152.    */
  153.   mapKeyValue = (themeSetting: ThemeSetting, keyValueData: KeyValueData) => {
  154.     return Object.keys(keyValueData)
  155.       .map((key: string) => {
  156.         return {
  157.           [this.updateKeyBySetting(key, themeSetting)]: keyValueData[key],
  158.         };
  159.       })
  160.       .reduce((pre, next) => {
  161.         return { ...pre, ...next };
  162.       }, {});
  163.   };
  164.   /**
  165.    * 根据配置文件修改Key
  166.    * @param key          key
  167.    * @param themeSetting 主题设置
  168.    * @returns
  169.    */
  170.   updateKeyBySetting = (key: string, themeSetting: ThemeSetting) => {
  171.     return key.startsWith(themeSetting.startDivision)
  172.       ? key
  173.       : key.startsWith(themeSetting.namespace)
  174.       ? themeSetting.startDivision + key
  175.       : key.startsWith(themeSetting.division)
  176.       ? themeSetting.startDivision + themeSetting.namespace
  177.       : themeSetting.startDivision +
  178.         themeSetting.namespace +
  179.         themeSetting.division +
  180.         key;
  181.   };
  182.   /**
  183.    *
  184.    * @param setting    主题设置
  185.    * @param keyValue   主题键值对数据
  186.    * @param inferDatas 外推数据
  187.    * @returns 合并后的键值对数据
  188.    */
  189.   tokeyValueStyle = () => {
  190.     return {
  191.       ...this.mapInferData(this.themeSetting, this.inferDatas),
  192.       ...this.mapKeyValue(this.themeSetting, this.keyValue),
  193.     };
  194.   };
  195.  
  196.   /**
  197.    * 将keyValue对象转换为S
  198.    * @param keyValue
  199.    * @returns
  200.    */
  201.   toString = (keyValue: KeyValueData) => {
  202.     const inner = Object.keys(keyValue)
  203.       .map((key: string) => {
  204.         return key + ":" + keyValue[key] + ";";
  205.       })
  206.       .join("");
  207.     return `@charset "UTF-8";:root{${inner}}`;
  208.   };
  209.  
  210.   /**
  211.    *
  212.    * @param elNewStyle 新的变量样式
  213.    */
  214.   writeNewStyle = (elNewStyle: string) => {
  215.     if (this.isFirstWriteStyle) {
  216.       const style = document.createElement("style");
  217.       style.innerText = elNewStyle;
  218.       document.head.appendChild(style);
  219.       this.isFirstWriteStyle = false;
  220.     } else {
  221.       if (document.head.lastChild) {
  222.         document.head.lastChild.innerText = elNewStyle;
  223.       }
  224.     }
  225.   };
  226.  
  227.   /**
  228.    * 修改数据并且写入dom
  229.    * @param updateInferData   平滑数据修改
  230.    * @param updateKeyvalueData keyValue数据修改
  231.    */
  232.   updateWrite = (
  233.     updateInferData?: UpdateInferData,
  234.     updateKeyvalueData?: UpdateKeyValueData
  235.   ) => {
  236.     this.update(updateInferData, updateKeyvalueData);
  237.     const newStyle = this.tokeyValueStyle();
  238.     const newStyleString = this.toString(newStyle);
  239.     this.writeNewStyle(newStyleString);
  240.   };
  241.  
  242.   /**
  243.    * 修改数据
  244.    * @param inferData
  245.    * @param keyvalueData
  246.    */
  247.   update = (
  248.     updateInferData?: UpdateInferData,
  249.     updateKeyvalueData?: UpdateKeyValueData
  250.   ) => {
  251.     if (updateInferData) {
  252.       this.updateInferData(updateInferData);
  253.     }
  254.     if (updateKeyvalueData) {
  255.       this.updateOrCreateKeyValueData(updateKeyvalueData);
  256.     }
  257.   };
  258.  
  259.   /**
  260.    * 修改外推数据 外推数据只能修改,不能新增
  261.    * @param inferData
  262.    */
  263.   updateInferData = (updateInferData: UpdateInferData) => {
  264.     Object.keys(updateInferData).forEach((key) => {
  265.       const findInfer = this.inferDatas.find((itemInfer) => {
  266.         return itemInfer.key === key;
  267.       });
  268.       if (findInfer) {
  269.         findInfer.value = updateInferData[key];
  270.       } else {
  271.         this.inferDatas.push({ key, value: updateInferData[key] });
  272.       }
  273.     });
  274.   };
  275.  
  276.   /**
  277.    * 修改KeyValue数据
  278.    * @param keyvalueData keyValue数据
  279.    */
  280.   updateOrCreateKeyValueData = (updateKeyvalueData: UpdateKeyValueData) => {
  281.     Object.keys(updateKeyvalueData).forEach((key) => {
  282.       const newKey = this.updateKeyBySetting(key, this.themeSetting);
  283.       this.keyValue[newKey] = updateKeyvalueData[newKey];
  284.     });
  285.   };
  286. }
  287.  
  288. export default Theme;
 

使用
 

  1. // 引入主题对象
  2. import Theme from "./theme";
  3. // 引入默认推断数据
  4. import inferDatas from "./theme/inferDatas";
  5. // 引入默认keyValue数据
  6. import keyValueData from "./theme/keyValueData";
  7. // 引入设置对象
  8. import setting from "./theme/setting";
  9. const app = createApp(App);
  10. // 创建主题对象
  11. const theme = new Theme(setting, keyValueData, inferDatas);
  12. // 将主题对象放到全局变量中
  13. app.config.globalProperties.theme = theme;
 

其他组件使用
 

  1. import { reactive, getCurrentInstance } from "vue";
  2. import type { ComponentInternalInstance } from "vue";
  3. const { appContext } = getCurrentInstance() as ComponentInternalInstance;
  4. const theme = appContext.config.globalProperties.theme;
  5. theme.updateWrite({ primary: form.themeColor });
 

 

API
 

- 修改推断数据
 

  1. theme.updateWrite({
  2.     primary: "#409eff",
  3.     success: "#67c23a",
  4.     warning: "#e6a23c",
  5.     danger: "#f56c6c",
  6.     error: "#f56c6c",
  7.     info: "#909399",
  8.   });
 

- 修改键值类型数据 
 

  1. theme.updateWrite(undefined, {
  2.     "--el-menu-active-color": "red",
  3.     "--el-menu-bg-color": "pink",
  4.     "--el-menu-item-height": "22px",
  5.   });
 

- 一起修改
 

  1. theme.updateWrite(
  2.     {
  3.       primary: "#409eff",
  4.       success: "#67c23a",
  5.       warning: "#e6a23c",
  6.       danger: "#f56c6c",
  7.       error: "#f56c6c",
  8.       info: "#909399",
  9.     },
  10.     {
  11.       "--el-menu-active-color": "red",
  12.       "--el-menu-bg-color": "pink",
  13.       "--el-menu-item-height": "22px",
  14.     }
  15.   );
 

 

总结:
 

  主题数据可以存储在数据库中,通过接口查询后调用函数修改即可完成动态主题

                

        
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/332427
推荐阅读
相关标签
Copyright ©  2003-2013 www.wpsshop.cn  版权所有，并保留所有权利。

  
闽ICP备14008679号