Built-in Theme Styles

The following excerpts list interface variables from the Light and Dark themes. Use them in custom themes or Custom CSS. They control the application interface, not exported document styles.

Override only the variables you need rather than copying an entire theme. Check each value’s type: --wp-left-panel-bg is a background value, while --wp-left-panel-border includes the border width, style and color. See the sidebar and memo background example.

Variables and defaults may change between versions; check the result in your current app. .theme-light and .theme-dark select the corresponding base themes. They do not mean that every custom light or dark theme uses the same defaults.

Light Theme

.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.15);
  --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: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.07);
  --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-shadow-float:
    0 16px 48px 0 rgba(17, 24, 39, 0.04), 0 12px 24px 0 rgba(17, 24, 39, 0.04),
    0 6px 8px 0 rgba(17, 24, 39, 0.02), 0 2px 3px 0 rgba(17, 24, 39, 0.02);

  --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 Theme

.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: hsl(49, 77%, 33%);
  --wp-text-highlight-border: 1px solid hsl(49, 77%, 49%);
  --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-shadow-float:
    0 16px 48px 0 rgba(17, 24, 39, 0.04), 0 12px 24px 0 rgba(17, 24, 39, 0.04),
    0 6px 8px 0 rgba(17, 24, 39, 0.02), 0 2px 3px 0 rgba(17, 24, 39, 0.02);

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