Skip to content
WonderPen User Manual

Built-in Theme Styles

Below are some of the built-in theme styles that you can refer to when designing your own theme.

Note that with the iterative upgrade of WonderPen, the built-in theme styles may change. This document may not be updated in time, so the following styles are for reference only.

Light

Section titled “Light”
Details: 
.theme-light {
  --wp-dark: light;

  --wp-primary-color: rgb(47, 117, 191);
  --wp-on-primary-color: rgb(255, 255, 255);

  --wp-text-color: rgb(12, 12, 12);
  --wp-text-color-2: rgb(128, 128, 128);
  --wp-text-highlight-color: rgb(12, 12, 12);
  --wp-text-highlight-bg: rgba(248, 212, 85, 0.4);
  --wp-text-highlight-border: 1px solid rgb(198, 138, 11, 0.7);
  --wp-link-color: var(--wp-primary-color);
  --wp-link-hover-color: hsl(211, 61%, 62%);

  --wp-frame-border-color: 1px solid transparent;
  --wp-border-color: rgba(0, 0, 0, 0.12);
  --wp-border-color-2: rgba(0, 0, 0, 0.07);
  --wp-border-color-3: rgba(255, 255, 255, 0.1);

  --wp-selected-bg: rgba(47, 117, 191, 0.95);
  --wp-on-selected-bg: rgb(255, 255, 255);
  --wp-selected-bg-blur: rgba(162, 170, 182, 0.4);
  --wp-on-selected-bg-blur: rgb(12, 12, 12);
  --wp-selected-bg2: rgba(0, 0, 0, 0.15);
  --wp-on-selected-bg2: rgb(12, 12, 12);
  --wp-hover-bg: rgba(102, 110, 122, 0.15);

  --wp-base-bg: #f2f2f2;
  --wp-on-base-bg: rgb(12, 12, 12);
  --wp-on-base-bg2: rgb(12, 12, 12, 0.6);
  --wp-paper-bg: rgb(255, 255, 255);
  --wp-paper-bg-alpha: rgba(255, 255, 255, 0.3);
  --wp-input-bg: rgb(255, 255, 255, 0.7);
  --wp-input-bg-disabled: rgba(128, 128, 128, 0.15);
  --wp-muted-bg: rgba(0, 0, 0, 0.03);
  --wp-muted-bg2: rgba(0, 0, 0, 0.1);
  --wp-title-bar-bg: rgba(226, 227, 228, 0.1);
  --wp-status-bar-bg: transparent;
  --wp-overlay-bg: rgb(0, 0, 0, 0.5);
  --wp-editor-compose-bg-color: #333;
  --wp-memo-bg: hsla(50, 100%, 98%, 0.8);

  --wp-popup-bg: rgb(255, 255, 255, 1);
  --wp-popup-border: 1px solid rgba(0, 0, 0, 0.01);
  --wp-popup-backdrop-filter: none;

  --wp-page-wrapper-backdrop-filter: none;
  --wp-page-wrapper-bg: none;
  --wp-left-panel-bg: rgba(18, 111, 188, 0.1);
  --wp-left-panel-border: 1px solid rgba(0, 0, 0, 0.12);
  --wp-left-panel-backdrop-filter: none;
  --wp-main-panel-bg: transparent;
  --wp-main-panel-border: 1px solid rgba(0, 0, 0, 0.12);
  --wp-main-panel-backdrop-filter: none;
  --wp-right-panel-bg: rgba(226, 227, 228, 0.2);
  --wp-right-panel-border: 1px solid rgba(0, 0, 0, 0.12);
  --wp-right-panel-backdrop-filter: none;

  --wp-shadow: 0px 2px 3px rgba(0, 0, 0, 0.07), 0 4px 6px rgba(0, 0, 0, 0.1);
  --wp-shadow-sm: 0 1px 1px 0px rgba(0, 0, 0, 0.1);
  --wp-shadow-lg: 1px 2px 8px 0px rgba(0, 0, 0, 0.1);

  --wp-error-color: rgb(215, 0, 0);
  --wp-on-error-color: rgb(255, 255, 255);
  --wp-error-color-bg: rgb(255, 230, 230);
  --wp-warning-color: rgb(211, 119, 9);
  --wp-on-warning-color: rgb(255, 255, 255);
  --wp-warning-color-bg: rgb(253, 241, 208);
  --wp-success-color: rgb(0, 128, 0);
  --wp-on-success-color: rgb(255, 255, 255);
  --wp-success-color-bg: rgb(230, 255, 230);
  --wp-info-color: hsl(210, 100%, 50%);
  --wp-on-info-color: rgb(255, 255, 255);
  --wp-info-color-bg: hsl(210, 100%, 94%);


  --wp-scrollbar-corner: rgba(255, 255, 255, 0);
  --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;

  --wp-focus-outline-color-danger: hsla(1deg, 100%, 62%, 60%);
  --wp-focus-outline-color: rgb(47, 117, 191, 0.5);


  --wp-caret-color: #30afff;
  --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-text: #fff;
  --wp-win-close-btn-hover-bg: #c42c1d;
  --wp-win-close-btn-hover-text-color: #fff;
}

Dark

Section titled “Dark”
Details: 
.theme-dark {
  --wp-dark: dark;

  --wp-primary-color: rgb(25, 113, 194);
  --wp-on-primary-color: rgb(255, 255, 255);

  --wp-text-color: rgba(255, 255, 255, 0.8);
  --wp-text-color-2: rgba(255, 255, 255, 0.5);
  --wp-text-highlight-color: rgba(255, 255, 255, 0.8);
  --wp-text-highlight-bg: rgba(114, 110, 81, 0.4);
  --wp-text-highlight-border: 1px solid rgba(195, 195, 195, 0.7);
  --wp-link-color: var(--wp-primary-color);
  --wp-link-hover-color: hsl(209, 77%, 62%);

  --wp-frame-border-color: 1px solid transparent;
  --wp-border-color: rgba(255, 255, 255, 0.25);
  --wp-border-color-2: rgba(255, 255, 255, 0.15);
  --wp-border-color-3: rgba(255, 255, 255, 0.1);

  --wp-selected-bg: rgba(25, 113, 194, 0.95);
  --wp-on-selected-bg: rgb(255, 255, 255);
  --wp-selected-bg-blur: rgba(140, 142, 148, 0.5);
  --wp-on-selected-bg-blur: rgba(255, 255, 255, 0.8);
  --wp-selected-bg2: rgba(255, 255, 255, 0.15);
  --wp-on-selected-bg2: rgba(255, 255, 255, 0.8);
  --wp-hover-bg: rgba(255, 255, 255, 0.15);

  --wp-base-bg: #202223;
  --wp-on-base-bg: rgba(255, 255, 255, 0.8);
  --wp-on-base-bg2: rgba(255, 255, 255, 0.6);
  --wp-paper-bg: rgb(42, 44, 46);
  --wp-paper-bg-alpha: rgba(32, 34, 35, 0.3);
  --wp-input-bg: rgba(37, 38, 41, 0.7);
  --wp-input-bg-disabled: rgba(255, 255, 255, 0.15);
  --wp-muted-bg: rgba(255, 255, 255, 0.03);
  --wp-muted-bg2: rgba(255, 255, 255, 0.1);
  --wp-title-bar-bg: rgba(40, 40, 40, 0.1);

  --wp-status-bar-bg: transparent;
  --wp-overlay-bg: rgba(0, 0, 0, 0.5);
  --wp-editor-compose-bg-color: #111;
  --wp-memo-bg: rgba(37, 38, 41, 0.2);

  --wp-popup-bg: rgba(32, 34, 35, 1);
  --wp-popup-border: 1px solid rgba(255, 255, 255, 0.15);
  --wp-popup-backdrop-filter: none;

  --wp-page-wrapper-backdrop-filter: none;
  --wp-page-wrapper-bg: none;
  --wp-left-panel-bg: none;
  --wp-left-panel-border: 1px solid rgba(255, 255, 255, 0.12);
  --wp-left-panel-backdrop-filter: none;
  --wp-main-panel-bg: transparent;
  --wp-main-panel-border: 1px solid rgba(255, 255, 255, 0.12);
  --wp-main-panel-backdrop-filter: none;
  --wp-right-panel-bg: none;
  --wp-right-panel-border: 1px solid rgba(255, 255, 255, 0.12);
  --wp-right-panel-backdrop-filter: none;

  --wp-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.3);
  --wp-shadow-sm: 0 1px 1px 0px rgba(0, 0, 0, 0.2);
  --wp-shadow-lg: 1px 2px 8px 0px rgba(0, 0, 0, 0.3);

  --wp-error-color: hsl(0, 95%, 75%);
  --wp-on-error-color: rgb(255, 255, 255);
  --wp-error-color-bg: hsl(0, 35%, 28%);
  --wp-warning-color: hsl(49, 77%, 39%);
  --wp-on-warning-color: rgb(255, 255, 255);
  --wp-warning-color-bg: hsl(40, 29%, 20%);
  --wp-success-color: hsl(135, 77%, 43%);
  --wp-on-success-color: rgb(255, 255, 255);
  --wp-success-color-bg: hsl(132, 29%, 18%);
  --wp-info-color: hsl(205, 100%, 71%);
  --wp-on-info-color: rgb(255, 255, 255);
  --wp-info-color-bg: hsl(205, 100%, 18%);


  --wp-scrollbar-corner: rgba(255, 255, 255, 0);
  --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: transparent;
  --wp-scrollbar-track: transparent;

  --wp-focus-outline-color-danger: hsla(1deg, 100%, 67%, 60%);
  --wp-focus-outline-color: rgba(25, 113, 194, 0.5);


  --wp-caret-color: hsl(209, 77%, 53%);
  --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: lighten(var(--wp-paper-bg), 10%);
  --wp-toast-border: var(--wp-border-color);
  --wp-tooltip-bg: rgba(255, 255, 255, 0.95);
  --wp-tooltip-text: #333;
  --wp-win-close-btn-hover-bg: #c42c1d;
  --wp-win-close-btn-hover-text-color: #fff;
}