Admin UI Styling
Your plugin's admin page is rendered inside the same layout as every built-in screen, so it already inherits the panel's base styles for free. The moment you add your own CSS on top — a custom table, a settings form, a status badge — use the admin panel's own custom properties instead of hardcoded colors. That's what makes your plugin automatically follow the panel's light/dark toggle and any future visual refresh, instead of looking subtly "off" or breaking outright in dark mode.
Core tokens
| Token | Use for |
|---|---|
--primary, --primary-hover, --primary-active | Primary actions, active states |
--primary-soft, --primary-text | Soft/tinted primary backgrounds and their readable text color |
--surface, --surface-2, --surface-3, --surface-4 | Cards, inputs, tables, and increasingly strong hover states |
--text, --text-muted, --text-faint | Primary, secondary, and de-emphasized text |
--border, --border-strong | Default and emphasized borders |
--danger, --danger-soft, --danger-text | Destructive actions, error states |
--warning, --warning-soft, --warning-text | Caution states |
--info, --info-soft, --info-text | Informational states |
--success, --success-soft, --success-text | Success states, confirmation messages |
--radius-sm, --radius-md | Border radius, matching the rest of the panel |
--transition | Standard hover/state transition timing |
--font-main, --font-headings | The panel's font stack |
.my-plugin-status-badge {
background: var(--success-soft);
color: var(--success-text);
border: 1px solid var(--success);
border-radius: var(--radius-sm);
}
The rule of thumb
Never hardcode a color in a plugin's admin CSS unless you're resolving a specific specificity conflict with an existing admin style — every one of the tokens above already exists precisely so a plugin's own page doesn't need to reinvent (or accidentally clash with) the panel's palette.