k_online_ui/src/styles/theme.scss

@import url(./theme-g.scss);
:root {
  // color palettes
  --color-theme: #ed6d00;

  --color-mode: #fff;

  --color-neutral-1: #2b2f36;
  --color-neutral-2: #646a73;
  --color-neutral-3: #b5b9bf;
  --color-neutral-4: #f5f7fa;
  --color-neutral-5: #bfc1c3;

  --color-white: #fff;
  --color-success: #00a870;
  --color-warning: #edb82f;
  --color-danger: #c9353f;
  --color-grey: #f4f5f5;

  --color-accent-1: #2b2f36;
  --color-accent-2: #ed6d00;
  --color-accent-3: #e35963;
  --color-accent-4: #7959c8;
  --color-accent-5: #21bba9;
  --color-accent-6: #7eb813;
  --color-accent-7: #8f9097;
  --color-accent-8: #ffe1c8;
  --color-accent-9: #f7cdd0;
  --color-accent-10: #d7cdef;
  --color-accent-11: #d3f1ee;
  --color-accent-12: #d8eab8;
  --color-accent-13: #d9dddf;
  --color-accent-14: #fbf3de;
  --color-accent-15: #f2e7e8;
  --color-accent-16: #ebe7f3;
  --color-accent-17: #e5f2f0;
  --color-accent-18: #ecf2e1;

  // 同色渐变
  --color-brown-1: #5d2a01;
  --color-brown-2: #7f3b02;
  --color-brown-3: #a14c00;
  --color-brown-4: #c65b00;
  --color-brown-5: #ed6d00;

  --color-orange-1: #cd4c01;
  --color-orange-2: #ed6d00;
  --color-orange-3: #fb8e00;
  --color-orange-4: #ffb74d;
  --color-orange-5: #ffd393;
  --color-orange-6: #fdf0e6;

  --color-tag-confirmed: #5bb462;
  --color-tag-cancelled: #243041;
  --color-tag-created: #2b65f2;
  --color-tag-booked: #bf66ea;
  --color-tag-all: #ed6d00;
  --color-tag-cargo-received: #5963c0;
  --color-tag-departure: #0090e9;
  --color-tag-arrived: #01b7a1;
  --color-tag-completed: #5bb462;
  --color-tag-Departed: #0090e9;

  --color-tag-confirmed-bg: #e8fbe4;
  --color-tag-cancelled-bg: #ebeef1;
  --color-tag-created-bg: #e5f0fb;
  --color-tag-booked-bg: #f3e6fa;
  --color-tag-all-bg: #ffe5cf;
  --color-tag-all-bg-color: #feecf3;
  --color-tag-cargo-received-bg: #eaecff;
  --color-tag-departure-bg: #d9edfa;
  --color-tag-arrived-bg: #e7faf8;
  --color-tag-completed-bg: #e8fbe4;
  --color-tag-Departed-bg: #d9edfa;

  --color-border: #eaebed;
  --color-select-border: #eaebed;
  --border-color-2: #eaebed;
  --color-border-1: #e8eaee;
  --color-border-2: #eaebed;

  --color-mune-active-bg: #fdf5f1;

  --color-dialog-header-bg: #f6f8fa;
  --color-dialog-body-bg: #ffffff;
  --color-drawer-body-bg: #fff;

  // 按钮
  // default
  --color-btn-default-bg-hover: #fff1e6;
  --color-btn-default-bg-color: #fff;
  // dark
  --color-btn-default-dark-bg: #2b2f36;
  --color-btn-default-dark-hover: #ff7500;
  // main-plain
  --color-btn-main-plain-bg-hover: hsl(26, 100%, 95%);
  // main
  --color-btn-main-bg-hover: #d56200;
  --color-btn-main-bg-disabled: rgba(237, 109, 0, 0.3);
  // success
  --color-btn-success-bg-hover: #009765;
  // warning
  --color-btn-warning-bg: #e9b227;
  --color-btn-warning-bg-hover: #d2a023;
  // danger
  --color-btn-danger-bg: #c9353f;
  --color-btn-danger-bg-hover: #b53039;

  --color-tag-checked-all: #fff2e8;
  --color-tag-checked-created: #e5f0fb;
  --color-tag-checked-cancelled: #ebeef1;
  --color-tag-checked-confirmed: #e8fbe4;

  --color-border-top: #eff0f1;

  --color-header-bg: #f6f8fa;

  --management-bg-color: #fff;
  --more-type-bg-color: #fff;

  // 字体
  --font-size-1: 10px;
  --font-size-2: 12px;
  --font-size-3: 14px;
  --font-size-4: 16px;
  --font-size-5: 18px;
  --font-size-6: 24px;
  --font-size-7: 32px;
  --font-size-8: 40px;

  //圆角
  --border-radius-6: 6px;
  --border-radius-12: 12px;
  --border-radius-22: 22px;

  --border-hover-color: #fff1e6;
  --border-cancel-hover-color: #f4f5f5;

  --icon-color-black: #202020;
  --more-filters-background-color: #f9f9f9;
  --addparties-background-color: #eff1f5;

  --badge__content--warning: #ed6d00;
  --tag-info-bg-color: #f2f2f2;
  --tag-info-text-color: #2b2f36;

  --dashboard-text-color: #646a73;

  --el-input-focus: #fff;
  .el-radio {
    --el-radio-input-border: #dcdfe6;
  }
  // 发送邮件部分
  --color-avatar: #fff;
  --color-email-bg: #f6f8fa;
  --color-detail-email-record-bg: #eceef1;
  --color-email-border: #eaebed;
  --w-e-textarea-bg-color: #ffffff;
  --color-divider: #eaebed;
  // 横幅
  --dashboard-scoring-bg-color: linear-gradient(
    251deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 244, 235, 0.5) 22.66%,
    rgba(240, 243, 255, 0.5) 44.57%,
    rgba(224, 247, 249, 0.6) 80.46%,
    rgba(255, 255, 255, 0.3)
  );

  --color-range-text: #2b2f36;
  --tag-bg-color: rgba(239, 239, 240);
  --tips-bg-color: rgba(26, 28, 32, 1);
  --scoring-bg-color: #f2f4f7;

  --scoring-colurful-color: linear-gradient(
    251deg,
    rgba(242, 244, 247) 0%,
    rgba(255, 237, 230) 100%
  );
  --scoring-smile-radio-color: #e0e2e6;

  --color-el-popper-bg: #303133;
  // 滚动条
  --color-scrollbar-thumb: #d9dddf;

  --color-message-box-header-bg: #f6f8fa;
  --color-table-header-bg: #f8f9fd;
  --color-table-click-row-bg: #fff1e6;

  --color-download-file-filter-tag-bg: #eceef0;
  --color-download-file-selected-column-tag-bg: #eceef0;

  --color-tracking-routes-item-bg: #fef8f3;
  --color-tracking-routes-item-leg-bg: #f6f2ee;

  --color-customize-column-right-section-bg: #fffbf7;
  --color-customize-column-right-section-border: #eaebed;
  --color-customize-column-item-bg: #fff;
  --color-customize-column-item-hover-bg: #fff1e5;
  --color-customize-column-item-drag-icon: var(--color-neutral-3);
  --color-customize-column-item-drag-border: var(--color-customize-column-right-section-bg);
  --color-customize-column-item-drag-bg: var(--color-customize-column-right-section-bg);
  --color-customize-column-tabs-header-border: #ebeef5;

  --color-shipment-status-header-bg: #f6f8fa;
  --color-shipment-status-label-bg: #ccd1db;
  --color-shipment-status-shadow: rgba(0, 0, 0, 0.1);

  --color-slider-bg: #fff;
  --color-slider-thumb-start: #2b2f36;

  --color-public-tracking-bg-mask: rgba(255, 255, 255, 0.85);
  --color-public-tracking-search-input-btn: #000;
  --color-public-tracking-search-input-border: #2b2f36;

  --color-v-box-content-drag-bg: #fff;

  --color-toggle-btn-module-bg: #f0f1f3;
  --color-toggle-btn-module-active-bg: #fff;

  --color-user-config-title-bottom-border: #eeeeed;

  --color-container-status-node-bg: #f8f9fd;

  --color-table-stripe-bg: #ffffff;
  --color-table-row-hover-bg: rgba(255, 117, 0, 0.1);

  --color-share-link-bg: #f8f9fd;
  // 输入框禁用的颜色
  --input-disabled-bg-color: #f5f7fa;
  --input-disabled-text-color: #a8abb2;

  --el-disabled-bg-color: #f4f4f4;

  --color-btn-icon-bg: #f6f6fe;

  --color-btn-blue-bg: #f6f6fe;

  --color-btn-default-dark-hover-bg: #2b2f36;

  --color-recent-name: rgba(43, 47, 54, 0.05);
  --color-disabled-bg: #eaebed;

  .el-input {
    --el-border: #eaebed;
  }

  --color-vxe-table-visited-row-bg: #f2f2f2;

  --color-public-tracking-empty-bg: #fff;
  --color-dot-unchecked: #eeeeee;
  --color-dot-checked: #ed6d00;

  --color-system-message-nav-bg: #f6f6f6;
  --color-upload-file-bg: #fef8f2;
  --color-upload-file-color: #b5b9bf;
  --color-upload-file-border-bg: #f5b279;

  --color-personal-preference-bg: #f5f7fa;
}

:root.dark {
  --color-mode: #2b2f36;

  // 文字颜色
  --color-neutral-1: #f0f1f3;
  --color-neutral-2: rgba(240, 241, 243, 0.7);
  --color-neutral-3: rgba(240, 241, 243, 0.3);
  --color-border: #3f434a;
  --color-header-bg: #30353c;

  --border-hover-color: #654f3f;

  --color-download-file-filter-tag-bg: #3f4249;
  --color-download-file-selected-column-tag-bg: #474e57;

  --color-customize-column-right-section-bg: #453b36;
  --color-customize-column-right-section-border: var(--color-theme);
  --color-customize-column-item-bg: #3a4149;
  --color-customize-column-item-hover-bg: #585b60;
  --color-customize-column-item-drag-icon: var(--color-neutral-1);
  --color-customize-column-item-drag-border: var(--color-theme);
  --color-customize-column-item-drag-bg: #7d4c26;
  --color-customize-column-tabs-header-border: #3f434a;

  --color-shipment-status-header-bg: #3f434a;
  --color-shipment-status-shadow: rgba(0, 0, 0, 0.5);
  --color-shipment-status-label-bg: #656f7d;
  --color-shipment-status-detail-path-font-color: #b5b7ba;
  --color-shipment-status-label-font-color: #c6cad0;

  --color-slider-bg: #3f434a;
  --color-slider-thumb-start: #646a73;

  --color-public-tracking-bg-mask: rgba(43, 47, 54, 0.75);
  --color-public-tracking-search-input-btn: #ed6d00;
  --color-public-tracking-search-input-border: #656f7d;

  --color-toggle-btn-module-bg: #434b53;
  --color-toggle-btn-module-active-bg: #656f7d;

  --color-user-config-title-bottom-border: #3f434a;
  --color-container-status-node-bg: #3e454f;

  --color-btn-blue-bg: rgba(255, 255, 255, 0);

  --color-el-btn-pain-theme-border: #ed6d00;
  --color-el-btn-pain-theme-text: #ed6d00;
  --color-el-btn-pain-theme-bg: rgba(237, 109, 0, 0.1);
  --color-el-btn-pain-theme-bg-hover: rgba(237, 109, 0, 0.3);

  --color-btn-default-dark-hover-bg: #d56200;

  --color-btn-icon-bg: #3f434a;

  --color-table-stripe-bg: #2b2f36;
  --color-table-row-hover-bg: rgba(255, 117, 0, 0.1);

  --color-share-link-bg: #3a4149;

  --color-public-tracking-empty-bg: #2b2f36;

  --color-upload-file-bg: rgba(237, 109, 0, 0.2);
  --color-upload-file-color: rgba(240, 241, 243, 0.7);
  --color-upload-file-border-bg: rgba(237, 109, 0, 0.5);

  --color-personal-preference-bg: #343a43;
  // 滚动条
  --color-scrollbar-thumb: #656f7d;

  // 菜单选中背景
  --color-mune-active-bg: #553d2b;

  --color-tracking-routes-item-bg: #403631;
  --color-tracking-routes-item-leg-bg: #524843;

  --color-v-box-content-drag-bg: #2b2f36;

  --color-input-disabled-border: #656f7d;
  // 邮件
  --w-e-toolbar-bg-color: var(--color-email-bg);
  --w-e-textarea-bg-color: var(--color-email-bg);
  --w-e-toolbar-border-color: #656f7d;
  --w-e-toolbar-color: var(--color-neutral-1);
  --w-e-toolbar-active-bg-color: rgba(255, 117, 0, 0.2);
  --w-e-toolbar-active-color: #1a1c20;
  button.w-e-menu-tooltip-v5::before {
    color: var(--color-neutral-1);
  }
  div.w-e-bar-item button:hover {
    color: var(--color-neutral-1);
  }
  --color-email-border: #656f7d;
  --color-email-bg: #3c414a;
  --color-detail-email-record-bg: #343a43;
  --color-divider: #4c515a;
  --color-avatar: var(--color-mode);
  --color-header-bg: #343a43;

  // ElementUI
  --color-message-box-header-bg: #3e454f;
  // 整体背景颜色
  --el-bg-color: #30353c;
  // 按钮边框颜色
  --color-accent-13: #656f7d;
  // 输入框边框颜色
  --el-border: #656f7d;
  .el-input {
    --el-border: #656f7d;
  }
  .el-radio {
    --el-radio-input-border: #656f7d;
  }
  --el-radio-input-border: #656f7d;
  --color-table-header-bg: #34383f;
  --el-input-focus: #2b2f36;
  --color-dialog-header-bg: #3e454f;
  --color-dialog-body-bg: #30353c;
  --color-drawer-body-bg: #2b2f36;
  div.el-card {
    --el-card-bg-color: #30353c;
  }
  --color-el-popper-bg: #1a1c20;
  // --el-bg-color: var(--color-neutral-1);
  --el-bg-color-overlay: #30353c;
  div.el-popper.is-dark {
    --el-bg-color: var(--color-neutral-1);
  }
  --el-disabled-bg-color: rgba(244, 244, 244, 0.2);

  // vxe-table
  --vxe-ui-layout-background-color: #2b2f36;
  --vxe-ui-table-border-color: #3f434a;
  --vxe-ui-table-column-icon-border-color: #6a6d73;
  --color-table-header-bg: #30353c;
  --vxe-ui-table-header-background-color: #30353c;
  --color-table-click-row-bg: #403631;
  --vxe-ui-input-border-color: #656f7d;
  --vxe-ui-table-menu-background-color: #3e454f;
  --color-vxe-table-visited-row-bg: #3c4149;

  button.el-button.el-button--pain-theme {
    border: 1px solid var(--color-el-btn-pain-theme-border);
    background-color: var(--color-el-btn-pain-theme-bg);

    fill: var(--color-el-btn-pain-theme-text);
    color: var(--color-el-btn-pain-theme-text);
    span {
      color: var(--color-el-btn-pain-theme-text);
    }
    &:hover {
      border-color: var(--color-el-btn-pain-theme-border);
      background-color: var(--color-el-btn-pain-theme-bg-hover);
      color: var(--color-white);
      fill: var(--color-white);
    }
  }
}