Yuan’s blog
Yuan’s blog
Vue3 + ElementPlus 切换主题
🌁

Vue3 + ElementPlus 切换主题

summary
网站换肤这种需求，相信大家已经在熟悉不过了，例如特殊节日等，会更改主题色为当前日期相符的颜色，如春节国庆为红色等；又或者更熟悉的，网站分为深色和浅色，又叫日间/夜间。
Date
Oct 29, 2022
Tags
vue
theme
elementplus

技术栈

  • Vue3
  • ElementPlus

思路

将网站根标签，也就是html标签的类名进行更改来达到对应目的，如日间设置为light，夜间设置为dark，可以进入ElementPlus官网，切换主题时，打开控制台查看html类名的变化

实现步骤

1. 引入主题样式文件

  • 样式文件内容，可根据自己喜好进行调整，例如珍珠白、土豪金、五彩斑斓的黑之类
<style>
  html.dark {
    color-scheme: dark;
    /*// 基础浅色*/
    --el-color-white: #1b3651;
    /*// 基础深色*/
    --el-color-black: #012447;
    --el-color-primary: #409eff;
    --el-color-primary-light-3: #79bbff;
    --el-color-primary-light-5: #a0cfff;
    --el-color-primary-light-7: #c6e2ff;
    --el-color-primary-light-8: #d9ecff;
    --el-color-primary-light-9: #ecf5ff;
    --el-color-primary-dark-2: #337ecc;
    --el-color-success: #67c23a;
    --el-color-success-light-3: #95d475;
    --el-color-success-light-5: #b3e19d;
    --el-color-success-light-7: #d1edc4;
    --el-color-success-light-8: #e1f3d8;
    --el-color-success-light-9: #f0f9eb;
    --el-color-success-dark-2: #529b2e;
    --el-color-warning: #e6a23c;
    --el-color-warning-light-3: #eebe77;
    --el-color-warning-light-5: #f3d19e;
    --el-color-warning-light-7: #f8e3c5;
    --el-color-warning-light-8: #faecd8;
    --el-color-warning-light-9: #fdf6ec;
    --el-color-warning-dark-2: #b88230;
    --el-color-danger: #f56c6c;
    --el-color-danger-light-3: #f89898;
    --el-color-danger-light-5: #fab6b6;
    --el-color-danger-light-7: #fcd3d3;
    --el-color-danger-light-8: #fde2e2;
    --el-color-danger-light-9: #fef0f0;
    --el-color-danger-dark-2: #c45656;
    --el-color-error: #f56c6c;
    --el-color-error-light-3: #f89898;
    --el-color-error-light-5: #fab6b6;
    --el-color-error-light-7: #fcd3d3;
    --el-color-error-light-8: #fde2e2;
    --el-color-error-light-9: #fef0f0;
    --el-color-error-dark-2: #c45656;
    --el-color-info: #909399;
    --el-color-info-light-3: #b1b3b8;
    --el-color-info-light-5: #c8c9cc;
    --el-color-info-light-7: #dedfe0;
    --el-color-info-light-8: #e9e9eb;
    --el-color-info-light-9: #f4f4f5;
    --el-color-info-dark-2: #73767a;
    --el-bg-color: #1b3651;
    --el-bg-color-page: #1b3651;
    --el-bg-color-overlay: #1b3651;
    /*// 主要文字颜色*/
    --el-text-color-primary: #ffffff;
    /*// 常规文字颜色*/
    --el-text-color-regular: #ffffff;
    /*// 占位文字颜色*/
    --el-text-color-placeholder: #c0c4cc;
    /*// 次要文字颜色*/
    --el-text-color-secondary: #ffffff;
    --el-text-color-disabled: #c0c4cc;
    --el-border-color: #388de0;
    /*// 二级边框颜色*/
    --el-border-color-light: #388de0;
    /*// 三级边框颜色*/
    --el-border-color-lighter: #58a9f5;
    /*// 四级边框颜色*/
    --el-border-color-extra-light: #86b3f9;
    --el-border-color-dark: #d4d7de;
    --el-border-color-darker: #cdd0d6;
    --el-fill-color: #012447;
    --el-fill-color-light: #1b3651;
    --el-fill-color-lighter: #1b3651;
    --el-fill-color-extra-light: #1b3651;
    --el-fill-color-dark: #1b3651;
    --el-fill-color-darker: #1b3651;
    --el-fill-color-blank: #1b3651;
    --el-box-shadow: 0px 12px 32px 4px rgba(0; 0; 0; 0.04), 0px 8px 20px rgba(0;
            0; 0; 0.08);
    --el-box-shadow-light: 0px 0px 12px rgba(0; 0; 0; 0.12);
    --el-box-shadow-lighter: 0px 0px 6px rgba(0; 0; 0; 0.12);
    --el-box-shadow-dark: 0px 16px 48px 16px rgba(0; 0; 0; 0.08), 0px 12px 32px
        rgba(0; 0; 0; 0.12), 0px 8px 16px -8px rgba(0; 0; 0; 0.16);
    --el-disabled-bg-color: var(--el-fill-color-light);
    --el-disabled-text-color: var(--el-text-color-placeholder);
    --el-disabled-border-color: var(--el-border-color-light);
    --el-overlay-color: rgba(0; 0; 0; 0.8);
    --el-overlay-color-light: rgba(0; 0; 0; 0.7);
    --el-overlay-color-lighter: rgba(0; 0; 0; 0.5);
    --el-mask-color: rgba(255; 255; 255; 0.9);
    --el-mask-color-extra-light: rgba(255; 255; 255; 0.3);
    --el-border-width: 1px;
    --el-border-style: solid;
    --el-border-color-hover: var(--el-text-color-disabled);
    --el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);
    --el-svg-monochrome-grey: var(--el-border-color);
  }
  html.light {
    color-scheme: light;
    --el-color-white: #ffffff;
    --el-color-black: #000000;
    --el-color-primary: #409eff;
    --el-color-primary-light-3: #79bbff;
    --el-color-primary-light-5: #a0cfff;
    --el-color-primary-light-7: #c6e2ff;
    --el-color-primary-light-8: #d9ecff;
    --el-color-primary-light-9: #ecf5ff;
    --el-color-primary-dark-2: #337ecc;
    --el-color-success: #67c23a;
    --el-color-success-light-3: #95d475;
    --el-color-success-light-5: #b3e19d;
    --el-color-success-light-7: #d1edc4;
    --el-color-success-light-8: #e1f3d8;
    --el-color-success-light-9: #f0f9eb;
    --el-color-success-dark-2: #529b2e;
    --el-color-warning: #e6a23c;
    --el-color-warning-light-3: #eebe77;
    --el-color-warning-light-5: #f3d19e;
    --el-color-warning-light-7: #f8e3c5;
    --el-color-warning-light-8: #faecd8;
    --el-color-warning-light-9: #fdf6ec;
    --el-color-warning-dark-2: #b88230;
    --el-color-danger: #f56c6c;
    --el-color-danger-light-3: #f89898;
    --el-color-danger-light-5: #fab6b6;
    --el-color-danger-light-7: #fcd3d3;
    --el-color-danger-light-8: #fde2e2;
    --el-color-danger-light-9: #fef0f0;
    --el-color-danger-dark-2: #c45656;
    --el-color-error: #f56c6c;
    --el-color-error-light-3: #f89898;
    --el-color-error-light-5: #fab6b6;
    --el-color-error-light-7: #fcd3d3;
    --el-color-error-light-8: #fde2e2;
    --el-color-error-light-9: #fef0f0;
    --el-color-error-dark-2: #c45656;
    --el-color-info: #909399;
    --el-color-info-light-3: #b1b3b8;
    --el-color-info-light-5: #c8c9cc;
    --el-color-info-light-7: #dedfe0;
    --el-color-info-light-8: #e9e9eb;
    --el-color-info-light-9: #f4f4f5;
    --el-color-info-dark-2: #73767a;
    --el-bg-color: #ffffff;
    --el-bg-color-page: #f2f3f5;
    --el-bg-color-overlay: #ffffff;
    --el-text-color-primary: #303133;
    --el-text-color-regular: #606266;
    --el-text-color-secondary: #909399;
    --el-text-color-placeholder: #a8abb2;
    --el-text-color-disabled: #c0c4cc;
    --el-border-color: #dcdfe6;
    --el-border-color-light: #e4e7ed;
    --el-border-color-lighter: #ebeef5;
    --el-border-color-extra-light: #f2f6fc;
    --el-border-color-dark: #d4d7de;
    --el-border-color-darker: #cdd0d6;
    --el-fill-color: #f0f2f5;
    --el-fill-color-light: #f5f7fa;
    --el-fill-color-lighter: #fafafa;
    --el-fill-color-extra-light: #fafcff;
    --el-fill-color-dark: #ebedf0;
    --el-fill-color-darker: #e6e8eb;
    --el-fill-color-blank: #ffffff;
    --el-box-shadow: 0px 12px 32px 4px rgba(0; 0; 0; 0.04), 0px 8px 20px rgba(0;
            0; 0; 0.08);
    --el-box-shadow-light: 0px 0px 12px rgba(0; 0; 0; 0.12);
    --el-box-shadow-lighter: 0px 0px 6px rgba(0; 0; 0; 0.12);
    --el-box-shadow-dark: 0px 16px 48px 16px rgba(0; 0; 0; 0.08), 0px 12px 32px
        rgba(0; 0; 0; 0.12), 0px 8px 16px -8px rgba(0; 0; 0; 0.16);
    --el-disabled-bg-color: var(--el-fill-color-light);
    --el-disabled-text-color: var(--el-text-color-placeholder);
    --el-disabled-border-color: var(--el-border-color-light);
    --el-overlay-color: rgba(0; 0; 0; 0.8);
    --el-overlay-color-light: rgba(0; 0; 0; 0.7);
    --el-overlay-color-lighter: rgba(0; 0; 0; 0.5);
    --el-mask-color: rgba(255; 255; 255; 0.9);
    --el-mask-color-extra-light: rgba(255; 255; 255; 0.3);
    --el-border-width: 1px;
    --el-border-style: solid;
    --el-border-color-hover: var(--el-text-color-disabled);
    --el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);
    --el-svg-monochrome-grey: var(--el-border-color);
  }
</style>
// main.js
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
// 主题样式文件需放在组件库样式之后导入
import "@/assets/theme.css";

2. 切换html标签类名

// init theme
initTheme() {
  const theme = localStorage.getItem("theme") || "light";
  this.changeTheme(theme)
},
// change theme
changeTheme(theme) {
  document.querySelector("html").className = theme;
  localStorage.setItem("theme", theme);
}

案例演示

notion image