Themes & Appearance

Every whiz.pub blog can be customized through the dashboard, the REST API, or MCP.

Theme Presets

Each preset includes both light and dark color schemes:

Preset Description
forest Earthy greens and warm neutrals
ocean Cool blues and soft grays
mono Pure black, white, and gray
sunset Warm oranges and deep purples
berry Rich magentas and soft pinks

Fonts

System font stacks

System fonts are available by default with no external requests.

Google Fonts

The following curated Google Fonts are available:

  • Libre Franklin
  • Literata
  • Lora
  • Merriweather
  • Noto Serif
  • Playfair Display
  • IBM Plex Sans
  • Source Serif 4
  • Space Grotesk
  • Roboto Slab
  • JetBrains Mono

When a Google Font is selected, the platform loads it from Google Fonts automatically.

Setting Your Theme

Dashboard

Go to /app/settings/appearance to configure your theme preset, fonts, dark mode preference, custom CSS, and favicon.

API

curl -X PUT https://whiz.pub/api/v1/theme \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "preset": "ocean",
    "heading_font": "Playfair Display",
    "body_font": "Literata",
    "dark_mode": "auto"
  }'

To read the current theme:

curl https://whiz.pub/api/v1/theme \
  -H "Authorization: Bearer YOUR_API_KEY"

MCP

Use the whiz_set_theme tool to configure theme settings, and whiz_get_theme to read the current configuration.

Custom CSS

You can inject custom CSS to override any aspect of your blog's appearance.

Rules:

  • Maximum size: 10 KB.
  • Google Fonts @import statements are allowed: 
    @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
  • Other external url() references are blocked.
  • JavaScript vectors (e.g. expression(), javascript:) are stripped.

Example

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");

body {
  font-family: "Inter", sans-serif;
  max-width: 700px;
}

h1, h2, h3 {
  letter-spacing: -0.02em;
}

Set custom CSS via the API:

curl -X PUT https://whiz.pub/api/v1/theme \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "custom_css": "body { max-width: 700px; } h1 { letter-spacing: -0.02em; }"
  }'

Custom Head HTML

An opt-in escape hatch for adding analytics snippets, meta tags, or other <head> content.

Rules:

  • Maximum size: 5 KB.
  • Must be explicitly enabled (opt-in).
  • When custom head HTML is active, a notice is shown in the blog's public footer indicating that custom scripts are present.

Favicons

Auto-generated

Every blog gets an auto-generated letter favicon based on the blog name. No configuration needed.

Custom upload

Upload a custom favicon image from the dashboard at /app/settings/appearance. whiz.pub generates multiple sizes (ICO, 16x16, 32x32, 180x180) and stores them on the CDN. The favicon is also used as the blog brand icon in the navigation.