VUE 切换皮肤切换主题切换CSS

排码的小拇指

已于 2023-12-26 16:27:30 修改

阅读量904

点赞数 10

文章标签： vue.js css 前端

于 2023-12-26 15:55:48 首次发布

本文链接：https://blog.csdn.net/qq_39186695/article/details/135223754

版权

VUE 切换皮肤切换CSS 方便维护

第一种原生html切换
第二种vue项目配合element-plus和css实现主题切换
- - css自定义属性讲解
  - 在style文件夹下创建skin.css
第三种原生配合element-plus 分文件管理，细节样式较多的推荐
- - index.Vue 立引入默认样式
  - ### 切换不同样式

第一种原生html切换

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="referrer" content="always" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link id="test" rel="Stylesheet" type="text/css" href="default.css" />
</head>
<body>
    <div class="divColor"></div><br />
    <input type="button" value="按钮颜色" class="btnColor" /><br /><br />
    
    <input type="button" value="绿色" onclick="setColor('green')" />
    <input type="button" value="红色" onclick="setColor('red')" />
    <input type="button" value="默认" onclick="setColor('default')" />
    <script>
        function setColor(color){
            document.getElementById("test").setAttribute("href", color + ".css")
        }
    </script>
</body>
</html>

red.css

.divColor{
    background-color:#f00;
    width:200px;
    height:200px;
}

.btnColor{
    background-color:#f00;
    border-color:#f00;
    color:#fff;
}

green.css

.divColor{
    background-color:#0f0;
    width:200px;
    height:200px;
}

.btnColor{
    background-color:#0f0;
    border-color:#0f0;
    color:#fff;
}

red.css

.divColor{
    background-color:#f00;
    width:200px;
    height:200px;
}

.btnColor{
    background-color:#f00;
    border-color:#f00;
    color:#fff;
}

第二种vue项目配合element-plus和css实现主题切换

css自定义属性讲解

以 – 开头的属性，另外 scss 是以 $ 开头，less 是以 @ 开头
定义后通过 var() 使用变量
在 :root选择器中定义，可以作用于全局文档中的所有元素

在style文件夹下创建skin.css

/* 默认dark主题 */
:root[theme='dark'] {
  --bg-color: #0d1117;
  --text-color: #f0f6fc;
}
 
 
 
/* light主题 */
:root[theme='light'] {
  --bg-color: #ecf0f3;
  --text-color: #181818;
}

然后在main.ts中引入
在这里插入图片描述
在index.css或者vue文件中可以使用var变量引用上面的主题颜色：例如我在skin.scss中定义这个背景色，在common.scsss中使用

通过js控制切换主题
通过 switch 标签的 change 事件切换
document.documentElement 引用文档的根元素 DOM，即元素
通过添加和移除 theme 属性达到切换 css 的目的，或者切换属性值

// 切换主题
const chageTheme = (val: Boolean) => {
    if (!val) {
        document.documentElement.setAttribute('theme', 'light')
    } else {
        document.documentElement.setAttribute('theme', 'dark')
    }
}

第三种原生配合element-plus 分文件管理，细节样式较多的推荐

index.Vue 立引入默认样式

<link id="test" rel="Stylesheet" type="text/css" href="dark.css" />

### 切换不同样式

    <el-form-item label="换肤">
      <el-select
        v-model="formList.region"
        placeholder="请选择"
        @change="chageTheme"
      >
        <el-option label="1" value="dark" />
        <el-option label="2" value="light" />
        <el-option label="2" value="green" />
      </el-select>
    </el-form-item>

JS切换主题

// 切换主题
const chageTheme = (val) => {

     document.getElementById("test").setAttribute("href", color + ".css")

}

dark.css 细节举例

@charset "UTF-8";
/* 深色 */
:root {
  --menuUnActive: #001529; /*菜单组件未选中的背景色*/
  --headBorderColor: #00284d; /*头组件下边框色*/
  --bgPlatNameColor: #00284d; /*平台名称背景色*/
  --deviceNameColor: #00d6d9; /*设备名称色*/
  --titleColor: #fff; /*组件名称色*/
  --bgColor: rgb(0, 14, 28); /*内容块背景*/
  --bgTitleColor: #00284d; /*组件标题背景*/
  --keyFontColor: #fff; /*普通文字色 key*/
  --hoverColor: #00d6d9; /*悬浮字色*/
  --selectOpColor: #ffffff; /*选项文字色*/
  --selectActiveColor: #ffffff; /*选中文字高亮色*/
  --selectActiveBgColor: rgba(43, 234, 249, 0.3); /*选中文字背景高亮色*/
  --selectUnActiveBgColor: rgba(0, 40, 77, 0.6); /*未选中文字背景高亮色*/
  --borderColor: solid 1px #00284d; /*边框色*/
  --selectBorderColor: solid 1px #00d6d9; /*下拉框边框色*/
  --btnBgColor: #00284d; /*按钮背景色*/
  --menuColor: #fff; /*菜单未选中字色*/
  /* PCS+电池 */
  --selectbackgroundColor: #011635; /*下拉背景框色*/
  --selectFontColor: #fff; /*下拉文字框色*/
  --toolbuttonFontColor: #fff; /* 参数配置  查看 文字颜色*/
  --toolborderbottom: rgba(43, 150, 249, 0.2); /*组件间隔线 */
  --toolPopupcloseColor: #d9fcfe; /*关闭按钮颜色*/
  --toolPopupcloseFnotColor: #d9fcfe; /*关闭按钮文字颜色*/
  --toolPopuptitleColor: rgba(0, 21, 41, 0.3); /*弹窗标题背景颜色*/
  --toolTitleBoxFontColor: #00d6d9; /*回路-单元-设备 背景文字颜色*/
  --ZJshowValueFontBGColor: #00d6d9; /*showValue文字颜色 带蓝色背景*/
  /* 蓝背景转白背景 组件色块颜色*/
  --commpanyzjbiaotiBG: #00284d;
  --cancelbuttonFontColor: #fff; /* 弹窗取消按钮文字*/
  --confirmbuttonFontColor: #ffffff; /* 弹窗确认按键文字*/
  --ZJBatteryitemConten: #001a32; /*电池单体普通单体内容  */
  --ZJBatteryitemTitle: rgba(0, 32, 61, 0.4); /*电池单体普通单体头部 */
  --ZJBatteryTSitemTitle: rgba(0, 32, 61, 0.4); /* 电池单体普通单体内容*/
  --ZJBatteryTSitemTitleFont: #f9c12b; /* 电池单体普通单体内容*/
  --ZJInputBG: #fff; /* 输入框背景*/
  --ZJInputFnotColor: #fff; /* 输入框文字颜色*/
  --ZJSetupConfigButFnotColor: #fff; /* 电站参数设置按钮文字颜色*/
  --ZJCHead1Icon: #ffffff; /* 页头组件IOCN颜色*/
  /***************** 电站*********************** */
  --powerStationColor: #00d6d9;
  /* 文字颜色 */
  --ZJEE6TitleBGColor: #00284d;
  /* 回路标题背景颜色 */
  --ZJEE6TitleColor: #fff;
  /* 回路统计内容背景色 */
  --ZJEE6ContentColor: #001d37;
  /* 回路标题颜色 */
  --ZJFF3SwiperColor: rgb(2, 34, 67);
  /* 轮播图颜色 */
  --ZJFF2ContentItemBG: rgb(0, 29, 55, 0.4);
  /* 每行背景色 odd*/
  --ZJFF2ContentItemBGeven: rgb(0, 29, 55);
  /* 每行背景色 even*/

  --batteryPackTopBG: #00284d;
  /* 电池包头部背景色 */
  --ZJEE9TextColor1: rgb(43, 234, 249);
  /* 回路统计文字颜色 */
  --ZJEE9TextColor2: rgb(25, 239, 155);
  /* 回路统计文字颜色 */
  /***************** 表格*********************** */

  --tableOddBG: rgba(0, 40, 77, 0.2); /* 表格odd背景色 */
  --tableEvenBG: rgba(0, 36, 70, 1); /* 表格even背景色 */
  --tableBorderBG: #00284d; /* 表格边框背景色 */
  /*后台控件样式end*/

  --analysisTextColor: #fff; /* 分析页面文字颜色 */
  --calendar-icon: rgba(43, 234, 249, 0.3); /* 日历icon */
  --calendarContent: #001428; /* 日历内容颜色 */

  --calendarSelectRGB: rgba(68, 253, 255, 0.3); /* 日历选中中间通明色 */
  --zhuiyiTitleBG: #001428; /* 表格标题背景色 */
  --footerBG: rgb(0, 40, 76); /* 网站footer背景颜色 */
  /***************** 缺省页*********************** */
  --noDataColor: #ffffff;
  /*后台控件样式begin*/
  --backsystem-inputColor: #001a32; /*后台输入框选中背景色*/
  --backsystem-inputFocus: #f9c12b;
  --backsystem-bgColor: rgba(0, 202, 255, 0.1); /*背景色*/
  --backsystem-fontColor: #fff;
  --backsystem-trHoverColor: rgba(68, 253, 255, 0.3); /*表格行选中背景色*/
  --backsystem-dropdownHoverColor: #00d6d9; /* 下拉框悬浮色 */
  --backsystem-dropdownSearchBgColor: rgb(1, 22, 53); /*下拉框搜索框背景色*/
  --backsystem-popheaderBgColor: rgb(0, 34, 66);
  --backsystem-popcontentBgColor: rgb(0, 21, 41);
  --backsystem-CancelColor: #fff;
  --backsystem-editPageTitleFont: #fff; /*编辑页标题字体颜色*/
  --backsystem-cardheader: rgba(0, 0, 0, 0.03); /*卡片头背景色*/
  /*后台控件样式end*/

  /* 电站参数配置 loopData_list右侧蓝色底 */
  --commpanyloopDataBG: rgba(43, 234, 249, 0.2);
  /* 一直是白色的 */
  --commpanySeleccolorwhite: #fff;
  /* 公司首页 */

  --commpanyMainLine: rgb(43, 150, 249, 0.1); /* 下划线颜色 */
  /* 枚举值 */
  --BE000: #00d6d9;
  --BE001: #f9c12b;
  --BE002: #f92b48;
  --BE003: #f9c12b;
  --BE004: #f9c12b;
  --BE007: #9c9c9c;
  --BE008: #00d6d9;
  --BE010: #00d6d9;
  --BE013: #00d6d9;
  --BE014: #00d6d9;
  --BE015: #00d6d9;
  --BE016: #00d6d9;
  --BE017: #00d6d9;
  --BE018: #00d6d9;
  --BE019: #f92b48;
  --BE020: #f9c12b;
  --BE027: #00d6d9;
  --BE028: #00d6d9;
  --BE029: #15db0f;
  --BE030: #f92b48;
  --BE032: #f92b48;
  --BE033: #15db0f;
  --BE036: #00d6d9;
  --BE037: #9c9c9c;
  --BE038: #00d6d9;
  --BE039: #9c9c9c;
  --BE040: #00d6d9;
  --BE041: #f92b48;
  --BE042: #f92b48;
  --BE043: #00d6d9;
  --BE045: #00d6d9;
  --BE046: #00d6d9;
  --BE047: #00d6d9;
  --BE048: #00d6d9;
  --BE049: #f9c12b;
  --BE050: #00d6d9;
  --BE051: #00d6d9;
  --BE052: #00d6d9;
  --BE053: #f9c12b;
  --BE054: #f9c12b;
  --BE055: #00d6d9;
  --BE056: #00d6d9;
  --BE057: #9c9c9c;
  --BE059: #00d6d9;
  --BE060: #00d6d9;
  --BE062: #00d6d9;
  --BE067: #f92b48;
  --BE068: #00d6d9;
  --BE069: #f9c12b;
  --BE071: #00d6d9;
  --BE082: #00d6d9;
  --BE085: #f9c12b;
  --BE086: #00d6d9;
  --BE089: #00d6d9;
  --BE090: #00d6d9;
  --BE091: #00d6d9;
  --BE092: #00d6d9;
  --BE093: #00d6d9;
  --BE094: #00d6d9;
  --BE095: #00d6d9;
  --BE096: #00d6d9;
  --BE097: #00d6d9;
  --BE098: #00d6d9;
  --BE099: #00d6d9;
  --BE100: #00d6d9;
  --BE103: #00d6d9;
  --BE104: #00d6d9;
  --BE105: #00d6d9;

  --BE074: #00d6d9;
  --BE075: #f9c12b;
  --BE076: #f92b48;

  /* 整理后 */
  --backsystem-CancelBorderColor: rgb(0, 40, 77);
  --backsystem-popBtnOkColor: -webkit-linear-gradient(top, #1df8fc, #00bcff);
  --backsystem-popBtnCancelColor: -webkit-linear-gradient(
    top,
    #1df8fc,
    #00bcff
  );
  --backsystem-btnBgColor: -webkit-linear-gradient(
    top,
    #1df8fc,
    #00bcff
  ); /*按钮背景色*/
  --backsystem-popreasonBorderColor: #ffffff;
  --toolscrollbarColorA: #011635; /*滚动条颜色 1*/
  --toolscrollbarColorB: rgba(0, 0, 0, 0.3); /*滚动条颜色 2*/
  --toolscrollbarColorC: #000b1b; /*滚动条颜色 3*/
  --toolscrollbarColorD: #00eaff; /*滚动条颜色 4*/
  --menuUlBgColor: #001529; /*二级菜单背景*/
  /* 不变的颜色 */
  /* 弹窗遮罩层 */
  --commonnPopupCoverColor: rgba(9, 9, 10, 0.9);
  --EMS_Font_color_white: #ffffff;
  --EMS_Font_color_blue: #13e3fd;
  --EMS_background_color_blue: #001a32;
  --EMS_background_color_Wrong: #001a32;
  --ZJSetupConfigFnotColor: #00d6d9; /* 电站参数设置文字颜色*/
  --modal_input_border_color: #00d6d9;
  /* 合并部分 */
  --commonbgColor: #001529;


  --commonTitleColor: #001529;

  --commonTitleBG: #00284d;

  /*平台名称色*/
  /*组件标题背景*/
  /*悬浮背景色*/
  /*蓝色背景渐变框 ——参考传感器*/
  /* 电池包hover颜色 */
  /* 表格标题背景色 */
  /* 下拉框选中颜色 */
  /* 后台详情按钮颜色 */
  --commonvalFontColor: #00d6d9;

  /*公司名称色*/
  /*文字主色 value*/
  /* 参数配置  查看 背景*/
  /*showValue文字颜色*/
  /* 弹窗取消按钮边线*/
  /* 弹窗确认按键背景*/
  /* 页头组件平台名颜色*/
  /* 下拉框边线 */
  /* 日历选中内容颜色 */
  /* tab标签背景色 输入框边框背景色 */
  /* 下拉框边框色 */

  --commonPopupBgColor: #00284d;

  /*菜单未选中背景*/
  /*弹窗内容背景颜色*/
  /* 弹窗取消按钮背景*/
  /*弹窗内容背景颜色*/
  /* 弹窗内容 */
  /* 无 */
  /* 6月30日新增 */
  /* 输入框共用边线样式  border */
  --commonInputBorder: #ffffff;
  /* 下拉框共用边线样式  border */
  --commonSelectBorder: #fff;
  /* 特殊下拉框边线样式透明边线 */
  --commonSelectBorderNone: transparent;
  /* 输入框共用边线样式鼠标移动上效果 */
  --commonInputBorderHover: #00d6d9;
  /* SVG白变333 */
  --commonSVGColor: #ffffff;
  /* SVG2beaf9变1890ff */
  --commonSVGFontColor: #00d6d9;
  /* 分布式色块 #00284d变ffffff */
  --ZJboxFontColor: #00284d;
  /* 分布式优化 KJ-Telemetry组件文字 */
  --KJTelemetryFontColor: #001529;
}