Themes & Appearance
Claspt ships with several built-in themes and a range of appearance options so you can make the app feel like home.
Themes
Section titled “Themes”Claspt includes 20 built-in themes — 3 light and 17 dark — so you can match your workspace to your mood.
Light Themes
Section titled “Light Themes”| Theme | Personality |
|---|---|
| Classic Light | Clean, neutral light theme with high contrast. Good for bright environments. |
| Solarized Light | Ethan Schoonover’s warm, low-contrast palette. Easy on the eyes for daytime use. |
| Ayu Light | Soft, warm tones inspired by the Ayu editor theme. Gentle on the eyes. |
Dark Themes
Section titled “Dark Themes”| Theme | Personality |
|---|---|
| Classic Dark | The default — deep dark background with high-contrast text. Clean and focused. |
| Nord | Cool, arctic blues and muted accents. Calm and easy on the eyes. |
| Dracula | Purples, pinks, and cyans on a dark base. Vibrant but not harsh. |
| Solarized Dark | Carefully tuned warm tones on a dark blue-grey base. Comfortable for long sessions. |
| One Dark | Inspired by Atom’s One Dark — balanced blues and purples with warm accents. |
| Monokai | The classic developer theme — vivid greens, pinks, and yellows on dark grey. |
| Gruvbox Dark | Retro, earthy palette with warm oranges and greens. Nostalgic and readable. |
| Tokyo Night | Cool blues and purples inspired by Tokyo’s neon nightscape. |
| Catppuccin Mocha | Pastel accents on a rich dark background. Smooth and modern. |
| GitHub Dark | GitHub’s dark mode palette — familiar and easy to read. |
| Everforest | Soft greens and earth tones inspired by forest landscapes. |
| Kanagawa | Inspired by Japanese ink paintings — deep blues with warm highlights. |
| Midnight Blue | Deep navy with subtle blue accents. Minimal and focused. |
| Rosé Pine | Muted rose and pine tones — elegant and understated. |
| Material Dark | Google’s Material Design dark palette — clean and systematic. |
| Synthwave | Retro 80s neon — pinks, purples, and cyan. Fun and distinctive. |
| Horizon | Warm oranges and reds on a dark base — inspired by sunset. |
Switching Themes
Section titled “Switching Themes”There are two ways to change your theme:
- Settings menu — Open Settings > General > Theme and select from the dropdown. The theme applies instantly.
- Keyboard shortcut — Press
Cmd+Shift+T(macOS) orCtrl+Shift+T(Windows/Linux) to cycle through themes quickly.
Custom Accent Color
Section titled “Custom Accent Color”Beyond the base theme, you can customize the accent color — the highlight color used for selections, active states, buttons, and interactive elements.
- Open Settings > General.
- Find the Accent Color option.
- Pick a color from the palette or enter a custom hex value.
The accent color overlays on top of your chosen theme, so you can have a Nord theme with an orange accent, or Classic Dark with a teal accent.
UI Scale
Section titled “UI Scale”Adjust the overall interface size to match your display and preferences.
Keyboard Shortcuts
Section titled “Keyboard Shortcuts”| Action | macOS | Windows/Linux |
|---|---|---|
| Zoom in | Cmd+= | Ctrl+= |
| Zoom out | Cmd+- | Ctrl+- |
| Reset zoom | Cmd+0 | Ctrl+0 |
Settings
Section titled “Settings”You can also set the UI scale from Settings > General > UI Scale. This gives you precise control over the zoom level.
Sidebar
Section titled “Sidebar”Sidebar Width
Section titled “Sidebar Width”The sidebar width is adjustable by dragging the resize handle (the divider between the sidebar and the editor). Drag left for a narrower sidebar or right for a wider sidebar.
Your preferred width is saved automatically and persists across sessions.
Sidebar Density
Section titled “Sidebar Density”Switch between two page list densities:
| Mode | Best For |
|---|---|
| Comfortable | Fewer pages, want to see preview snippets beneath titles |
| Compact | Many pages, want to maximize visible page count |
Toggle density using the density button in the sidebar header (near the sort options).
In comfortable mode, each page entry shows the title plus a brief content preview. In compact mode, only the title is shown, fitting roughly twice as many pages in the same vertical space.
Typography
Section titled “Typography”Claspt uses two font families throughout the interface:
| Font | Where It’s Used |
|---|---|
| Figtree | UI elements — sidebar, toolbar, settings, dialogs, page titles |
| JetBrains Mono | Code blocks, inline code, secret block values, and the markdown editor |
Figtree is a clean, geometric sans-serif that stays legible at all sizes. JetBrains Mono is a developer-focused monospace font with ligatures and clear character distinction — ideal for reading code, secrets, and structured text.
Editor Appearance
Section titled “Editor Appearance”The editor uses CodeMirror 6 with custom extensions that enhance the visual experience:
- Heading line decorations — Each heading level (h1 through h6) gets a distinct font size in the editor, so the document structure is visible while you write.
- Syntax highlighting — Colors adapt to your active theme, keeping markdown syntax readable.
- Secret block cards — Encrypted secrets render as styled cards rather than raw markdown fences.
- Line numbers — Optional, toggled from Settings > General.
Quick Reference
Section titled “Quick Reference”Here’s a summary of all appearance-related settings and where to find them:
| Setting | Location | Shortcut |
|---|---|---|
| Theme | Settings > General > Theme | Cmd+Shift+T |
| Accent color | Settings > General > Accent Color | — |
| UI scale | Settings > General > UI Scale | Cmd+= / Cmd+- |
| Sidebar width | Drag sidebar resize handle | — |
| Sidebar density | Sidebar density toggle | — |
| Line numbers | Settings > General | — |
| Split view | Toolbar or shortcut | Cmd+\ |
| Preview mode | Toolbar or shortcut | Cmd+/ |
| Inspector panel | Toolbar or shortcut | Cmd+I |