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 |
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
curl -X PUT https://whiz.pub/api/v1/theme \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"preset": "ocean"
}'MCP
{
"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
curl https://whiz.pub/api/v1/theme \
-H "Authorization: Bearer YOUR_API_KEY"MCP
{
"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:
- 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 Fonts
Web
On /app/settings/appearance, use the Heading Font and Body Font dropdowns to pick from system stacks or the curated Google Fonts list. A live preview is shown before you save.
API
curl -X PUT https://whiz.pub/api/v1/theme \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"heading_font": "Playfair Display",
"body_font": "Literata"
}'MCP
{
"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
curl -X PUT https://whiz.pub/api/v1/theme \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"dark_mode": "auto"
}'Valid values: auto, light, dark.
MCP
{
"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
@importstatements 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
@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
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; }"
}'MCP
{
"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.
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.