ui/artalk/src/style/_color.scss
.artalk,
.atk-layer-wrap {
  --at-color-font: #2a2e2e;
  --at-color-deep: #2a2e2e;
  --at-color-sub: #757575;
  --at-color-grey: #747474;
  --at-color-meta: #697182;
  --at-color-border: #eceff2;
  --at-color-light: #4285f4;
  --at-color-bg: #fff;
  --at-color-bg-transl: rgba(255, 255, 255, 0.94);
  --at-color-bg-grey: #f3f4f5;
  --at-color-bg-grey-transl: rgba(244, 244, 244, 0.75);
  --at-color-bg-light: rgba(29, 161, 242, 0.1);
  --at-color-main: #0083ff;
  --at-color-red: #ff5652;
  --at-color-pink: #fa5a57;
  --at-color-yellow: #ff7c37;
  --at-color-green: #4caf50;
  --at-color-gradient: linear-gradient(180deg, transparent, rgba(255, 255, 255));

  &.atk-dark-mode {
    --at-color-font: #fff;
    --at-color-deep: #e7e7e7;
    --at-color-sub: #e7e7e7;
    --at-color-grey: #fff;
    --at-color-meta: #fff;
    --at-color-border: #2d3235;
    --at-color-light: #687a86;
    --at-color-bg: #1e2224;
    --at-color-bg-transl: rgba(30, 34, 36, 0.95);
    --at-color-bg-grey: #46494e;
    --at-color-bg-grey-transl: rgba(8, 8, 8, 0.95);
    --at-color-bg-light: rgba(29, 161, 242, 0.1);
    --at-color-main: #0083ff;
    --at-color-red: #ff5652;
    --at-color-pink: #fa5a57;
    --at-color-yellow: #ff7c37;
    --at-color-green: #4caf50;
    --at-color-gradient: linear-gradient(180deg, transparent, rgba(30, 34, 36, 1));
  }
}
