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-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;
  --border-color-1: #eaebed;
  --border-color-2: #eaebed;
  --color-border-1: #e8eaee;
  --color-border-2: #eaebed;

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

  --color-table-header-bg: #f8f9fd;

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

  // 按钮
  // 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;
  // success
  --color-btn-success-bg-hover: #009765;
  // warning
  --color-btn-warning-bg: #e9b227;
  --color-btn-warning-bg-hover: #d2a023;
  // danger
  --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-bolor: #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;

  // 发送邮件部分

  --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-scrollbar-thumb: #d9dddf;

  --color-table-header-bg: #f8f9fd;
  --color-table-click-row-bg: #ffe3cc;

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

: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-scrollbar-thumb: #656f7d;

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

  // 邮件
  --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);
  --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
  // 整体背景颜色
  --el-bg-color: #2b2f36;
  // 按钮边框颜色
  --color-accent-13: #656f7d;
  --el-border: #656f7d;
  .el-input {
    --el-input-border: #656f7d;
  }
  --color-table-header-bg: #34383f;
  --el-input-focus: #2b2f36;
  --color-dialog-header-bg: #3e454f;
  --color-dialog-body-bg: #30353c;

  // 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;

  --color-table-click-row-bg: #8b582f;
}