@bc/theme-variable

基于ElementPlus主题变量预设

颜色变量（暗色模式支持）

针对背景色、分割线（边框）颜色、文字颜色、文字反转色、投影提供了css变量预设，开发过程中如果涉及到相关样式优先使用以下变量，能够有较好的主题切换支持

变量预设文件 src/var.scss

--app-c-bg: var(--app-c-black);
--app-c-bg-soft: var(--app-c-black-soft);
--app-c-bg-mute: var(--app-c-black-mute);
--app-c-divider: var(--app-c-divider-dark-1);
--app-c-divider-light: var(--app-c-divider-dark-2);
--app-c-divider-inverse: var(--app-c-divider-light-1);
--app-c-divider-inverse-light: var(--app-c-divider-light-2);
--app-c-text-1: var(--app-c-text-dark-1);
--app-c-text-2: var(--app-c-text-dark-2);
--app-c-text-3: var(--app-c-text-dark-3);
--app-c-text-4: var(--app-c-text-dark-4);
--app-c-text-code: var(--app-c-text-dark-code);
--app-c-text-inverse-1: var(--app-c-text-light-1);
--app-c-text-inverse-2: var(--app-c-text-light-2);
--app-c-text-inverse-3: var(--app-c-text-light-3);
--app-c-text-inverse-4: var(--app-c-text-light-4);
--app-c-brand-highlight: var(--app-c-brand-light);

ElementPlus变量

ElementPlus主题由scss驱动，通过预设颜色能够计算出其他衍生颜色，在部分需要使用主题颜色的衍生色时，下面这些css变量很有用

--el-color-primary: #2A82E4;
--el-color-primary-light-3: #6aa8ec;
--el-color-primary-light-5: #95c1f2;
--el-color-primary-light-7: #bfdaf7;
--el-color-primary-light-8: #d4e6fa;
--el-color-primary-light-9: #eaf3fc;
--el-color-primary-dark-2: #2268b6;
--el-color-success: #43CF7C;
--el-color-success-light-3: #7bdda3;
--el-color-success-light-5: #a1e7be;
--el-color-success-light-7: #c7f1d8;
--el-color-success-light-8: #d9f5e5;
--el-color-success-light-9: #ecfaf2;
--el-color-success-dark-2: #36a663;
--el-color-warning: #FF8D1A;
--el-color-warning-light-3: #ffaf5f;
--el-color-warning-light-5: #ffc68d;
--el-color-warning-light-7: #ffddba;
--el-color-warning-light-8: #ffe8d1;
--el-color-warning-light-9: #fff4e8;
--el-color-warning-dark-2: #cc7115;
--el-color-danger: #FF5733;
--el-color-danger-light-3: #ff8970;
--el-color-danger-light-5: #ffab99;
--el-color-danger-light-7: #ffcdc2;
--el-color-danger-light-8: #ffddd6;
--el-color-danger-light-9: #ffeeeb;
--el-color-danger-dark-2: #cc4629;
--el-color-error: #FF5733;
--el-color-error-light-3: #ff8970;
--el-color-error-light-5: #ffab99;
--el-color-error-light-7: #ffcdc2;
--el-color-error-light-8: #ffddd6;
--el-color-error-light-9: #ffeeeb;
--el-color-error-dark-2: #cc4629;
--el-color-info: #A7B3CA;
--el-color-info-light-3: #c1cada;
--el-color-info-light-5: #d3d9e5;
--el-color-info-light-7: #e5e8ef;
--el-color-info-light-8: #edf0f4;
--el-color-info-light-9: #f6f7fa;
--el-color-info-dark-2: #868fa2;