Customizing Publier Themes

Publier ships built-in color themes (built on Tailwind CSS v4 + daisyUI v5) and a CSS-variable system that makes customisation straightforward. Whether you want a quick color swap or a fully bespoke design, the theme system has you covered.

Picking a preset

Pick a theme in theme.yaml:

preset: ocean

That’s it — no extra wiring required for the default themes. daisyUI auto-generates matching utilities (bg-primary, text-base-content, btn btn-primary, alert alert-info, …) for whatever preset is active.

How the variable system works

Every color is a CSS custom property. daisyUI 5 uses OKLCH as its canonical format:

--color-base-100: oklch(22% 0.04 240);
--color-base-content: oklch(95% 0.01 240);
--color-primary: oklch(72% 0.15 230);
--color-primary-content: oklch(15% 0.03 260);

The tokens compose with Tailwind opacity modifiers without any extra syntax:

<div class="bg-primary/10 border border-primary/20">…</div>

Overriding individual tokens

For supported brand overrides and palette behavior, follow the Theming guide.

Practical tips

• Start with a preset close to your brand color. A primary override changes elements that use --color-primary, such as prose links and primary buttons. Selected sidebar colors use separate preset role tokens and do not automatically follow that override. See Theming for supported overrides and custom CSS.
• Reach for daisyUI utility classes first — text-primary, bg-base-100, btn btn-primary, alert alert-success cover most needs without any custom CSS.
• Use the full token reference when you need precise control — see Theming in the docs for the complete token surface.

Last updated 2026-05-01