Back to Docs

Theme

Palette names, style tokens, fonts and dark mode.

This is the guide the PageHub MCP server gives an AI agent for get_style_reference({ topic: "theme" }). Names like set_theme are its tools (connect one), and the liquid topic is the HTML + Liquid reference.
On this page

These rules assume a Tailwind + DaisyUI site (Styling: tailwind-daisy, the default). select_site and list_site_files print the site's Styling: line. tailwind: DaisyUI is off, so btn, card, badge, hero, navbar… render as nothing; build them from utilities and palette tokens. own-css (an imported site): reuse the classes its theme.css and <style>s define; Tailwind compiles only classes that CSS doesn't define, and palette tokens and DaisyUI aren't its design system.

  • Call it first on a new site, before adding blocks. It writes theme.css in the draft immediately. To compare palettes use suggest_palettes, and to pick fonts suggest_font_pairings: they show choices for the user to apply.
  • preset loads palette, fonts and styleGuide; explicit params override. By fit: bakery/restaurant → restaurant-warm / warm-editorial / rustic; SaaS → modern-minimal / notion; luxury → luxury-dark.
  • A partial call (only fonts, only palette) changes only that: set_theme sets custom properties one by one and leaves every other line of theme.css alone. Hand-written rules there are never touched.
  • Then set the company fields in site.json (name, tagline, phone, email, address, location, website, type) with edit_site_file. Without them {{ company.name }} shows "Acme Inc.".

Palette

palette: pass the complete list — it replaces the palette. [{ name, color }], colors in hex / rgb / hsl / oklch(). Use DaisyUI 5 names: Primary, Primary Content, Secondary, Secondary Content, Accent, Accent Content, Neutral, Neutral Content, Base 100, Base 200, Base 300, Base Content, Error, Error Content, Info, Info Content, Success, Success Content, Warning, Warning Content, Ring. Not "Background" / "Foreground" / "Primary Text" — those don't bind to bg-base-100 / text-base-content. darkPalette: same names, dark colors; enables dark mode.

Outline CTA pitfall: on minimal black-and-white themes keep Primary and Base Content at clearly different lightness, or btn-outline + text-base-content reads dark-on-dark.

Style guide

styleGuide is merged into the existing one, and every key becomes a CSS variable.

  • Fonts: headingFontFamily, bodyFontFamily, optional accentFontFamily (Google Font names). Any *FontFamily key creates a var (displayFontFamily → --display-font-family). Use font-heading / font-body / font-accent — never font-['Name'], never a font <link> in a page.
  • headingFont / bodyFont: weight class, e.g. "font-bold".
  • Radius: radiusBox (0.5rem; buttons, cards), radiusField (inputs), radiusSelector (checkboxes).
  • Size: sizeField, sizeSelector (0.25rem).
  • depth 0 | 1, noise 0 | 1, border ("1px").
  • buttonPadding ("0.75rem 1.5rem", Y X), containerPadding ("2rem 2rem"), contentWidth ("80rem", backs max-w-page).
  • shadowStyle ("0 1px 3px rgba(0,0,0,0.1)"). spacingDensity (1.25) writes --spacing-density in :root, the multiplier every *-space-* token reads. breakpoints (px) write --ph-bp-sm|md|lg|xl|2xl in :root, the widths sm: / md: use; Tailwind's --breakpoint-* does nothing on a published site.
  • Inputs: inputBorderColor, inputBgColor, inputTextColor, inputPlaceholderColor, inputFocusRingColor. Links: linkColor, linkHoverColor.

fonts ({ url } or { families }) is only a hint parsed into heading/body families when styleGuide omits them. daisyui: false turns the DaisyUI component classes (btn, card…) off for the site.

Not set_theme: site animations (CSS in theme.css, see animation) and JSON-LD (a <script type="application/ld+json"> in the page file, or site.json inject for every page).