Custom Theming

One of Kherpi's standout features is fully customisable public pages. Every user can write their own CSS to change the look and feel of their public profile and documents — from colours and typography to layout tweaks and completely unique designs.

How It Works

Your custom theme is pure CSS that gets injected into your public pages. When a visitor opens your profile or any of your published documents, Kherpi loads your theme on top of the default styles, letting your overrides take effect.

Getting Started

Navigate to Settings > Appearance to find the CSS editor. You have two ways to start:

Option A: Start from the Template

Click Load template to populate the editor with a ready-made template. The template contains commented-out rules for every customisable element, organised by section. Simply uncomment the rules you want to change and adjust the values.

Option B: Start from Scratch

Write your own CSS directly in the editor. Use the CSS variable and class references below to target specific elements.

Once you're happy with your changes, click Save. Open your public profile in a new tab to see the result.

[screenshot: appearance settings page with CSS editor]

CSS Variables — The Fastest Way to Restyle

The simplest way to transform your public pages is by overriding CSS variables on .public-shell. Change a handful of variables and the entire page updates consistently:

.public-shell {
    --bg: #1a1a2e;
    --bg-surface: #16213e;
    --bg-elevated: #0f3460;
    --text: #e0e0e0;
    --text-muted: #a0a0b8;
    --text-subtle: #6c6c8a;
    --border: #2a2a4a;
    --accent: #e94560;
    --accent-hover: #c73a52;
    --accent-fg: #ffffff;
    --radius: 8px;
    --radius-lg: 12px;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

Variable Reference

Variable	Purpose	Default
`--bg`	Page background	`#ffffff`
`--bg-surface`	Slightly raised surface	`#f8fafc`
`--bg-elevated`	Elevated elements (code blocks, hover states)	`#f1f5f9`
`--text`	Primary text colour	`#0f172a`
`--text-muted`	Secondary text (excerpts, metadata)	`#64748b`
`--text-subtle`	Tertiary text (labels, hints)	`#94a3b8`
`--border`	Border colour	`#e2e8f0`
`--accent`	Primary accent colour (links, avatar)	`#2563eb`
`--accent-hover`	Accent hover state	`#1d4ed8`
`--accent-fg`	Text on accent backgrounds	`#ffffff`
`--radius`	Default border radius	`6px`
`--radius-lg`	Larger border radius (cards)	`10px`
`--shadow`	Box shadow for cards	`0 1px 4px rgba(0,0,0,.1)`

CSS Class Reference

Every element on your public pages uses a semantic CSS class that you can target. Here's a complete reference, grouped by page section.

Navigation Bar

Class	Element
`.public-nav`	Top navigation bar
`.public-nav-inner`	Navigation content wrapper
`.public-nav-brand`	Site name link
`.public-nav-brand-logo`	Site logo image
`.public-nav-sep`	Breadcrumb separator
`.public-nav-author`	Author name link

Profile Page

Class	Element
`.public-profile-header`	Profile header area
`.public-profile-avatar`	Avatar circle
`.public-profile-name`	Username heading
`.public-profile-username`	Username subtitle

Folder Cards

Class	Element
`.public-folder-grid`	Folder card container
`.public-folder-card`	Individual folder card

Document Cards

Class	Element
`.public-doc-grid`	Document card grid
`.public-doc-card`	Individual document card
`.public-doc-card-pinned`	Pinned document card (has relative positioning)
`.public-doc-card-pin`	Pin icon on pinned cards
`.public-doc-card-title`	Card title
`.public-doc-card-excerpt`	Card excerpt text
`.public-doc-card-meta`	Card metadata (date, etc.)
`.public-doc-card-badges`	Badge container on cards
`.public-doc-card-type-icon`	Document type icon

Document View

Class	Element
`.public-header`	Document header section
`.public-header-badges`	Badge container in header
`.public-type-badge`	Document type badge
`.public-title`	Document title
`.public-meta`	Author and date metadata
`.public-properties-grid`	Custom properties grid
`.public-property-label`	Property name label
`.public-property-value`	Property value
`.public-content`	Main content area
`.public-content.prose`	Markdown-rendered content
`.public-footer`	Page footer

Empty States

Class	Element
`.public-empty-state`	Empty state message

Examples

Warm Minimalist

A soft, warm palette with generous spacing:

.public-shell {
    --bg: #faf8f5;
    --bg-surface: #f5f0eb;
    --bg-elevated: #ede5db;
    --text: #3d3229;
    --text-muted: #8a7b6b;
    --text-subtle: #b5a898;
    --border: #e8ddd0;
    --accent: #c06c3e;
    --accent-hover: #a55a30;
    --accent-fg: #ffffff;
    --radius: 12px;
    --radius-lg: 16px;
}

.public-profile-avatar {
    border-radius: 12px;
}

Dark Mode

A sleek dark theme:

.public-shell {
    --bg: #0d1117;
    --bg-surface: #161b22;
    --bg-elevated: #21262d;
    --text: #e6edf3;
    --text-muted: #8b949e;
    --text-subtle: #6e7681;
    --border: #30363d;
    --accent: #58a6ff;
    --accent-hover: #79c0ff;
    --accent-fg: #0d1117;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

Bold & Colourful

A vibrant, eye-catching style:

.public-shell {
    --bg: #fefffe;
    --bg-elevated: #f0fdf4;
    --text: #1a1a1a;
    --accent: #16a34a;
    --accent-hover: #15803d;
    --radius: 20px;
    --radius-lg: 24px;
}

.public-profile-avatar {
    background: linear-gradient(135deg, #16a34a, #2563eb);
    font-size: 2rem;
}

.public-doc-card {
    border-width: 2px;
}

.public-doc-card:hover {
    border-color: var(--accent);
}

Custom Typography

Change the font for your pages by importing from Google Fonts:

.public-shell {
    font-family: 'Georgia', serif;
}

.public-title {
    font-family: 'Georgia', serif;
    font-style: italic;
}

.public-content.prose {
    font-size: 1.125rem;
    line-height: 1.85;
    max-width: 65ch;
}

Tips

Start with variables. Overriding the CSS variables on .public-shell is the fastest path to a completely different look. You can often achieve a stunning result with just 5–10 lines.
Use the template. The built-in template is organised by section and shows every available target. It's the quickest reference while you're editing.
Preview as you go. After saving, open your public profile in another tab to check the result. There's no separate preview mode — what you save is what visitors see.
Keep it simple. A few well-chosen colour overrides often look better than dozens of individual rules.
Markdown content uses .prose. To style headings, links, code blocks, and other elements inside your documents, target .public-content.prose and its children.

Security Notes

For safety, Kherpi automatically sanitises your CSS before saving. The following are stripped or blocked:

</style tags (to prevent injection)
expression() (legacy IE scripting)
@import rules
javascript: URLs
External URLs (only data: and https: are permitted)

Your CSS is limited to 50,000 characters. This is more than enough for even the most elaborate themes.

08-custom theming