跳到主要内容

内置主题样式

下面是系统内置的部分主题样式，注意随着 WonderPen 的迭代升级，内置的主题样式可能会发生改变，本文档可能不能及时更新，因此下列样式仅供参考使用。

明亮主题​

.theme-light {
  --wp-primary-color-05a: rgba(47, 117, 191, 0.05);
  --wp-primary-color-10a: rgba(47, 117, 191, 0.1);
  --wp-primary-color-25a: rgba(47, 117, 191, 0.25);
  --wp-primary-color-50a: rgba(47, 117, 191, 0.5);
  --wp-primary-color: rgba(47, 117, 191, 1);

  --wp-bg-05: #0d0d0d;
  --wp-bg-05a: rgba(255, 255, 255, 0.05);
  --wp-bg-10: #1a1a1a;
  --wp-bg-10a: rgba(255, 255, 255, 0.10);
  --wp-bg-25: #404040;
  --wp-bg-25a: rgba(255, 255, 255, 0.25);
  --wp-bg-50: #808080;
  --wp-bg-50a: rgba(255, 255, 255, 0.5);
  --wp-bg-100: #fff;

  --wp-fg-05: #f2f2f2;
  --wp-fg-05a: rgba(0, 0, 0, 0.05);
  --wp-fg-10: #e5e5e5;
  --wp-fg-10a: rgba(0, 0, 0, 0.10);
  --wp-fg-25: #bfbfbf;
  --wp-fg-25a: rgba(0, 0, 0, 0.25);
  --wp-fg-50: #7f7f7f;
  --wp-fg-50a: rgba(0, 0, 0, 0.5);
  --wp-fg-100: #000;

  // common
  --wp-text-color-2-reverse: var(--wp-bg-50a);
  --wp-text-color-2: var(--wp-fg-50);
  --wp-text-color-on-primary-bg: #fff;
  --wp-text-color-reverse: #fff;
  --wp-text-color: #000;
  --wp-text-highlight-bg: #f6f1ae;
  --wp-text-highlight-border: #afab75;
  --wp-link-color: var(--wp-primary-color);
  --wp-link-color-hover: rgba(47, 117, 191, 0.6);

  --wp-border-color-2: #e0e4e8;
  --wp-border-color: #c0c3cc;
  --wp-caret-color: #30afff;

  --wp-danger-bg: hsla(1deg, 100%, 62%, 20%);
  --wp-danger-bg-hl: hsla(1deg, 100%, 62%, 30%);
  --wp-danger-border: hsla(1deg, 100%, 62%, 60%);
  --wp-danger-text-color: hsla(1deg, 100%, 62%, 90%);
  --wp-focus-outline-color-danger: hsla(1deg, 100%, 62%, 60%);
  --wp-focus-outline-color: var(--wp-primary-color-25a);
  --wp-gray-bg: var(--wp-fg-05);
  --wp-hover-bg: var(--wp-fg-10a);
  --wp-input-bg: var(--wp-bg-100);
  --wp-info-bg: var(--wp-gray-bg);
  --wp-item-icon-bg-color: var(--wp-bg-100);
  --wp-item-icon-color: var(--wp-text-color-2);
  --wp-overlay-bg: var(--wp-fg-25a);
  --wp-paper-bg: var(--wp-bg-100);
  --wp-paper-bg-rgb: 255, 255, 255;
  --wp-shadow-lg: 1px 2px 2px 1px rgba(0, 0, 0, 0.2);
  --wp-shadow-sm: 0 1px 1px 0px rgba(0, 0, 0, 0.1);
  --wp-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.1);

  --wp-selected-bg-blur: #cad2de;
  --wp-selected-bg: var(--wp-primary-color);
  --wp-selected-text-color-blur: #000;
  --wp-selected-text-color: var(--wp-text-color-reverse);

  // top bar
  --wp-minimal-bar-bg: rgba(255, 255, 255, 0.8);
  --wp-top-bar-bg: #f3f4f6;
  --wp-top-bar-button-pressed: var(--wp-fg-10a);
  --wp-top-bar-fill-color-1: #fff;
  --wp-top-bar-fill-color-2: #f5f5f5;
  --wp-top-bar-icon-hl: var(--wp-primary-color);
  --wp-top-bar-line-color: #999;
  --wp-top-bar-shadow: rgba(0, 0, 0, 0.1);
  --wp-top-bar-selected-text-color: var(--wp-primary-color);
  --wp-top-bar-selected-bg: var(--wp-primary-color-10a);

  // left
  --wp-frame-left-bg-color: #dbe2ed;

  // tree
  --wp-tree-drag-indicator-color: var(--wp-primary-color);
  --wp-tree-drag-select-bg-color: var(--wp-primary-color-25a);
  --wp-tree-hover-bg: var(--wp-primary-color-10a);

  // scroll bar
  --wp-scrollbar-corner: rgba(255, 255, 255, 0);
  --wp-scrollbar-hander-bg: rgba(0, 0, 0, 0.2);
  --wp-scrollbar-hander-border-color: rgba(255, 255, 255, 0.8);
  --wp-scrollbar-thumb-compose: rgba(255, 255, 255, 0.1);
  --wp-scrollbar-thumb-hover: rgba(0, 0, 0, 0.2);
  --wp-scrollbar-thumb: rgba(0, 0, 0, 0.12);
  --wp-scrollbar-track-hover: transparent;
  --wp-scrollbar-track: transparent;

  // editor
  --wp-board-bg: var(--wp-paper-bg);
  --wp-board-drag-add-bg: var(--wp-primary-color-10a);
  --wp-board-grid-color: rgba(0, 0, 0, 0.05);
  --wp-board-card-bg: var(--wp-paper-bg);
  --wp-editor-border-splitter-compose: rgba(255, 255, 255, 0.1);
  --wp-editor-code-bg: var(--wp-fg-05);
  --wp-board-note-card-bg: var(--wp-memo-bg);
  --wp-editor-compose-bg-color-light: rgba(128, 128, 128, 0.9);
  --wp-editor-compose-bg-color: #333;
  --wp-editor-cursor-color: #000;
  --wp-editor-font-color: var(--wp-text-color);
  --wp-editor-keyword: #1d408c;
  --wp-editor-md-tag-color: rgba(0, 0, 0, 0.3);
  --wp-editor-negative: var(--wp-error-color);
  --wp-editor-number: #926;
  --wp-editor-operator: #be6ce3;
  --wp-editor-positive: var(--wp-success-color);
  --wp-editor-selected-bg-unfocused: rgba(0, 0, 0, 0.2);
  --wp-editor-selected-bg: var(--wp-primary-color);
  --wp-editor-selected-text-color: var(--wp-text-color-reverse);
  --wp-editor-wrapper-bg: #dee0e5;
  --wp-editor_focus_bg: var(--wp-primary-color-10a);
  --wp-editor_focus_hl: var(--wp-primary-color);
  --wp-editor-bg-line-color: var(--wp-border-color-2);

  --wp-nav-bar-bg: #f7f7f7;
  --wp-status-bar-bg: #f7f7f7;
  --wp-status-bar-selected-bg: #ddd;

  --wp-kanban-card-bg: var(--wp-paper-bg);
  --wp-kanban-column-bg: #f6f8fa;

  // right
  --wp-memo-bg: #ffe;
  --wp-card-list-border-color: var(--wp-border-color-2);

  // license
  --wp-license-bg: #9FD9F0;
  --wp-license-border: #7db4ca;
  --wp-license-text-color-2: #59797e;

  // tag
  --wp-tag-blue-bg-color: #e6f7ff;
  --wp-tag-blue-border-color: #91d5ff;
  --wp-tag-blue-font-color: #1890ff;
  --wp-tag-green-bg-color: #f6ffed;
  --wp-tag-green-border-color: #b7eb8f;
  --wp-tag-green-font-color: #52c41a;
  --wp-tag-purple-bg-color: #f9f0ff;
  --wp-tag-purple-border-color: #d3adf7;
  --wp-tag-purple-font-color: #722ed1;
  --wp-tag-yellow-bg-color: #fff7e6;
  --wp-tag-yellow-border-color: #ffd591;
  --wp-tag-yellow-font-color: #fa8c16;

  --wp-error-color: #c92a2a;
  --wp-warning-color: #f2ab1f;
  --wp-success-color: hsl(132, 39%, 47%);

  // other components
  --wp-tippy-bg: rgba(0, 0, 0, 1);
  --wp-tippy-border: rgba(255, 255, 255, 1);
  --wp-tippy-text: rgba(255, 255, 255, 1);
  --wp-toast-bg: #fff;
  --wp-toast-border: var(--wp-border-color);
  --wp-tooltip-bg: rgba(0, 0, 0, 0.8);
  --wp-tooltip-border: #fcc419;
  --wp-tooltip-text: #fff;
  --wp-win-close-btn-hover-bg: #C42C1D;
  --wp-win-close-btn-hover-text-color: #fff;
}

夜间主题​

.theme-dark {
  --wp-dark: dark;

  --wp-primary-color-05a: rgba(25, 113, 194, 0.05);
  --wp-primary-color-10a: rgba(25, 113, 194, 0.1);
  --wp-primary-color-25a: rgba(25, 113, 194, 0.25);
  --wp-primary-color-50a: rgba(25, 113, 194, 0.5);
  --wp-primary-color: rgb(25, 113, 194);

  --wp-bg-05: #f2f2f2;
  --wp-bg-05a: rgba(0, 0, 0, 0.05);
  --wp-bg-10: #e5e5e5;
  --wp-bg-10a: rgba(0, 0, 0, 0.10);
  --wp-bg-25: #bfbfbf;
  --wp-bg-25a: rgba(0, 0, 0, 0.25);
  --wp-bg-50: #7f7f7f;
  --wp-bg-50a: rgba(0, 0, 0, 0.5);
  --wp-bg-100: #202223;

  --wp-fg-05: #0d0d0d;
  --wp-fg-05a: rgba(255, 255, 255, 0.05);
  --wp-fg-10: #1a1a1a;
  --wp-fg-10a: rgba(255, 255, 255, 0.10);
  --wp-fg-25: #404040;
  --wp-fg-25a: rgba(255, 255, 225, 0.25);
  --wp-fg-50: #808080;
  --wp-fg-50a: rgba(255, 255, 255, 0.5);
  --wp-fg-100: #fff;

  // common
  --wp-text-color-2-reverse: var(--wp-bg-25);
  --wp-text-color-2: var(--wp-fg-50);
  --wp-text-color-on-primary-bg: #fff;
  --wp-text-color-reverse: #fff;
  --wp-text-color: rgba(255, 255, 255, 0.8);
  --wp-text-highlight-bg: #726e51;
  --wp-text-highlight-border: #c3c3c3;
  --wp-link-color: var(--wp-primary-color);
  --wp-link-color-hover: #6dc2ff;

  --wp-border-color-2: #404040;
  --wp-border-color: #404040;
  --wp-caret-color: #6dc2ff;

  --wp-danger-bg: hsla(1deg, 100%, 67%, 20%);
  --wp-danger-bg-hl: hsla(1deg, 100%, 67%, 30%);
  --wp-danger-border: hsla(1deg, 100%, 67%, 60%);
  --wp-danger-text-color: hsla(1deg, 100%, 67%, 90%);
  --wp-focus-outline-color-danger: hsla(1deg, 100%, 67%, 60%);
  --wp-focus-outline-color: var(--wp-primary-color-25a);
  --wp-gray-bg: #202223;
  --wp-hover-bg: var(--wp-fg-25a);
  --wp-input-bg: #252629;
  --wp-info-bg: #2a2b2e;
  --wp-item-icon-bg-color: var(--wp-bg-100);
  --wp-item-icon-color: var(--wp-text-color-2);
  --wp-overlay-bg: var(--wp-bg-50a);
  --wp-paper-bg: #202223;
  --wp-paper-bg-rgb: 32, 34, 35;
  --wp-shadow-lg: 1px 2px 2px 1px rgba(0, 0, 0, 0.2);
  --wp-shadow-sm: 0 1px 1px 0px rgba(0, 0, 0, 0.1);
  --wp-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.1);

  --wp-selected-bg-blur: rgba(90, 92, 98, 0.5);
  --wp-selected-bg: var(--wp-primary-color);
  --wp-selected-text-color-blur: var(--wp-text-color-2);
  --wp-selected-text-color: #fff;

  // top bar
  --wp-minimal-bar-bg: rgba(40, 40, 40, 0.9);
  --wp-top-bar-bg: var(--wp-bg-100);
  --wp-top-bar-button-pressed: #3b3b3b;
  --wp-top-bar-fill-color-1: #111;
  --wp-top-bar-fill-color-2: #222;
  --wp-top-bar-icon-hl: var(--wp-primary-color);
  --wp-top-bar-line-color: var(--wp-fg-50);
  --wp-top-bar-shadow: rgba(0, 0, 0, 0.1);
  --wp-top-bar-selected-text-color: var(--wp-primary-color);
  --wp-top-bar-selected-bg: var(--wp-primary-color-25a);

  // left
  --wp-frame-left-bg-color: #202223;

  // tree
  --wp-tree-drag-indicator-color: var(--wp-primary-color);
  --wp-tree-drag-select-bg-color: var(--wp-primary-color-25a);
  --wp-tree-hover-bg: var(--wp-primary-color-10a);

  // scroll bar
  --wp-scrollbar-corner: rgba(255, 255, 255, 0);
  --wp-scrollbar-hander-bg: rgba(0, 0, 0, 0.2);
  --wp-scrollbar-hander-border-color: rgba(255, 255, 255, 0.8);
  --wp-scrollbar-thumb-compose: rgba(255, 255, 255, 0.1);
  --wp-scrollbar-thumb-hover: rgba(255, 255, 255, 0.15);
  --wp-scrollbar-thumb: rgba(255, 255, 255, 0.1);
  --wp-scrollbar-track-hover: rgba(255, 255, 255, 0.07);
  --wp-scrollbar-track: rgba(255, 255, 255, 0.05);

  // editor
  --wp-board-bg: var(--wp-fg-10);
  --wp-board-drag-add-bg: var(--wp-primary-color-10a);
  --wp-board-grid-color: rgba(0, 0, 0, 0.05);
  --wp-board-card-bg: var(--wp-paper-bg);
  --wp-board-note-card-bg: var(--wp-input-bg);
  --wp-editor-border-splitter-compose: rgba(255, 255, 255, 0.1);
  --wp-editor-code-bg: var(--wp-fg-05);
  --wp-editor-compose-bg-color-light: rgba(128, 128, 128, 0.9);
  --wp-editor-compose-bg-color: #111;
  --wp-editor-cursor-color: rgba(255, 255, 255, 0.8);
  --wp-editor-font-color: var(--wp-text-color);
  --wp-editor-keyword: #1d408c;
  --wp-editor-md-tag-color: rgba(255, 255, 255, 0.3);
  --wp-editor-negative: var(--wp-error-color);
  --wp-editor-number: #926;
  --wp-editor-operator: #be6ce3;
  --wp-editor-positive: var(--wp-success-color);
  --wp-editor-selected-bg-unfocused: var(--wp-selected-bg-blur);
  --wp-editor-selected-bg: var(--wp-primary-color);
  --wp-editor-selected-text-color: var(--wp-fg-100);
  --wp-editor-wrapper-bg: rgba(255, 255, 255, 0.01);
  --wp-editor_focus_bg: var(--wp-primary-color-10a);
  --wp-editor_focus_hl: var(--wp-primary-color);
  --wp-editor-bg-line-color: rgba(255, 255, 255, 0.08);

  --wp-nav-bar-bg: #202223;
  --wp-status-bar-bg: #202223;
  --wp-status-bar-selected-bg: var(--wp-fg-10a);

  --wp-kanban-card-bg: rgba(255, 255, 255, 0.1);
  --wp-kanban-column-bg: var(--wp-fg-10);

  // right
  --wp-memo-bg: var(--wp-input-bg);
  --wp-card-list-border-color: var(--wp-border-color);

  // license
  --wp-license-bg: #042533;
  --wp-license-border: #09425b;
  --wp-license-text-color-2: #59797e;

  // tag
  --wp-tag-blue-bg-color: #e6f7ff;
  --wp-tag-blue-border-color: #91d5ff;
  --wp-tag-blue-font-color: #1890ff;
  --wp-tag-green-bg-color: #464845;
  --wp-tag-green-border-color: #607d4a;
  --wp-tag-green-font-color: #45a914;
  --wp-tag-purple-bg-color: #423e46;
  --wp-tag-purple-border-color: #997eb3;
  --wp-tag-purple-font-color: #c49aff;
  --wp-tag-yellow-bg-color: #4c4a45;
  --wp-tag-yellow-border-color: #b19362;
  --wp-tag-yellow-font-color: #e6b37c;

  --wp-error-color: #c92a2a;
  --wp-warning-color: #af9217;
  --wp-success-color: hsl(135, 27%, 43%);

  // other components
  --wp-tippy-bg: rgba(99, 99, 99, 1);
  --wp-tippy-border: rgba(255, 255, 255, 0.5);
  --wp-tippy-text: rgba(255, 255, 255, 1);
  --wp-toast-bg: #5a5a5a;
  --wp-toast-border: #999;
  --wp-tooltip-bg: rgba(255, 255, 255, 0.95);
  --wp-tooltip-border: #fcc419;
  --wp-tooltip-text: #555;
  --wp-win-close-btn-hover-bg: #C42C1D;
  --wp-win-close-btn-hover-text-color: #fff;
  --wp-lab-color: #c93;
}

浅绿主题​

.theme-green {
  --wp-primary-color-05a: rgba(130, 149, 105, 0.05);
  --wp-primary-color-10a: rgba(130, 149, 105, 0.1);
  --wp-primary-color-25a: rgba(130, 149, 105, 0.25);
  --wp-primary-color-50a: rgba(130, 149, 105, 0.5);
  --wp-primary-color: rgb(130, 149, 105);

  --wp-bg-05: #0d0d0d;
  --wp-bg-05a: rgba(232, 242, 221, 0.05);
  --wp-bg-10: #1a1a1a;
  --wp-bg-10a: rgba(232, 242, 221, 0.10);
  --wp-bg-25: #404040;
  --wp-bg-25a: rgba(232, 242, 221, 0.25);
  --wp-bg-50: #808080;
  --wp-bg-50a: rgba(232, 242, 221, 0.5);
  --wp-bg-100: #b6cb9f;

  --wp-fg-05: #f2f2f2;
  --wp-fg-05a: rgba(0, 0, 0, 0.05);
  --wp-fg-10: #e5e5e5;
  --wp-fg-10a: rgba(0, 0, 0, 0.10);
  --wp-fg-25: #bfbfbf;
  --wp-fg-25a: rgba(0, 0, 0, 0.25);
  --wp-fg-50: #7f7f7f;
  --wp-fg-50a: rgba(0, 0, 0, 0.5);
  --wp-fg-100: #000;

  // common
  --wp-text-color-2-reverse: var(--wp-bg-50a);
  --wp-text-color-2: #88957a;
  --wp-text-color-on-primary-bg: #fff;
  --wp-text-color-reverse: #fff;
  --wp-text-color: #3d4435;
  --wp-text-highlight-bg: #f6f1ae;
  --wp-text-highlight-border: #afab75;
  --wp-link-color: var(--wp-primary-color);
  --wp-link-color-hover: rgba(130, 149, 105, 0.6);

  --wp-border-color-2: #c5daae;
  --wp-border-color: #9eb683;
  --wp-caret-color: #6ab120;

  --wp-danger-bg: hsla(5deg, 100%, 65%, 20%);
  --wp-danger-bg-hl: hsla(5deg, 100%, 65%, 30%);
  --wp-danger-border: hsla(5deg, 100%, 65%, 60%);
  --wp-danger-text-color: hsla(5deg, 100%, 65%, 90%);
  --wp-focus-outline-color-danger: hsla(5deg, 100%, 65%, 60%);
  --wp-focus-outline-color: var(--wp-primary-color-25a);
  --wp-gray-bg: #cfdfbb;
  --wp-hover-bg: rgba(173, 198, 145, 0.6);
  --wp-input-bg: var(--wp-paper-bg);
  --wp-item-icon-bg-color: #D9E6C8;
  --wp-info-bg: var(--wp-gray-bg);
  --wp-item-icon-color: var(--wp-primary-color);
  --wp-overlay-bg: rgba(0, 0, 0, 0.2);
  --wp-paper-bg: #e0ead2;
  --wp-paper-bg-rgb: 224, 234, 210;
  --wp-shadow-lg: 1px 2px 2px 1px rgba(0, 0, 0, 0.2);
  --wp-shadow-sm: 0 1px 1px 0px rgba(0, 0, 0, 0.1);
  --wp-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.1);

  --wp-selected-bg-blur: #c4d3b6;
  --wp-selected-bg: var(--wp-primary-color);
  --wp-selected-text-color-blur: #000;
  --wp-selected-text-color: var(--wp-text-color-reverse);

  // top bar
  --wp-minimal-bar-bg: #D9E6C8;
  --wp-top-bar-bg: #c7d8b7;
  --wp-top-bar-button-pressed: rgba(130, 149, 105, 0.4);
  --wp-top-bar-fill-color-1: #D9E6C8;
  --wp-top-bar-fill-color-2: #D9E6C8;
  --wp-top-bar-line-color: var(--wp-primary-color);
  --wp-top-bar-icon-hl: var(--wp-primary-color);
  --wp-top-bar-shadow: rgba(0, 0, 0, 0.1);
  --wp-top-bar-selected-text-color: var(--wp-text-color);
  --wp-top-bar-selected-bg: var(--wp-primary-color-25a);

  // left
  --wp-frame-left-bg-color: #d9e6c8;

  // tree
  --wp-tree-drag-indicator-color: var(--wp-primary-color);
  --wp-tree-drag-select-bg-color: var(--wp-primary-color-25a);
  --wp-tree-hover-bg: var(--wp-primary-color-25a);

  // scroll bar
  --wp-scrollbar-corner: rgba(255, 255, 255, 0);
  --wp-scrollbar-hander-bg: rgba(0, 0, 0, 0.2);
  --wp-scrollbar-hander-border-color: rgba(255, 255, 255, 0.8);
  --wp-scrollbar-thumb-compose: rgba(255, 255, 255, 0.1);
  --wp-scrollbar-thumb-hover: rgba(130, 149, 105, 0.42);
  --wp-scrollbar-thumb: rgba(130, 149, 105, 0.24);
  --wp-scrollbar-track-hover: rgba(0, 0, 0, 0.05);
  --wp-scrollbar-track: rgba(187, 196, 175, 0.2);

  // editor
  --wp-board-bg: var(--wp-paper-bg);
  --wp-board-drag-add-bg: var(--wp-primary-color-10a);
  --wp-board-grid-color: rgba(0, 0, 0, 0.05);
  --wp-board-card-bg: var(--wp-paper-bg);
  --wp-board-note-card-bg: var(--wp-input-bg);
  --wp-editor-border-splitter-compose: rgba(255, 255, 255, 0.1);
  --wp-editor-code-bg: #ebf2e3;
  --wp-editor-compose-bg-color-light: rgba(128, 128, 128, 0.9);
  --wp-editor-compose-bg-color: #333;
  --wp-editor-cursor-color: #000;
  --wp-editor-font-color: var(--wp-text-color);
  --wp-editor-keyword: #1d408c;
  --wp-editor-md-tag-color: var(--wp-primary-color-50a);
  --wp-editor-negative: var(--wp-error-color);
  --wp-editor-number: #926;
  --wp-editor-operator: #be6ce3;
  --wp-editor-positive: var(--wp-success-color);
  --wp-editor-selected-bg-unfocused: var(--wp-selected-bg-blur);
  --wp-editor-selected-bg: var(--wp-primary-color);
  --wp-editor-selected-text-color: var(--wp-text-color-reverse);
  --wp-editor-wrapper-bg: #cedcbb;
  --wp-editor_focus_bg: var(--wp-primary-color-10a);
  --wp-editor_focus_hl: var(--wp-primary-color);
  --wp-editor-bg-line-color: var(--wp-border-color-2);

  --wp-nav-bar-bg: #D9E6C8;
  --wp-status-bar-bg: #D9E6C8;
  --wp-status-bar-selected-bg: #bbcda1;

  --wp-kanban-card-bg: var(--wp-paper-bg);
  --wp-kanban-column-bg: #f2fae8;

  // right
  --wp-memo-bg: #D9E6C8;
  --wp-card-list-border-color: var(--wp-border-color);

  // license
  --wp-license-bg: #c3d3b3;
  --wp-license-border: #abc196;
  --wp-license-text-color-2: #8d9d7f;

  // tag
  --wp-tag-blue-bg-color: #e6f7ff;
  --wp-tag-blue-border-color: #91d5ff;
  --wp-tag-blue-font-color: #1890ff;
  --wp-tag-green-bg-color: #f6ffed;
  --wp-tag-green-border-color: #b7eb8f;
  --wp-tag-green-font-color: #52c41a;
  --wp-tag-purple-bg-color: #f9f0ff;
  --wp-tag-purple-border-color: #d3adf7;
  --wp-tag-purple-font-color: #722ed1;
  --wp-tag-yellow-bg-color: #fff7e6;
  --wp-tag-yellow-border-color: #ffd591;
  --wp-tag-yellow-font-color: #fa8c16;

  --wp-error-color: #c92a2a;
  --wp-warning-color: #f2ab1f;
  --wp-success-color: hsl(132, 27%, 45%);

  // other components
  --wp-tippy-bg: var(--wp-primary-color);
  --wp-tippy-border: rgba(255, 255, 255, 1);
  --wp-tippy-text: rgba(255, 255, 255, 1);
  --wp-toast-bg: #fff;
  --wp-toast-border: var(--wp-border-color);
  --wp-tooltip-bg: rgba(0, 0, 0, 0.8);
  --wp-tooltip-border: #fcc419;
  --wp-tooltip-text: #fff;
  --wp-win-close-btn-hover-bg: #C42C1D;
  --wp-win-close-btn-hover-text-color: #fff;
}

淡黄主题​

.theme-yellow {
  --wp-primary-color-05a: rgba(189, 135, 0, 0.05);
  --wp-primary-color-10a: rgba(189, 135, 0, 0.1);
  --wp-primary-color-25a: rgba(189, 135, 0, 0.25);
  --wp-primary-color-50a: rgba(189, 135, 0, 0.5);
  --wp-primary-color: rgba(189, 135, 0, 1);

  --wp-bg-05: #0d0d0d;
  --wp-bg-05a: rgba(232, 242, 221, 0.05);
  --wp-bg-10: #1a1a1a;
  --wp-bg-10a: rgba(232, 242, 221, 0.10);
  --wp-bg-25: #404040;
  --wp-bg-25a: rgba(232, 242, 221, 0.25);
  --wp-bg-50: #808080;
  --wp-bg-50a: rgba(232, 242, 221, 0.5);
  --wp-bg-100: #bd8700;

  --wp-fg-05: #f2f2f2;
  --wp-fg-05a: rgba(0, 0, 0, 0.05);
  --wp-fg-10: #e5e5e5;
  --wp-fg-10a: rgba(0, 0, 0, 0.10);
  --wp-fg-25: #bfbfbf;
  --wp-fg-25a: rgba(0, 0, 0, 0.25);
  --wp-fg-50: #7f7f7f;
  --wp-fg-50a: rgba(0, 0, 0, 0.5);
  --wp-fg-100: #000;

  // common
  --wp-text-color-2-reverse: var(--wp-bg-50a);
  --wp-text-color-2: #b0a170;
  --wp-text-color-on-primary-bg: #fff;
  --wp-text-color-reverse: #fff;
  --wp-text-color: #503809;
  --wp-text-highlight-bg: #eefaff;
  --wp-text-highlight-border: #6a8f9f;
  --wp-link-color: var(--wp-primary-color);
  --wp-link-color-hover: #D2CBB6;

  --wp-border-color-2: #ded5c1;
  --wp-border-color: #c2b38e;
  --wp-caret-color: #dbac35;

  --wp-danger-bg: hsla(6deg, 100%, 63%, 20%);
  --wp-danger-bg-hl: hsla(6deg, 100%, 63%, 30%);
  --wp-danger-border: hsla(6deg, 100%, 63%, 60%);
  --wp-danger-text-color: hsla(6deg, 100%, 63%, 90%);
  --wp-focus-outline-color-danger: hsla(6deg, 100%, 63%, 60%);
  --wp-focus-outline-color: var(--wp-primary-color-25a);
  --wp-gray-bg: #EFE8D3;
  --wp-hover-bg: rgba(201, 188, 148, 0.7);
  --wp-input-bg: var(--wp-paper-bg);
  --wp-info-bg: var(--wp-gray-bg);
  --wp-item-icon-bg-color: #fffbf2;
  --wp-item-icon-color: var(--wp-primary-color);
  --wp-overlay-bg: rgba(0, 0, 0, 0.2);
  --wp-paper-bg: #fdf6e3;
  --wp-paper-bg-rgb: 255, 246, 225;
  --wp-shadow-lg: 1px 2px 2px 1px rgba(0, 0, 0, 0.2);
  --wp-shadow-sm: 0 1px 1px 0px rgba(0, 0, 0, 0.1);
  --wp-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.1);

  --wp-selected-bg-blur: var(--wp-primary-color-25a);
  --wp-selected-bg: var(--wp-primary-color);
  --wp-selected-text-color-blur: #000;
  --wp-selected-text-color: var(--wp-text-color-reverse);

  // top bar
  --wp-minimal-bar-bg: var(--wp-paper-bg);
  --wp-top-bar-bg: #EFE8D3;
  --wp-top-bar-button-pressed: rgba(189, 135, 0, 0.15);
  --wp-top-bar-fill-color-1: #fff6de;
  --wp-top-bar-fill-color-2: #fff0c9;
  --wp-top-bar-line-color: #b4a689;
  --wp-top-bar-icon-hl: var(--wp-primary-color);
  --wp-top-bar-shadow: rgba(0, 0, 0, 0.1);
  --wp-top-bar-selected-text-color: var(--wp-text-color);
  --wp-top-bar-selected-bg: var(--wp-primary-color-25a);

  // left
  --wp-frame-left-bg-color: #DFD6BF;

  // tree
  --wp-tree-drag-indicator-color: var(--wp-primary-color);
  --wp-tree-drag-select-bg-color: var(--wp-primary-color-25a);
  --wp-tree-hover-bg: var(--wp-primary-color-10a);

  // scroll bar
  --wp-scrollbar-corner: rgba(255, 255, 255, 0);
  --wp-scrollbar-hander-bg: rgba(0, 0, 0, 0.2);
  --wp-scrollbar-hander-border-color: rgba(255, 255, 255, 0.8);
  --wp-scrollbar-thumb-compose: rgba(255, 255, 255, 0.1);
  --wp-scrollbar-thumb-hover: rgba(141, 139, 133, 0.6);
  --wp-scrollbar-thumb: rgba(183, 179, 167, 0.6);
  --wp-scrollbar-track-hover: rgba(0, 0, 0, 0.05);
  --wp-scrollbar-track: rgba(0, 0, 0, 0.01);

  // editor
  --wp-board-bg: var(--wp-paper-bg);
  --wp-board-drag-add-bg: var(--wp-primary-color-10a);
  --wp-board-grid-color: rgba(0, 0, 0, 0.05);
  --wp-board-card-bg: var(--wp-paper-bg);
  --wp-board-note-card-bg: var(--wp-input-bg);
  --wp-editor-border-splitter-compose: rgba(255, 255, 255, 0.1);
  --wp-editor-code-bg: #ffe8a7;
  --wp-editor-compose-bg-color-light: rgba(128, 128, 128, 0.9);
  --wp-editor-compose-bg-color: #333;
  --wp-editor-cursor-color: #000;
  --wp-editor-font-color: var(--wp-text-color);
  --wp-editor-keyword: #1d408c;
  --wp-editor-md-tag-color: var(--wp-primary-color-50a);
  --wp-editor-negative: var(--wp-error-color);
  --wp-editor-number: #926;
  --wp-editor-operator: #be6ce3;
  --wp-editor-positive: var(--wp-success-color);
  --wp-editor-selected-bg-unfocused: var(--wp-selected-bg-blur);
  --wp-editor-selected-bg: var(--wp-primary-color);
  --wp-editor-selected-text-color: var(--wp-text-color-reverse);
  --wp-editor-wrapper-bg: #EFE8D3;
  --wp-editor_focus_bg: var(--wp-primary-color-10a);
  --wp-editor_focus_hl: var(--wp-primary-color);
  --wp-editor-bg-line-color: var(--wp-border-color-2);

  --wp-nav-bar-bg: #EFE8D3;
  --wp-status-bar-bg: #EFE8D3;
  --wp-status-bar-selected-bg: rgba(214, 200, 158, 0.7);

  --wp-kanban-card-bg: var(--wp-paper-bg);
  --wp-kanban-column-bg: #fffbf1;

  // right
  --wp-memo-bg: var(--wp-gray-bg);
  --wp-card-list-border-color: var(--wp-border-color);

  // license
  --wp-license-bg: #e2d09e;
  --wp-license-border: #c2b287;
  --wp-license-text-color-2: #a19163;

  // tag
  --wp-tag-blue-bg-color: #e6f7ff;
  --wp-tag-blue-border-color: #91d5ff;
  --wp-tag-blue-font-color: #1890ff;
  --wp-tag-green-bg-color: #f6ffed;
  --wp-tag-green-border-color: #b7eb8f;
  --wp-tag-green-font-color: #52c41a;
  --wp-tag-purple-bg-color: #f9f0ff;
  --wp-tag-purple-border-color: #d3adf7;
  --wp-tag-purple-font-color: #722ed1;
  --wp-tag-yellow-bg-color: #fff7e6;
  --wp-tag-yellow-border-color: #ffd591;
  --wp-tag-yellow-font-color: #fa8c16;

  --wp-error-color: #c92a2a;
  --wp-warning-color: #f2ab1f;
  --wp-success-color: hsl(122, 25%, 47%);

  // other components
  --wp-tippy-bg: var(--wp-primary-color);
  --wp-tippy-border: rgba(255, 255, 255, 1);
  --wp-tippy-text: rgba(255, 255, 255, 1);
  --wp-toast-bg: #fff;
  --wp-toast-border: var(--wp-border-color);
  --wp-tooltip-bg: rgba(0, 0, 0, 0.8);
  --wp-tooltip-border: #fcc419;
  --wp-tooltip-text: #fff;
  --wp-win-close-btn-hover-bg: #C42C1D;
  --wp-win-close-btn-hover-text-color: #fff;
}

深灰主题​

.theme-gray {
  --wp-dark: dark;

  --wp-primary-color-05a: rgba(34, 184, 207, 0.05);
  --wp-primary-color-10a: rgba(34, 184, 207, 0.1);
  --wp-primary-color-25a: rgba(34, 184, 207, 0.25);
  --wp-primary-color-50a: rgba(34, 184, 207, 0.5);
  --wp-primary-color: rgb(34, 184, 207);

  --wp-bg-05: #f2f2f2;
  --wp-bg-05a: rgba(0, 0, 0, 0.05);
  --wp-bg-10: #e5e5e5;
  --wp-bg-10a: rgba(0, 0, 0, 0.10);
  --wp-bg-25: #bfbfbf;
  --wp-bg-25a: rgba(0, 0, 0, 0.25);
  --wp-bg-50: #7f7f7f;
  --wp-bg-50a: rgba(0, 0, 0, 0.5);
  --wp-bg-100: #48484a;

  --wp-fg-05: #48484a;
  --wp-fg-05a: rgba(255, 255, 255, 0.05);
  --wp-fg-10: #48484a;
  --wp-fg-10a: rgba(255, 255, 255, 0.10);
  --wp-fg-25: #3d3d3d;
  --wp-fg-25a: rgba(255, 255, 225, 0.25);
  --wp-fg-50: #808080;
  --wp-fg-50a: rgba(255, 255, 255, 0.5);
  --wp-fg-100: #fff;

  // common
  --wp-text-color-2-reverse: var(--wp-bg-25);
  --wp-text-color-2: var(--wp-fg-50);
  --wp-text-color-on-primary-bg: #fff;
  --wp-text-color-reverse: #fff;
  --wp-text-color: rgba(255, 255, 255, 0.8);
  --wp-text-highlight-bg: #a0984d;
  --wp-text-highlight-border: #c3c3c3;
  --wp-link-color: var(--wp-primary-color);
  --wp-link-color-hover: #6dc2ff;

  --wp-border-color-2: #404040;
  --wp-border-color: var(--wp-fg-25);
  --wp-caret-color: var(--wp-primary-color);

  --wp-danger-bg: hsla(1deg, 100%, 72%, 20%);
  --wp-danger-bg-hl: hsla(1deg, 100%, 72%, 30%);
  --wp-danger-border: hsla(1deg, 100%, 72%, 60%);
  --wp-danger-text-color: hsla(1deg, 100%, 72%, 90%);
  --wp-focus-outline-color-danger: hsla(1deg, 100%, 72%, 60%);
  --wp-focus-outline-color: var(--wp-primary-color-25a);
  --wp-gray-bg: var(--wp-fg-10);
  --wp-hover-bg: var(--wp-fg-25a);
  --wp-input-bg: #535354;
  --wp-info-bg: #535354;
  --wp-item-icon-bg-color: var(--wp-bg-100);
  --wp-item-icon-color: var(--wp-text-color-2);
  --wp-overlay-bg: var(--wp-bg-50a);
  --wp-paper-bg: var(--wp-bg-100);
  --wp-paper-bg-rgb: 72, 72, 74;
  --wp-shadow-lg: 1px 2px 2px 1px rgba(0, 0, 0, 0.2);
  --wp-shadow-sm: 0 1px 1px 0px rgba(0, 0, 0, 0.1);
  --wp-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.1);

  --wp-selected-bg-blur: rgba(90, 92, 98, 0.75);
  --wp-selected-bg: var(--wp-primary-color);
  --wp-selected-text-color-blur: var(--wp-text-color-2);
  --wp-selected-text-color: #fff;

  // top bar
  --wp-minimal-bar-bg: rgba(40, 40, 40, 0.9);
  --wp-top-bar-bg: #48484a;
  --wp-top-bar-button-pressed: #535354;
  --wp-top-bar-fill-color-1: #3d3d3d;
  --wp-top-bar-fill-color-2: #333;
  --wp-top-bar-icon-hl: var(--wp-primary-color);
  --wp-top-bar-line-color: var(--wp-fg-50);
  --wp-top-bar-shadow: rgba(0, 0, 0, 0.1);
  --wp-top-bar-selected-text-color: var(--wp-primary-color);
  --wp-top-bar-selected-bg: var(--wp-primary-color-25a);

  // left
  --wp-frame-left-bg-color: #48484a;

  // tree
  --wp-tree-drag-indicator-color: var(--wp-primary-color);
  --wp-tree-drag-select-bg-color: var(--wp-primary-color-25a);
  --wp-tree-hover-bg: var(--wp-primary-color-10a);

  // scroll bar
  --wp-scrollbar-corner: rgba(255, 255, 255, 0);
  --wp-scrollbar-hander-bg: rgba(0, 0, 0, 0.2);
  --wp-scrollbar-hander-border-color: rgba(255, 255, 255, 0.8);
  --wp-scrollbar-thumb-compose: rgba(255, 255, 255, 0.1);
  --wp-scrollbar-thumb-hover: rgba(255, 255, 255, 0.15);
  --wp-scrollbar-thumb: rgba(255, 255, 255, 0.1);
  --wp-scrollbar-track-hover: rgba(255, 255, 255, 0.07);
  --wp-scrollbar-track: rgba(255, 255, 255, 0.05);

  // editor
  --wp-board-bg: var(--wp-fg-10);
  --wp-board-drag-add-bg: var(--wp-primary-color-10a);
  --wp-board-grid-color: rgba(0, 0, 0, 0.05);
  --wp-board-card-bg: #535354;
  --wp-board-note-card-bg: #535354;
  --wp-editor-border-splitter-compose: rgba(255, 255, 255, 0.1);
  --wp-editor-code-bg: var(--wp-fg-05);
  --wp-editor-compose-bg-color-light: rgba(128, 128, 128, 0.9);
  --wp-editor-compose-bg-color: #48484a;
  --wp-editor-cursor-color: rgba(255, 255, 255, 0.8);
  --wp-editor-font-color: var(--wp-text-color);
  --wp-editor-keyword: #1d408c;
  --wp-editor-md-tag-color: rgba(255, 255, 255, 0.3);
  --wp-editor-negative: var(--wp-error-color);
  --wp-editor-number: #926;
  --wp-editor-operator: #be6ce3;
  --wp-editor-positive: var(--wp-success-color);
  --wp-editor-selected-bg-unfocused: var(--wp-selected-bg-blur);
  --wp-editor-selected-bg: var(--wp-primary-color);
  --wp-editor-selected-text-color: var(--wp-fg-100);
  --wp-editor-wrapper-bg: rgba(255, 255, 255, 0.01);
  --wp-editor_focus_bg: var(--wp-primary-color-10a);
  --wp-editor_focus_hl: var(--wp-primary-color);
  --wp-editor-bg-line-color: #575757;

  --wp-nav-bar-bg: var(--wp-fg-10);
  --wp-status-bar-bg: var(--wp-fg-10);
  --wp-status-bar-selected-bg: var(--wp-fg-10a);

  --wp-kanban-card-bg: rgba(255, 255, 255, 0.1);
  --wp-kanban-column-bg: var(--wp-fg-10);

  // right
  --wp-memo-bg: #4a4a4c;
  --wp-card-list-border-color: var(--wp-border-color);

  // license
  --wp-license-bg: #042533;
  --wp-license-border: rgba(192, 237, 255, 0.3);
  --wp-license-text-color-2: #59797e;

  // tag
  --wp-tag-blue-bg-color: #e6f7ff;
  --wp-tag-blue-border-color: #91d5ff;
  --wp-tag-blue-font-color: #1890ff;
  --wp-tag-green-bg-color: #464845;
  --wp-tag-green-border-color: #607d4a;
  --wp-tag-green-font-color: #45a914;
  --wp-tag-purple-bg-color: #423e46;
  --wp-tag-purple-border-color: #997eb3;
  --wp-tag-purple-font-color: #c49aff;
  --wp-tag-yellow-bg-color: #4c4a45;
  --wp-tag-yellow-border-color: #b19362;
  --wp-tag-yellow-font-color: #e6b37c;

  --wp-error-color: #c92a2a;
  --wp-warning-color: #af9217;
  --wp-success-color: hsl(139, 43%, 50%);

  // other components
  --wp-tippy-bg: rgba(99, 99, 99, 1);
  --wp-tippy-border: rgba(255, 255, 255, 0.5);
  --wp-tippy-text: rgba(255, 255, 255, 1);
  --wp-toast-bg: #5a5a5a;
  --wp-toast-border: #999;
  --wp-tooltip-bg: rgba(255, 255, 255, 0.95);
  --wp-tooltip-border: #fcc419;
  --wp-tooltip-text: #555;
  --wp-win-close-btn-hover-bg: #C42C1D;
  --wp-win-close-btn-hover-text-color: #fff;
  --wp-lab-color: #c93;
}