Theming

Choose a visual preset and customize colors, typography, spacing, corners, and navigation feedback.

Publier includes named visual presets for the shared marketing and documentation shell. A preset supplies colors, layout defaults, and component geometry. Select it in theme.yaml, then override your brand colors or typography. Presets share the same navigation and document structure.

Choose a preset

Set preset in theme.yaml at your project root. Publier imports the matching stylesheet automatically; you do not need to import it in another CSS file.

name: Example documentation
preset: enterprise
colors:
  primary: 'light-dark(#305dcc, #9bb8ff)'
  primary-content: 'light-dark(#ffffff, #171717)'
  accent: 'light-dark(#305dcc, #9bb8ff)'
  accent-content: 'light-dark(#ffffff, #171717)'

Use a foreground that remains readable on each primary or accent fill. Overrides accept valid CSS colors, including hex, OKLCH, and light-dark(); they preserve the supplied value.

Built-in presets

The shell supports light and dark mode. Some presets, including dark, ocean, dusk, solar, and catppuccin, keep a fixed dark palette in both modes. enterprise provides distinct light and dark palettes. The data-theme="light" or data-theme="dark" attribute on <html> selects the mode; ThemeToggle manages the preference and retains it across navigation.

Enterprise styling

The enterprise preset makes fields, buttons, menus, sidebar rows, documentation cards, and callouts square. It uses a neutral light/dark palette and a heading weight of 600. Brand colors remain configurable.

Top-level header links change text color on hover without acquiring a filled pill or a visible border. Current destinations use brand-colored text. Keyboard navigation retains a visible focus outline, and disclosure arrows retain their motion and reduced-motion behavior. Menu items and sidebar rows use subtle surface feedback to help readers follow selection.

The preset applies to Publier’s shared components. Custom marketing components keep their own CSS unless you connect their styles to the same tokens.

Configure typography and dimensions

preset: enterprise
typography:
  body: 'var(--publier-font-builtin-sans), system-ui, sans-serif'
  heading: 'var(--publier-font-builtin-sans), system-ui, sans-serif'
  mono: 'var(--publier-font-builtin-mono), monospace'
  body-weight: 400
  heading-weight: 600
layout:
  nav-height: 4rem
  sidebar-width: 18rem
  toc-width: 14rem
  page-max-width: 52rem
prose:
  line-height: '1.7'
  heading-line-height: '1.25'
  content-gap-y: 1.5rem
code:
  block-radius: 0rem
  inline-radius: 0rem
  inline-padding-y: 0.1em
  inline-padding-x: 0.3em

Font-family values select fonts; they do not download an arbitrary font. Configure font loading separately for a custom family. Publier loads Inter Variable through --publier-font-builtin-sans and JetBrains Mono through --publier-font-builtin-mono; use these tokens to retain the bundled fonts. Shared headings use typography.heading, falling back to the body family when it is omitted. Body and heading weights accept strings or numbers; the chosen font must provide the requested weight.

These controls require shell 4.6.0 or later with its matching native dependency.

Desktop rail settings retain their responsive breakpoints; labels wrap within the configured sidebar width. Mobile navigation uses a separate dialog. Header content can wrap beyond its minimum height. Expressive Code adds its frame border to the configured radius. Components marked not-prose retain their own spacing and inline-code geometry.

Understand the token layers

Publier components use DaisyUI color and radius tokens together with semantic roles for particular surfaces. Dropdowns use the base surface colors; menu hover feedback is derived from the base foreground. The table lists tokens with active consumers.

Use the corresponding semantic classes where possible: btn btn-primary, alert alert-info, rounded-field, and rounded-box. Tailwind classes such as rounded-md express fixed geometry and do not follow DaisyUI radius tokens.

Structural tokens

Some shared components use Publier-specific tokens. theme.yaml exposes typography, layout, prose, and code overrides. Other structural or semantic roles can be changed through customCss.

Selected sidebar rows use a translucent primary tint and primary-colored text. They do not use the former solid-fill navigation tokens.

Advanced overrides

Declare a custom stylesheet in publier.config.yaml:

customCss:
  - ./src/styles/brand.css

Target Publier’s existing light and dark modes instead of introducing a mode that the theme toggle cannot select:

:root,
:root[data-theme="light"] {
  --color-pl-card: #ffffff;
  --publier-card-radius: 0.25rem;
}

:root[data-theme="dark"] {
  --color-pl-card: #202020;
  --publier-card-radius: 0.25rem;
}

Custom CSS follows the generated preset and theme overrides. It is not validated like theme.yaml, and normal CSS specificity and layer rules still apply. Check both modes, keyboard focus, narrow screens, and long navigation labels after changing tokens.