Theme Creator
Design your own custom color themes for Octarine.
Imagine a workspace that perfectly mirrors your style. With the Theme Creator, you can design stunning custom themes from the ground up or effortlessly fine-tune an existing one to make it uniquely yours.
Getting Started
Ready to personalize your workspace? Just navigate to Settings → Theme Creator to launch the theme builder. Here, you'll find any custom themes you've already crafted, alongside a clear button to start a fresh creation.
Access to the Theme Creator requires a Pro License.
Crafting Your Custom Theme
To begin bringing your vision to life, simply click Create New. You'll first define some fundamental aspects:
The Essentials
- Theme Name: Choose a name that helps you easily identify your unique creation.
- Base Theme: Select one of Octarine's pre-built themes as your foundation. This smartly populates all color variables, giving you a strong starting point rather than an empty canvas.
- Mode: Decide between Light or Dark using the radio buttons. This choice is vital, as it governs the appearance of callouts, folder icons, notifications (toasts), and various other UI elements. Selecting an incorrect mode can unfortunately make parts of your interface difficult to read.
Your chosen base theme is permanent after creation. Since it cannot be changed later, pick the option that most closely aligns with the look you're aiming to tweak.
Fine-Tuning Your Colors
Once your base is set, you'll discover all theme variables neatly organized by category. Each variable comes with a handy color swatch and a text field, ready for you to input any standard CSS color value (like hex codes, RGB, or HSL).
Where Colors Show Up
Use this table to map variables to feature surfaces in the app. Each row is a high-level summary of where a color typically appears.
| Variable | Where they would be used |
|---|---|
--color-text-primary | Active/Hovered text or icon color. Primary buttons |
--color-text-secondary | File tree buttons, Tab buttons |
--color-text-tertiary | Captions, Disabled text, Secondary labels, Status hints |
--color-text-placeholder | Input placeholders, Empty states |
--color-text-link | Links |
--color-text-accent | Active states, AI actions, Highlights, Badges |
--color-editor-body | Editor paragraphs |
--color-editor-heading | Editor headings, H1-H6 |
--color-text-error | Error text, Destructive Actions |
--color-bg-primary | App canvas, Main panels, Dialog bodies, Editor surface |
--color-bg-intermediate | Toolbars, Sticky headers, Floating panels, Side panels |
--color-bg-secondary | Cards, Menus, Popovers, Dropdowns |
--color-bg-tertiary | Sub-panels, Secondary controls, Scroll containers, Toggles |
--color-bg-hover | Hover color. Usually paired with bg-secondary |
--color-bg-accent | Theme’s primary color |
--color-bg-doc-link | Wikilinks, Text selection, background for icons with text-accent |
--color-bg-mark | Highlight background for searched text |
--color-bg-error | Destructive buttons, Danger zones, Error panels, Delete actions |
--color-bg-kbd | Keyboard shortcuts |
--color-bg-tooltip | Tooltip background |
--color-app-sidebar | Sidebar background, Nav rail, Panel chrome, Left rail |
--color-border-primary | Primary border - usually light |
--color-border-secondary | For active/hover borders - usually darker/brighter |
--color-border-accent | Focus states, Active selection borders, Emphasis outlines, Tabs |
--color-border-error | Invalid inputs, Error alerts, Destructive outlines, Warnings |
--color-icon | Icon base color. On hover/active usually is text-primary |
--color-outline-primary | Focus rings, Keyboard focus, A11y outlines, Active input |
Graph View Colors
Graph View pulls a smaller set of variables for the canvas and node styling.
| Variable | Usage in Graph View |
|---|---|
--color-text-primary | Graph title text |
--color-text-secondary | Node label text, Node count text |
--color-text-tertiary | Default node fill, Search placeholder text |
--color-text-accent | Weekly/Daily node fill |
--color-bg-primary | Graph canvas background |
--color-bg-mark | Tag node fill |
--color-bg-accent | Highlighted node/link stroke |
--color-border-secondary | Link stroke color |
--color-border-primary | Graph header divider |
--color-app-sidebar | Graph header bar background |
--color-icon | Search and close icons |
Let AI Inspire You
Feeling a bit stuck, or just want to experiment? The Ask AI feature is your creative partner! Simply describe the aesthetic you're dreaming of—perhaps a 'cozy autumn forest' or a 'neon cyberpunk night'—and Octarine will intelligently generate a complete color palette and even suggest a fitting theme name.
Generating a Palette
Just tell the AI your desired vibe, and it will handle the initial creative heavy lifting, filling in all the variables and suggesting a name.
Refining AI Suggestions
- Pro Tip: Don't hesitate to ask for minor adjustments like 'lighter borders' or 'warmer accents' to perfect your current theme. If you're looking for a completely new direction, describe an entirely fresh identity to get a brand-new palette.
- Model Information: The 'Ask AI' functionality utilizes the same AI model you've configured in the Ask Octarine / Writing Assistant settings.
Managing Your Themes
Once you've created your themes, managing them is straightforward.
Editing Existing Themes
To fine-tune a theme, simply click on it from your custom theme list to open the editor. Make your desired adjustments, then click Update to save your changes. What's neat is that your edits are instantly reflected across the entire app, allowing you to see a live preview before finalizing.
Sharing and Importing Themes
Looking to share your masterpiece or back it up? The Copy CSS button lets you grab a block of CSS variables. To import a theme, use Paste from Clipboard.
Keep these important details in mind when pasting:
- The CSS you paste must exclusively contain variable lines; comments are not supported.
- Should your pasted list be incomplete, Octarine will intelligently fill in any missing variables using the colors from your current base theme.
Removing Themes
If you need to declutter, simply click Delete from the theme list to remove a theme. Be aware that this action is not reversible. If the theme you're deleting is currently active, Octarine will automatically revert to the default theme (default-dark).
Applying and Storing Your Creations
Once your perfect theme is ready, putting it to use is simple.
Making Your Theme Active
After you create or update a theme, it automatically becomes your active theme. You can effortlessly switch between any of your custom themes at any time:
- Via
Settings → Preferences → Theme - Through the Command palette (
Cmd/Ctrl + K, then search for your theme name)
Your custom themes will appear right alongside Octarine's built-in themes in the selector, complete with helpful color previews.
Theme File Location
For those curious about where your custom themes reside, they are stored on a per-workspace basis in:
.octarine/themes.json
Pro Tips for Stellar Themes
Crafting a truly great theme involves a bit of careful consideration. Here are some pro tips to ensure your themes look fantastic and function perfectly:
- Prioritize Contrast: Ensure your text is always easily readable against its background. Good contrast is key for accessibility and comfort.
- Thorough Testing is Essential: Don't just admire it; put your theme through its paces. Check how it looks in the sidebar, editor, within callouts, and especially with code blocks.
- Choose Accent Colors Wisely: These colors highlight important elements like links, buttons, and selected text. Aim for a hue that stands out beautifully without being overly jarring.
- The Right Mode Makes All the Difference: Remember, your chosen Light/Dark mode influences icons, callouts, and notifications. Selecting the correct mode is crucial to maintain overall readability and prevent UI issues.