Appearance, themes & CSS
Make Fable yours. Pick a light or dark scheme and an accent color, install a theme, or go further with your own CSS snippets. Everything visual in Fable is styled through CSS design tokens, so customization runs deep.
The appearance basics
Under Settings → Appearance:
| Setting | What it does |
|---|---|
| Base color scheme | Adapt to system (default), Light, or Dark. Adapt follows your OS preference live. |
| Accent color | A color picker for the highlight color used by links, buttons, selections and active states throughout the app. |
| Fonts | Separate choices for interface, text and monospace fonts; leave them empty for system defaults. |
| Font size | The editor's base text size. |
| Readable line length | Keeps the text column at a comfortable reading width instead of stretching across a wide window. |
| Show inline title | Shows the note's name as a title at the top of the note. |
Themes
A theme is a complete restyling of the app, packaged as a folder with a stylesheet and a manifest. Themes live inside your vault at .obsidian/themes/<Theme Name>/, containing theme.css and manifest.json.
- Switch themes from the dropdown in Settings → Appearance; changes apply immediately, no restart.
- To install a theme, place its folder in
.obsidian/themes/. A theme that came with an Obsidian vault works as-is. - Choosing the default theme reverts to Fable's built-in look. A well-formed theme styles both light and dark schemes.
Fable does not yet have an in-app theme browser. Themes are installed by placing their folder in the vault, and themes already in a vault you open are respected.
CSS snippets
Snippets are small CSS files for targeted tweaks, lighter than a whole theme. Each .css file in .obsidian/snippets/ becomes a toggle in Settings → Appearance → CSS snippets.
- Open snippets folder jumps to the folder; drop a file in and press Reload snippets to see it listed.
- Toggle each snippet on or off independently; several can stack on top of your theme.
- Edits to an enabled snippet apply when you save the file.
A snippet is just CSS. For example, rounding embedded images:
/* snippets/rounded-images.css */
img {
border-radius: 8px;
}Design tokens: how styling works
Fable's entire interface is painted from CSS custom properties, design tokens, defined once and consumed everywhere. The app root always carries a .theme-light or .theme-dark class, and tokens are overridden per mode. Restyling a token re-colors everything that uses it, which is why small snippets go a long way.
/* Re-tint the workspace in both modes */
.theme-dark {
--background-primary: #1b1230;
}
.theme-light {
--background-primary: #f5efff;
}Tokens cover foundations (colors, spacing, radii, typography), components (buttons, tabs, modals), editor elements (headings, code, callouts, tags, tables), and feature surfaces like the graph and canvas. The accent color is exposed as HSL components, so your chosen accent flows into every accent-tinted element. Themes and snippets are pure CSS with no scripting.
Per-note styling with cssclasses
The reserved cssclasses property adds CSS classes to one note's view, so a snippet can style opt-in notes only:
---
cssclasses:
- wide-tables
---/* snippets/wide-tables.css */
.wide-tables table {
font-size: 0.9em;
}The classes apply in both editing and reading views, and only on notes that declare them.