✨ Publier v1 is live — a polished docs platform built for the open web.
← Back to blog

Customizing Publier Themes

A practical guide to Publier's theme system — from built-in presets to full daisyUI customization.

By Publier Team

Publier ships 14 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:

theme.yaml
preset: ocean

Available presets: maple, ocean, dark, dusk, light, almond, emerald, purple, ruby, solar, aspen, neutral, catppuccin, vitepress.

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 small brand tweaks, drop overrides into theme.yaml and Publier applies them to the active theme:

theme.yaml
preset: ocean
overrides:
  primary: "oklch(65% 0.2 280)"            # indigo instead of sky
  primary-content: "oklch(100% 0 0)"

See the Theming reference for the full list of overridable tokens.

The key tokens to know:

TokenPurpose
--color-primaryLinks, active states, brand accents
--color-base-100Page background
--color-base-contentDefault body text
--color-base-200 / --color-base-300Elevated surfaces, borders
--color-accentSecondary accent (hover backgrounds, etc.)
--color-error / --color-success / --color-warning / --color-infoSemantic surfaces (used by alert alert-*, badge badge-*, etc.)

Dark mode

Theme switching is driven by the data-theme attribute on <html>. Each theme has its own color-scheme; there is no .dark override. Publier’s built-in theme toggle flips data-theme and remembers the choice across navigations — no extra configuration needed.

Dark-first themes: ocean, dark, dusk, solar, catppuccin. Light-first themes with companion dark blocks: light, almond, maple, emerald, purple, ruby, aspen, neutral, vitepress.

Practical tips

  • Start with a preset close to your brand color, then override only --color-primary. That single change propagates to links, active sidebar items, the search highlight, btn btn-primary, and interactive elements throughout the UI.
  • 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