@ued_fpi/data-visual/dist/style/base.css

<br /> <br /> <div style="text-align:center"> <b style="font-size:30px">@ued_fpi/data-visual</b> <p>基于Vite4+TypeScript的Vue3大屏组件库开发框架</p> <img style="display:inline" src="https://img.shields.io/npm/v/@ued_fpi/data-visual" />

html {
    /* shadow */
    --dv-box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.16);
    --dv-box-shadow-dark: 0 8px 16px -8px rgba(0, 0, 0, 0.16), 0 12px 32px 0 rgba(0, 0, 0, 0.12), 0 16px 48px 16px rgba(0, 0, 0, 0.08);
    --dv-box-shadow-light: 0 0 12px 0 rgba(0, 0, 0, 0.12);
    --dv-box-shadow-lighter: 0 0 6px 0 rgba(0, 0, 0, 0.12);

    /* background */
    --dv-color-background-base: #fff;
    --dv-color-background-overlay: #fff;
    --dv-color-background-page: #f2f3f5;

    /* border */
    --dv-color-border-base: #dcdfe6;
    --dv-color-border-dark: #d4d7de;
    --dv-color-border-darker: #cdd0d6; /* 鼠标移上时边框 */
    --dv-color-border-extra-light: #f2f6fc;
    --dv-color-border-light: #e4e7ed;
    --dv-color-border-lighter: #ebeef5;

    /* danger */
    --dv-color-danger: #ff4d4f;
    --dv-color-danger-10: #fee;
    --dv-color-danger-20: #ffdbdc;
    --dv-color-danger-30: #ffc9ca;
    --dv-color-danger-50: #ffa6a7;
    --dv-color-danger-70: #ff8283;
    --dv-color-danger-80: #ff7172;
    --dv-color-danger-110: #cc3e3f;

    /* fill */
    --dv-color-fill-base: #f0f2f5;
    --dv-color-fill-blank: #fff;
    --dv-color-fill-dark: #ebedf0;
    --dv-color-fill-darker: #e6e8eb;
    --dv-color-fill-extra-light: #fafcff;
    --dv-color-fill-light: #f5f7fa;
    --dv-color-fill-lighter: #fafafa;

    /* index */
    --dv-color-index: #1677ff;
    --dv-color-index-10: #e8f2ff;
    --dv-color-index-20: #d0e4ff;
    --dv-color-index-30: #b9d6ff;
    --dv-color-index-50: #8bbbff;
    --dv-color-index-70: #5ba0ff;
    --dv-color-index-80: #4592ff;
    --dv-color-index-110: #125fcc;

    /* info */
    --dv-color-info-10: #f4f4f5;
    --dv-color-info-100: #909399;
    --dv-color-info-20: #e9e9eb;
    --dv-color-info-30: #dedfe0;
    --dv-color-info-50: #c7c9cc;
    --dv-color-info-70: #b1b3b8;
    --dv-color-info-110: #73767a;

    /* primary */
    --dv-color-primary: #1677ff;
    --dv-color-primary-10: #e8f2ff;
    --dv-color-primary-20: #d0e4ff;
    --dv-color-primary-30: #b9d6ff;
    --dv-color-primary-50: #8bbbff;
    --dv-color-primary-70: #5ba0ff;
    --dv-color-primary-80: #4592ff;
    --dv-color-primary-110: #125fcc;

    /* success */
    --dv-color-success: #52c41a;
    --dv-color-success-10: #eef9e9;
    --dv-color-success-20: #dcf3d1;
    --dv-color-success-30: #cbedba;
    --dv-color-success-50: #a9e28d;
    --dv-color-success-70: #86d65e;
    --dv-color-success-80: #75d048;
    --dv-color-success-110: #429d15;

    /* text */
    --dv-color-text-disable: #c0c4cc; /* 不可用 */
    --dv-color-text-placeholder: #a8abb2; /* 占位符 */
    --dv-color-text-primary: #303133; /* 主要文字 */
    --dv-color-text-regular: #606266; /* 常规文字 */
    --dv-color-text-secondary: #909399; /* 次要文字 */

    /* warning */
    --dv-color-warning: #faad14;
    --dv-color-warning-10: #fff7e8;
    --dv-color-warning-20: #feefd0;
    --dv-color-warning-30: #fde6b8;
    --dv-color-warning-50: #fdd68a;
    --dv-color-warning-70: #fbc55a;
    --dv-color-warning-80: #fbbd43;
    --dv-color-warning-110: #c88a10;

    /* font-size ; */
    --dv-text-headline1: 16px;
    --dv-text-headline2: 14px;
    --dv-text-headline3: 12px;
    --dv-text-body1: 14px;
    --dv-text-body2: 12px;
    --dv-text-body3: 16px;
    --dv-text-number1: 14px;
    --dv-text-number2: 12px;
    --dv-text-number3: 16px;
    --dv-text-number4: 18px;
    --dv-text-number5: 20px;
    --dv-text-number6: 24px;
    --dv-text-number7: 32px;
    --dv-text-number8: 40px;
    --dv-text-number9: 48px;
    --dv-text-number10: 56px;

    /* font-family */
    --dv-font-family-number: Oswald;

    /* text-shadow */
    --dv-text-shadow: rgba(0, 0, 0, 0.5);
}

html.dark {
    /* color */
    --dv-box-shadow: 0 8px 20px 0 rgba(51, 135, 255, 0.72), 0 12px 32px 4px rgba(51, 135, 255, 0.36);
    --dv-box-shadow-dark: 0 8px 16px -8px #3387ff, 0 12px 32px 0 #3387ff, 0 16px 48px 16px rgba(51, 135, 255, 0.72);
    --dv-box-shadow-light: 0 0 12px 0 rgba(51, 135, 255, 0.72);
    --dv-box-shadow-lighter: 0 0 6px 0 rgba(51, 135, 255, 0.72);
    --dv-color-background-base: #000b1a;
    --dv-color-background-overlay: #000b1a;
    --dv-color-background-page: #000b1a;
    --dv-color-border-base: rgba(68, 136, 208, 0.2); /* 基础边框 */
    --dv-color-border-dark: rgba(68, 136, 208, 0.15);
    --dv-color-border-darker: rgba(68, 136, 208, 0.15); /* 鼠标移上时边框 */
    --dv-color-border-extra-light: rgba(68, 136, 208, 0.35);
    --dv-color-border-light: rgba(68, 136, 208, 0.25);
    --dv-color-border-lighter: rgba(68, 136, 208, 0.3); /* 表格边框色 */
    --dv-color-danger: #f84439;
    --dv-color-danger-10: #190706;
    --dv-color-danger-20: #320e0b;
    --dv-color-danger-30: #4a1411;
    --dv-color-danger-50: #7c221c;
    --dv-color-danger-70: #ae3028;
    --dv-color-danger-80: #c6362e;
    --dv-color-danger-110: #d15e58;
    --dv-color-fill-base: rgba(68, 136, 208, 0.1); /* 基础填充 */
    --dv-color-fill-blank: rgba(68, 136, 208, 0.1);
    --dv-color-fill-dark: rgba(68, 136, 208, 0.05);
    --dv-color-fill-darker: rgba(68, 136, 208, 0.05);
    --dv-color-fill-extra-light: rgba(68, 136, 208, 0.25);
    --dv-color-fill-light: rgba(68, 136, 208, 0.15);
    --dv-color-fill-lighter: rgba(68, 136, 208, 0.2);
    --dv-color-index: #00deff;
    --dv-color-index-10: #001619;
    --dv-color-index-20: #002c33;
    --dv-color-index-30: #00434d;
    --dv-color-index-50: #006f7f;
    --dv-color-index-70: #009cb3;
    --dv-color-index-80: #00b2cc;
    --dv-color-index-110: #33e5ff;
    --dv-color-info-10: #000b1a;
    --dv-color-info-100: #0054cc;
    --dv-color-info-20: #001533;
    --dv-color-info-30: #001f4c;
    --dv-color-info-50: #003580;
    --dv-color-info-70: #0049b2;
    --dv-color-info-dark: #0069ff;
    --dv-color-primary: #0069ff;
    --dv-color-primary-10: #000b1a;
    --dv-color-primary-20: #001533;
    --dv-color-primary-30: #001f4c;
    --dv-color-primary-50: #003580;
    --dv-color-primary-70: #0049b2;
    --dv-color-primary-80: #0054cc;
    --dv-color-primary-110: #3387ff;
    --dv-color-success: #15f3a3;
    --dv-color-success-10: #021a11;
    --dv-color-success-20: #043322;
    --dv-color-success-30: #064c33;
    --dv-color-success-50: #0b8056;
    --dv-color-success-70: #0fb277;
    --dv-color-success-80: #11cc89;
    --dv-color-success-110: #56e7b3;
    --dv-color-text-disable: rgba(255, 255, 255, 0.6); /* 不可用 */
    --dv-color-text-placeholder: rgba(255, 255, 255, 0.3); /* 占位符 */
    --dv-color-text-primary: #fff; /* 主要文字 */
    --dv-color-text-regular: #cfd3dc; /* 常规文字 */
    --dv-color-text-secondary: rgba(255, 255, 255, 0.6); /* 次要文字 */
    --dv-color-warning: #fdbd00;
    --dv-color-warning-10: #1a1300;
    --dv-color-warning-20: #332600;
    --dv-color-warning-30: #4b3800;
    --dv-color-warning-50: #7f5f00;
    --dv-color-warning-70: #b18400;
    --dv-color-warning-80: #ca9700;
    --dv-color-warning-110: #ebbf3d;
}

html.dark {
    color-scheme: dark;

    /* --el-bg-color-overlay: #051a39;
    --el-fill-color-light: #000b1a; */

    /* --el-disabled-bg-color: var(); */

    /* --el-input-hover-border-color: var(--dv-color-primary);
    --el-select-input-focus-border-color: var(--dv-color-index);
    --el-color-primary: var(--dv-color-primary-110);
    --el-border-color: var(--dv-color-primary-50);
    --el-input-bg-color: var(--dv-color-primary-20);
    --el-border-color-light: var(--dv-color-primary-50);
    --el-border-color-hover: var(--dv-color-primary-50); */

    /* --el-border-color-hover: var(--dv-color-primary-50); */

    /* primary */
    --el-color-primary: var(--dv-color-primary);
    --el-color-primary-light-3: var(--dv-color-primary-70);
    --el-color-primary-light-5: var(--dv-color-primary-50);
    --el-color-primary-light-7: var(--dv-color-primary-30);
    --el-color-primary-light-8: var(--dv-color-primary-20);
    --el-color-primary-light-9: var(--dv-color-primary-10);
    --el-color-primary-dark-2: var(--dv-color-primary-110);

    /* success */
    --el-color-success: var(--dv-color-success);
    --el-color-success-light-3: var(--dv-color-success-70);
    --el-color-success-light-5: var(--dv-color-success-50);
    --el-color-success-light-7: var(--dv-color-success-30);
    --el-color-success-light-8: var(--dv-color-success-20);
    --el-color-success-light-9: var(--dv-color-success-10);
    --el-color-success-dark-2: var(--dv-color-success-110);

    /* warning */
    --el-color-warning: var(--dv-color-warning);
    --el-color-warning-light-3: var(--dv-color-warning-70);
    --el-color-warning-light-5: var(--dv-color-warning-50);
    --el-color-warning-light-7: var(--dv-color-warning-30);
    --el-color-warning-light-8: var(--dv-color-warning-20);
    --el-color-warning-light-9: var(--dv-color-warning-10);
    --el-color-warning-dark-2: var(--dv-color-warning-110);

    /* danger */
    --el-color-danger: var(--dv-color-danger);
    --el-color-danger-light-3: var(--dv-color-danger-70);
    --el-color-danger-light-5: var(--dv-color-danger-50);
    --el-color-danger-light-7: var(--dv-color-danger-30);
    --el-color-danger-light-8: var(--dv-color-danger-20);
    --el-color-danger-light-9: var(--dv-color-danger-10);
    --el-color-danger-dark-2: var(--dv-color-danger-110);

    /* error */

    /* --el-color-error: var(--dv-color-error);
    --el-color-error-light-3: var(--dv-color-error-70);
    --el-color-error-light-5: var(--dv-color-error-50);
    --el-color-error-light-7: var(--dv-color-error-30);
    --el-color-error-light-8: var(--dv-color-error-20);
    --el-color-error-light-9: var(--dv-color-error-10);
    --el-color-error-dark-2: var(--dv-color-error-110); */

    /* info */
    --el-color-info: var(--dv-color-info-100);
    --el-color-info-light-3: var(--dv-color-info-70);
    --el-color-info-light-5: var(--dv-color-info-50);
    --el-color-info-light-7: var(--dv-color-info-30);
    --el-color-info-light-8: var(--dv-color-info-20);
    --el-color-info-light-9: var(--dv-color-info-10);
    --el-color-info-dark-2: var(--dv-color-info-110);

    /* bg */
    --el-bg-color-page: var(--dv-color-background-page);
    --el-bg-color: var(--dv-color-background-base);
    --el-bg-color-overlay: var(--dv-color-background-overlay);

    /* text */
    --el-text-color-primary: var(--dv-color-text-primary);
    --el-text-color-regular: var(--dv-color-text-regular);
    --el-text-color-secondary: var(--dv-color-text-secondary);
    --el-text-color-placeholder: var(--dv-color-text-placeholder);
    --el-text-color-disabled: var(--dv-color-text-disable);

    /* border */
    --el-border-color-darker: var(--dv-color-border-darker);
    --el-border-color-dark: var(--dv-color-border-dark);
    --el-border-color: var(--dv-color-border-base);
    --el-border-color-light: var(--dv-color-border-light);
    --el-border-color-lighter: var(--dv-color-border-lighter);
    --el-border-color-extra-light: var(--dv-color-border-extra-light);

    /* fill */
    --el-fill-color-darker: var(--dv-color-fill-darker);
    --el-fill-color-dark: var(--dv-color-fill-dark);
    --el-fill-color: var(--dv-color-fill-base);
    --el-fill-color-light: var(--dv-color-fill-light);
    --el-fill-color-lighter: var(--dv-color-fill-lighter);
    --el-fill-color-extra-light: var(--dv-color-fill-extra-light);
    --el-fill-color-blank: var(--dv-color-fill-blank);

    /* disabled */
    --el-disabled-bg-color: var(--dv-color-fill-light);
    --el-disabled-text-color: var(--dv-text-color-placeholder);
    --el-disabled-border-color: var(--dv-color-border-lighter);
}