Themes & Appearance

Every whiz.pub blog can be customized through the dashboard, the REST API, or MCP. The platform ships with 3 system font stacks and 12 curated Google Fonts.

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
`rose`	Warm red tones and soft cream
`slate`	Neutral gray and muted accents
`emerald`	Bright green and clean whites

Setting a Theme Preset

Web

Go to /app/settings/appearance and select a preset from the Theme dropdown. The preview updates immediately; click Save to apply.

API

bash

curl -X PUT https://api.whiz.pub/v1/theme \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "preset": "ocean"
  }'

MCP

json

{
  "tool": "whiz_set_theme",
  "arguments": {
    "preset": "ocean"
  }
}

To read the current theme:

Web

The current preset is shown on the /app/settings/appearance page.

API

bash

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

MCP

json

{
  "tool": "whiz_get_theme",
  "arguments": {}
}

Fonts

System font stacks

System fonts are available by default with no external requests.

Google Fonts

The following curated Google Fonts are available:

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

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

Custom Google Fonts

In addition to the curated list, you can use any Google Font by selecting Custom (Google Fonts) from the Heading Font or Body Font dropdown.

Choose Custom (Google Fonts) from the dropdown.

Paste a Google Fonts URL, e.g.:

https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&display=swap

The system validates that the URL points to fonts.googleapis.com, extracts the font family name, and generates the required CSS automatically.

In the dashboard, you can paste the full embed code from Google Fonts -- either the <link> HTML tag or the @import CSS rule. The URL is extracted automatically.

The custom font URL is stored as body_font_url or heading_font_url in the API and MCP.

API

bash

curl -X PUT https://api.whiz.pub/v1/theme \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "body_font": "Custom (Google Fonts)",
    "body_font_url": "https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&display=swap"
  }'

MCP

json

{
  "tool": "whiz_set_theme",
  "arguments": {
    "body_font": "Custom (Google Fonts)",
    "body_font_url": "https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&display=swap"
  }
}

CLI

bash

whiz theme set --body-font "Custom (Google Fonts)" \
  --body-font-url "https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&display=swap"

Setting Fonts

Web

On /app/settings/appearance, use the Heading Font and Body Font dropdowns to pick from system stacks, the curated Google Fonts list, or Custom (Google Fonts). A live preview is shown before you save.

API

bash

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

MCP

json

{
  "tool": "whiz_set_theme",
  "arguments": {
    "heading_font": "Playfair Display",
    "body_font": "Literata"
  }
}

Dark Mode

Setting the Dark Mode Default

Web

On /app/settings/appearance, choose a Dark Mode preference: auto (follows the visitor's system setting), light, or dark.

API

bash

curl -X PUT https://api.whiz.pub/v1/theme \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "dark_mode": "auto"
  }'

Valid values: auto, light, dark.

MCP

json

{
  "tool": "whiz_set_theme",
  "arguments": {
    "dark_mode": "auto"
  }
}

Valid values: auto, light, dark.

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:

css

@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

css

@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;
}

Adding Custom CSS

Web

On /app/settings/appearance, scroll to the Custom CSS editor. Paste or write your CSS and click Save. Changes are applied immediately.

API

bash

curl -X PUT https://api.whiz.pub/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; }"
  }'

MCP

json

{
  "tool": "whiz_set_theme",
  "arguments": {
    "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.

Saved Themes

Save your current theme configuration (preset + fonts + custom CSS) as a named theme for later use. You can save up to 10 themes per blog.

Dashboard

Click Save as theme on the Appearance settings page. Your saved themes appear below the system presets.

CLI

bash

# Save current live theme
whiz theme save --name "My Dark Theme"

# List saved themes
whiz theme list-saved

# Apply a saved theme
whiz theme apply-saved "My Dark Theme"

# Delete a saved theme
whiz theme delete-saved "My Dark Theme"

API

bash

# List saved themes
curl -H "Authorization: Bearer $KEY" https://api.whiz.pub/v1/saved-themes

# Save current theme
curl -X POST -H "Authorization: Bearer $KEY" \
  -d '{"name":"My Dark Theme","theme_preset":"ocean","body_font":"inter"}' \
  https://api.whiz.pub/v1/saved-themes

# Apply a saved theme
curl -X POST -H "Authorization: Bearer $KEY" \
  https://api.whiz.pub/v1/saved-themes/{id}/apply

# Delete a saved theme
curl -X DELETE -H "Authorization: Bearer $KEY" \
  https://api.whiz.pub/v1/saved-themes/{id}

MCP

Use the whiz_save_theme, whiz_list_saved_themes, whiz_apply_saved_theme, and whiz_delete_saved_theme tools.

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 32x32, 180x180, 192x192, and 512x512 variants and stores them on the CDN. The 32x32 variant is also used as the blog brand icon in the navigation.

Themes & Appearance ​

Theme Presets ​

Setting a Theme Preset ​

Fonts ​

System font stacks ​

Google Fonts ​

Custom Google Fonts ​

Setting Fonts ​

Dark Mode ​

Setting the Dark Mode Default ​

Custom CSS ​

Example ​

Adding Custom CSS ​

Custom Head HTML ​

Saved Themes ​

Dashboard ​

CLI ​

API ​

MCP ​

Favicons ​

Auto-generated ​

Custom upload ​

Themes & Appearance

Theme Presets

Setting a Theme Preset

Fonts

System font stacks

Google Fonts

Custom Google Fonts

Setting Fonts

Dark Mode

Setting the Dark Mode Default

Custom CSS

Example

Adding Custom CSS

Custom Head HTML

Saved Themes

Dashboard

CLI

API

MCP

Favicons

Auto-generated

Custom upload