Themes and Appearance
Monofile ships 24 built-in themes in 15 families. You pick a family and a mode (light, dark or system). The choice applies to the sidebar, dialogs, the markdown editor, the code editor, syntax highlighting in fenced code blocks, drawings, and mermaid diagrams.
Family plus mode, not one long list
The family is the look and the mode is the brightness, and you set them independently. Set the mode to System and the workspace follows the operating system, switching between the light and dark variant of the same family.
Nine families carry both variants:
| Family | Light variant | Dark variant |
|---|---|---|
| Default | Light | Dark |
| GitHub | GitHub Light | GitHub Dark |
| Solarized | Solarized Light | Solarized Dark |
| Catppuccin | Catppuccin Latte | Catppuccin Mocha |
| Gruvbox | Gruvbox Light | Gruvbox Dark |
| One | One Light | One Dark |
| Rosé Pine | Rosé Pine Dawn | Rosé Pine |
| Tokyo Night | Tokyo Night Day | Tokyo Night |
| Everforest | Everforest Light | Everforest Dark |
Six more have a single variant and appear under Specialty. While one of these is selected, the mode toggle has no effect.
| Family | Variant |
|---|---|
| Sepia | Light only |
| Nord | Dark only |
| Dracula | Dark only |
| Monokai | Dark only |
| Ayu Mirage | Dark only |
| High Contrast | Dark only, tuned for contrast |
Switching
| Where | How |
|---|---|
| Settings | Click the gear icon in the header, or press Ctrl + , (⌘ + , on macOS). Mode is at the top, then the family grid |
| Command palette | Press Ctrl + Shift + P (⌘ + Shift + P on macOS) and run Switch theme…, then pick from the list |
| Settings page | Go to /settings and use the Appearance section |
Each family card previews its own colours.
What a theme actually covers
A theme defines a full palette applied to the document root, so one choice reaches everything:
The app shell: background, sidebar, panels, buttons, dialogs
The markdown editor: text, headings, links, tables, quotes
Code: syntax highlighting in the code editor and in every fenced code block
Diagrams: mermaid picks up light or dark to match, and drawings open in the matching canvas mode
Text size, font and column width are a separate set of editor preferences, so you can widen your writing column without changing the palette.
Importing a VS Code or base16 theme
Open Settings, expand Import / Export, and click Import. The file picker takes a .json file, and Monofile detects whether it is a Monofile theme, a VS Code colour theme, or a base16 scheme.
| Format | What it needs | What is read |
|---|---|---|
| VS Code colour theme | editor.background plus a foreground colour | Workbench colours for the app, and the token colours for syntax highlighting |
| base16 scheme | base00 and base05 | The sixteen base colours, mapped the standard way |
| Monofile theme | An exported Monofile theme file | Everything, as is |
Monofile fills in any colour the source does not define, deriving it from the source's background and foreground, so a theme that says nothing about popovers still gets readable popovers. Light or dark comes from the theme's own declaration, or from the brightness of its background.
If the file is not usable, the error names the reason. The two most common are "Not a usable VS Code theme: missing editor.background/foreground" and "Not a base16 scheme: missing base00/base05".
Custom themes are per-browser
Imported themes are stored in your browser, not in your account. They appear in a Custom section in Settings and work like the built-ins. Sign in on another machine and they are absent, and clearing site data removes them.
Export writes the selected theme to a JSON file that you can import on another machine, keep in a repository, or hand to someone else.
Next steps
The Markdown EditorLive WYSIWYG editing, slash commands, and how saving works.
Markdown ReferenceEvery markdown feature Monofile renders, with examples.
DiagramsMermaid in markdown, and turning mermaid into an editable drawing.
Keyboard ShortcutsEvery shortcut in the app, by area.