提示
ElementPlus v2.2.0
已经支持深色模式,你仅需要遵循 Dark Mode 使用即可控制两个组件库颜色
推荐通过 css-variables 控制颜色
:root {
--el-color-primary: #42b983;
--pro-layout-aside-background-color: #f0f2f5;
}
只需要配置 ElementPlus 的深色模式
import 'element-plus/theme-chalk/dark/css-vars.css'
<html class="dark"></html>
:root {
--el-color-primary: #42b983;
--pro-layout-aside-background-color: #f0f2f5;
}
html.my {
--el-color-primary: #25272a;
--pro-layout-aside-background-color: #2b2b2b;
}
html.other {
/* ... */
}
<html class="other"></html>
提示
然后可以通过 js 动态改变 class 的值实现
可以使用 postcss 插件 postcss-custom-properties 或者同类的插件转换 css-variables
获得更好的兼容性,以便在不支持 css-variables
时能够显示默认值样式
:root {
--pro-layout-header-background-color: var(--el-bg-color);
--pro-tabs-background-color: var(--el-bg-color);
--pro-layout-width-aside: 240px;
--pro-layout-width-aside-collapse: 60px;
--pro-layout-height: 100vh;
--pro-layout-height-header: 54px;
--pro-layout-index-header: 10;
--pro-layout-index-sidebar: 1800;
}
@charset "UTF-8";:root{--el-color-white:#ffffff;--el-color-black:#000000;--el-color-primary-rgb:64,158,255;--el-color-success-rgb:103,194,58;--el-color-warning-rgb:230,162,60;--el-color-danger-rgb:245,108,108;--el-color-error-rgb:245,108,108;--el-color-info-rgb:144,147,153;--el-font-size-extra-large:20px;--el-font-size-large:18px;--el-font-size-medium:16px;--el-font-size-base:14px;--el-font-size-small:13px;--el-font-size-extra-small:12px;--el-font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;--el-font-weight-primary:500;--el-font-line-height-primary:24px;--el-index-normal:1;--el-index-top:1000;--el-index-popper:2000;--el-border-radius-base:4px;--el-border-radius-small:2px;--el-border-radius-round:20px;--el-border-radius-circle:100%;--el-transition-duration:0.3s;--el-transition-duration-fast:0.2s;--el-transition-function-ease-in-out-bezier:cubic-bezier(0.645,0.045,0.355,1);--el-transition-function-fast-bezier:cubic-bezier(0.23,1,0.32,1);--el-transition-all:all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);--el-transition-fade:opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);--el-transition-md-fade:transform var(--el-transition-duration) var(--el-transition-function-fast-bezier),opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);--el-transition-fade-linear:opacity var(--el-transition-duration-fast) linear;--el-transition-border:border-color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);--el-transition-box-shadow:box-shadow var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);--el-transition-color:color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);--el-component-size-large:40px;--el-component-size:32px;--el-component-size-small:24px;color-scheme:light;--el-color-primary:#409eff;--el-color-primary-light-3:rgb(121.3,187.1,255);--el-color-primary-light-5:rgb(159.5,206.5,255);--el-color-primary-light-7:rgb(197.7,225.9,255);--el-color-primary-light-8:rgb(216.8,235.6,255);--el-color-primary-light-9:rgb(235.9,245.3,255);--el-color-primary-dark-2:rgb(51.2,126.4,204);--el-color-success:#67c23a;--el-color-success-light-3:rgb(148.6,212.3,117.1);--el-color-success-light-5:rgb(179,224.5,156.5);--el-color-success-light-7:rgb(209.4,236.7,195.9);--el-color-success-light-8:rgb(224.6,242.8,215.6);--el-color-success-light-9:rgb(239.8,248.9,235.3);--el-color-success-dark-2:rgb(82.4,155.2,46.4);--el-color-warning:#e6a23c;--el-color-warning-light-3:rgb(237.5,189.9,118.5);--el-color-warning-light-5:rgb(242.5,208.5,157.5);--el-color-warning-light-7:rgb(247.5,227.1,196.5);--el-color-warning-light-8:rgb(250,236.4,216);--el-color-warning-light-9:rgb(252.5,245.7,235.5);--el-color-warning-dark-2:rgb(184,129.6,48);--el-color-danger:#f56c6c;--el-color-danger-light-3:rgb(248,152.1,152.1);--el-color-danger-light-5:rgb(250,181.5,181.5);--el-color-danger-light-7:rgb(252,210.9,210.9);--el-color-danger-light-8:rgb(253,225.6,225.6);--el-color-danger-light-9:rgb(254,240.3,240.3);--el-color-danger-dark-2:rgb(196,86.4,86.4);--el-color-error:#f56c6c;--el-color-error-light-3:rgb(248,152.1,152.1);--el-color-error-light-5:rgb(250,181.5,181.5);--el-color-error-light-7:rgb(252,210.9,210.9);--el-color-error-light-8:rgb(253,225.6,225.6);--el-color-error-light-9:rgb(254,240.3,240.3);--el-color-error-dark-2:rgb(196,86.4,86.4);--el-color-info:#909399;--el-color-info-light-3:rgb(177.3,179.4,183.6);--el-color-info-light-5:rgb(199.5,201,204);--el-color-info-light-7:rgb(221.7,222.6,224.4);--el-color-info-light-8:rgb(232.8,233.4,234.6);--el-color-info-light-9:rgb(243.9,244.2,244.8);--el-color-info-dark-2:rgb(115.2,117.6,122.4);--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)}
html.dark{color-scheme:dark;--el-color-primary:#409eff;--el-color-primary-light-3:rgb(50.8,116.6,184.5);--el-color-primary-light-5:rgb(42,89,137.5);--el-color-primary-light-7:rgb(33.2,61.4,90.5);--el-color-primary-light-8:rgb(28.8,47.6,67);--el-color-primary-light-9:rgb(24.4,33.8,43.5);--el-color-primary-dark-2:rgb(102.2,177.4,255);--el-color-success:#67c23a;--el-color-success-light-3:rgb(78.1,141.8,46.6);--el-color-success-light-5:rgb(61.5,107,39);--el-color-success-light-7:rgb(44.9,72.2,31.4);--el-color-success-light-8:rgb(36.6,54.8,27.6);--el-color-success-light-9:rgb(28.3,37.4,23.8);--el-color-success-dark-2:rgb(133.4,206.2,97.4);--el-color-warning:#e6a23c;--el-color-warning-light-3:rgb(167,119.4,48);--el-color-warning-light-5:#7d5b28;--el-color-warning-light-7:rgb(83,62.6,32);--el-color-warning-light-8:rgb(62,48.4,28);--el-color-warning-light-9:rgb(41,34.2,24);--el-color-warning-dark-2:rgb(235,180.6,99);--el-color-danger:#f56c6c;--el-color-danger-light-3:rgb(177.5,81.6,81.6);--el-color-danger-light-5:rgb(132.5,64,64);--el-color-danger-light-7:rgb(87.5,46.4,46.4);--el-color-danger-light-8:rgb(65,37.6,37.6);--el-color-danger-light-9:rgb(42.5,28.8,28.8);--el-color-danger-dark-2:rgb(247,137.4,137.4);--el-color-error:#f56c6c;--el-color-error-light-3:rgb(177.5,81.6,81.6);--el-color-error-light-5:rgb(132.5,64,64);--el-color-error-light-7:rgb(87.5,46.4,46.4);--el-color-error-light-8:rgb(65,37.6,37.6);--el-color-error-light-9:rgb(42.5,28.8,28.8);--el-color-error-dark-2:rgb(247,137.4,137.4);--el-color-info:#909399;--el-color-info-light-3:rgb(106.8,108.9,113.1);--el-color-info-light-5:rgb(82,83.5,86.5);--el-color-info-light-7:rgb(57.2,58.1,59.9);--el-color-info-light-8:rgb(44.8,45.4,46.6);--el-color-info-light-9:rgb(32.4,32.7,33.3);--el-color-info-dark-2:rgb(166.2,168.6,173.4);--el-box-shadow:0px 12px 32px 4px rgba(0,0,0,0.36),0px 8px 20px rgba(0,0,0,0.72);--el-box-shadow-light:0px 0px 12px rgba(0,0,0,0.72);--el-box-shadow-lighter:0px 0px 6px rgba(0,0,0,0.72);--el-box-shadow-dark:0px 16px 48px 16px rgba(0,0,0,0.72),0px 12px 32px #000000,0px 8px 16px -8px #000000;--el-bg-color-page:#0a0a0a;--el-bg-color:#141414;--el-bg-color-overlay:#1d1e1f;--el-text-color-primary:#E5EAF3;--el-text-color-regular:#CFD3DC;--el-text-color-secondary:#A3A6AD;--el-text-color-placeholder:#8D9095;--el-text-color-disabled:#6C6E72;--el-border-color-darker:#636466;--el-border-color-dark:#58585B;--el-border-color:#4C4D4F;--el-border-color-light:#414243;--el-border-color-lighter:#363637;--el-border-color-extra-light:#2B2B2C;--el-fill-color-darker:#424243;--el-fill-color-dark:#39393A;--el-fill-color:#303030;--el-fill-color-light:#262727;--el-fill-color-lighter:#1D1D1D;--el-fill-color-extra-light:#191919;--el-fill-color-blank:transparent;--el-mask-color:rgba(0,0,0,0.8);--el-mask-color-extra-light:rgba(0,0,0,0.3)}html.dark .el-button{--el-button-disabled-text-color:rgba(255,255,255,0.5)}html.dark .el-card{--el-card-bg-color:var(--el-bg-color-overlay)}html.dark .el-empty{--el-empty-fill-color-0:var(--el-color-black);--el-empty-fill-color-1:#4b4b52;--el-empty-fill-color-2:#36383d;--el-empty-fill-color-3:#1e1e20;--el-empty-fill-color-4:#262629;--el-empty-fill-color-5:#202124;--el-empty-fill-color-6:#212224;--el-empty-fill-color-7:#1b1c1f;--el-empty-fill-color-8:#1c1d1f;--el-empty-fill-color-9:#18181a}