WonderPen 帮助中心
同鸣联系我们
简体中文
WonderPen指南

内置主题样式

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

明亮主题

详情： 
.theme-light {
  --wp-dark: 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: rgb(47, 117, 191);
  --wp-primary-color-darker: rgb(40, 104, 171);
  --wp-primary-color-hsl: hsl(211, 61%, 47%);
  --wp-primary-color-gray: hsl(211, 0%, 47%);

  --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 0px rgba(0, 0, 0, 0.1);
  --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: rgb(228, 234, 241);
  --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;
  --wp-target-bg: rgba(128, 128, 128, 0.1);
}

夜间主题

详情： 
.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-primary-color-darker: rgb(20, 91, 157);
  --wp-primary-color-hsl: hsl(209, 77%, 43%);
  --wp-primary-color-gray: hsl(209, 0%, 43%);

  --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;
  --wp-target-bg: rgba(255, 255, 255, 0.1);
}

浅绿主题

详情： 
.theme-green {
  --wp-dark: light;

  --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-primary-color--darker: rgb(104, 121, 83);
  --wp-primary-color-hsl: hsl(86, 17%, 50%);
  --wp-primary-color-gray: hsl(86, 10%, 59%);

  --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.1);
  --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-05a);
  --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;
  --wp-target-bg: rgba(128, 128, 128, 0.1);
}

淡黄主题

详情： 
.theme-yellow {
  --wp-dark: light;

  --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: rgb(189, 135, 0);
  --wp-primary-color-darker: rgb(148, 106, 0);
  --wp-primary-color-hsl: hsl(43, 100%, 37%);
  --wp-primary-color-gray: hsl(43, 50%, 37%);

  --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.15);
  --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;
  --wp-target-bg: rgba(128, 128, 128, 0.1);
}

深灰主题

详情： 
.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-primary-color-darker: rgb(24, 145, 164);
  --wp-primary-color-hsl: hsl(188, 72%, 47%);
  --wp-primary-color-gray: hsl(188, 12%, 47%);

  --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;
  --wp-target-bg: rgba(255, 255, 255, 0.1);
}

暗紫主题

详情： 
.theme-gray {
  --wp-dark: dark;

  --wp-primary-color-05a: rgba(189, 147, 249, 0.05);
  --wp-primary-color-10a: rgba(189, 147, 249, 0.1);
  --wp-primary-color-25a: rgba(189, 147, 249, 0.25);
  --wp-primary-color-50a: rgba(189, 147, 249, 0.5);
  --wp-primary-color: rgb(189, 147, 249);
  --wp-primary-color-darker: hsl(265, 89%, 68%);
  --wp-primary-color-hsl: hsl(265, 89%, 78%);
  --wp-primary-color-gray: hsl(265, 39%, 78%);

  --wp-bg-05: #ebedf4;
  --wp-bg-05a: rgba(40, 42, 54, 0.05);
  --wp-bg-10: #e9eaeb;
  --wp-bg-10a: rgba(40, 42, 54, 0.10);
  --wp-bg-25: #c9cacd;
  --wp-bg-25a: rgba(40, 42, 54, 0.25);
  --wp-bg-50: #88888d;
  --wp-bg-50a: rgba(40, 42, 54, 0.5);
  --wp-bg-100: rgb(40 42 54);

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

// common
--wp-text-color-2-reverse: var(--wp-bg-25);
  --wp-text-color-2: rgba(248, 248, 242, 0.4);
  --wp-text-color-on-primary-bg: #f8f8f2;
  --wp-text-color-reverse: #f8f8f2;
  --wp-text-color: rgba(248, 248, 242, 0.8);
  --wp-text-highlight-bg: rgba(255, 184, 108, 0.5);
  --wp-text-highlight-border: rgba(255, 184, 108, 0.9);
  --wp-link-color: var(--wp-primary-color);
  --wp-link-color-hover: var(--wp-primary-color-50a);

  --wp-border-color-2: rgba(68, 71, 90, 0.8);
  --wp-border-color: rgba(68, 71, 90);
  --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: hsl(231, 15%, 20%);
  --wp-hover-bg: var(--wp-primary-color-25a);
  --wp-input-bg: #282a36;
  --wp-info-bg: rgba(68, 71, 90, 0.38);
  --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: #282a36;
  --wp-paper-bg-rgb: 40, 42, 54;
  --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(98, 114, 164, 0.25);
  --wp-selected-bg: var(--wp-primary-color);
  --wp-selected-text-color-blur: var(--wp-text-color-2);
  --wp-selected-text-color: #f8f8f2;

// top bar
--wp-minimal-bar-bg: rgba(68, 71, 90, 0.9);
  --wp-top-bar-bg: #282a36;
  --wp-top-bar-button-pressed: #44475a;
  --wp-top-bar-fill-color-1: #282a36;
  --wp-top-bar-fill-color-2: #44475a;
  --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: #282a36;

// 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(248, 248, 242, 0);
  --wp-scrollbar-hander-bg: rgba(0, 0, 0, 0.2);
  --wp-scrollbar-hander-border-color: rgba(248, 248, 242, 0.8);
  --wp-scrollbar-thumb-compose: rgba(248, 248, 242, 0.1);
  --wp-scrollbar-thumb-hover: rgba(248, 248, 242, 0.15);
  --wp-scrollbar-thumb: rgba(248, 248, 242, 0.1);
  --wp-scrollbar-track-hover: rgba(248, 248, 242, 0.07);
  --wp-scrollbar-track: rgba(248, 248, 242, 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: hsl(231, 15%, 18%);
  --wp-board-note-card-bg: hsl(232, 14%, 31%);
  --wp-editor-border-splitter-compose: rgba(248, 248, 242, 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: rgba(248, 248, 242, 0.01);
  --wp-editor-cursor-color: rgba(248, 248, 242, 0.8);
  --wp-editor-font-color: var(--wp-text-color);
  --wp-editor-keyword: #1d408c;
  --wp-editor-md-tag-color: rgba(248, 248, 242, 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(248, 248, 242, 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: #282a36;
  --wp-status-bar-bg: #282a36;
  --wp-status-bar-selected-bg: var(--wp-primary-color);

  --wp-kanban-card-bg: hsl(231, 15%, 28%);
  --wp-kanban-column-bg: hsl(231, 15%, 22%);

// right
--wp-memo-bg: hsl(231, 15%, 18%);
  --wp-card-list-border-color: var(--wp-border-color);

// license
--wp-license-bg: var(--wp-primary-color-05a);
  --wp-license-border: #44475a;
  --wp-license-text-color-2: #6272a4;

// 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: #ff5555;
  --wp-warning-color: #ffb86c;
  --wp-success-color: hsla(135, 94%, 65%, 0.75);

// other components
--wp-tippy-bg: hsl(225, 27%, 51%);
  --wp-tippy-border: hsl(231, 15%, 18%);
  --wp-tippy-text: var(--wp-text-color);
  --wp-toast-bg: hsl(231, 15%, 18%);
  --wp-toast-border: hsl(232, 14%, 41%);
  --wp-tooltip-bg: rgba(248, 248, 242, 0.95);
  --wp-tooltip-border: #ffb86c;
  --wp-tooltip-text: #555;
  --wp-win-close-btn-hover-bg: #ff5555;
  --wp-win-close-btn-hover-text-color: #f8f8f2;
  --wp-lab-color: #ffb86c;
  --wp-target-bg: rgba(248, 248, 242, 0.1);
}
返回目录
TominLab©2024