Custom CSS

Custom CSS is the escape hatch beyond themes and tokens — available on plans that include it (the feature gate is honest: the control shows on your plan or it does not — see Plans compared). Used well, it is ten lines of polish. Used carelessly, it fights every future theme update. Here is the safe way.

Where it goes

Dashboard → Appearance → Custom CSS. The editor applies to your public site after publish, and the live preview shows the result before anything is public (see Live preview).

Rule one: target tokens, not hex

Themes expose CSS custom properties — write against them and your CSS follows the theme through updates and dark mode:

/ Yes — themed, dark-mode-aware /
.my-note {
  border-left: 3px solid var(--ps-accent);
  background: var(--ps-surface-muted);
}
/ No — breaks in dark mode and theme switches /
.my-note { border-left: 3px solid #05B34D; background: #f4f4f4; }

The token names follow your theme's documented set (--ps-surface, --ps-text, --ps-accent, …) — inspect one component in the browser devtools and you will see the variables it reads.

Rule two: own your scope

Prefix your classes (mysite-…) so you never collide with theme internals:

.mysite-callout { letter-spacing: 0.01em; }

Do NOT restyle theme classes globally (.card { … }) — the day you switch themes, that rule lands on a different component with different intent.

Rule three: small, or not at all

Good use (10–30 lines)	Bad use (300+ lines)
Nudge spacing on one block	Rebuild the whole layout
A signature callout style	A second theme in CSS
Fix ONE awkward wrapping	Fight every breakpoint

If your CSS exceeds a screenful, the honest answer is a different theme (see Choosing a theme) or a feature request — not a CSS war against your own site.

What CSS cannot do

• Run scripts — CSS is style only; behavior lives in plugins (see Plugins & integrations).
• Reach other sites — your CSS applies to your pages only.
• Survive deletion — clearing the CSS field clears the effect; keep your rules in a gist or a post as backup.

The workflow

1. Inspect the element in devtools; find its token-based colors.
2. Write the smallest rule that works, against tokens.
3. Preview at phone width AND in dark mode.
4. Publish. Look again tomorrow — CSS that survives a night is CSS that works.