Themes
n0te has no theme of its own. It takes its colors from the running Omarchy theme, and when you switch themes, every open window repaints in place, without reopening anything.
Where the colors come from
- The theme’s
n0te.css, in~/.local/state/omarchy/current/theme/. Omarchy renders it on every theme switch from the template thatn0te --setupinstalls (~/.config/omarchy/themed/n0te.css.tpl). A theme can also ship its ownn0te.css, to color n0te its own way. - The theme’s
colors.toml, for any colorn0te.cssleaves out, or when there’s non0te.cssyet (before your first theme switch after setup, say). - n0te’s own dark palette, when there’s no Omarchy theme at all: black, warm paper-white text and a crimson accent.
Light themes work too: n0te reads mode = "light" from colors.toml.
The colors
n0te.css sets colors with @define-color lines, in #rrggbb hex:
@define-color bg #1a1b26;
@define-color accent #7aa2f7;
| Name | Used for |
|---|---|
bg | the page |
text | body text |
heading | headings, table headers |
text_dim | quotes, links to missing notes |
text_faint | markdown syntax while editing, done tasks, #tags, frontmatter, rules |
surface | code and callout boxes |
surface_2 | inline code |
rule | table lines, card borders, the scrollbar |
raise | the palette and other cards |
accent | links, done boxes, the caret, the current find match |
selection | selected text, find matches |
comment | comments and punctuation in code |
red orange yellow green cyan blue magenta | code highlighting and callouts, mapped as Omarchy maps them for Helix |
A value that isn’t plain hex (a template placeholder that wasn’t filled in, say) is ignored, and n0te’s own value for that color stays.
Styling beyond colors
Everything in n0te.css other than the @define-color lines is ordinary GTK CSS, loaded above n0te’s own, for n0te’s windows: window.n0te, the status line (.status), the palette (.palette), the settings page (.settings) and the link list (.complete). For example:
window.n0te .status { font-size: 10px; }
For theme authors
To give your theme its own n0te colors, ship an n0te.css in the theme’s folder next to colors.toml, with any of the colors above. It comes along when your theme is picked, and n0te uses it instead of the one rendered from the template. Start from n0te’s template, which n0te --setup puts in ~/.config/omarchy/themed/n0te.css.tpl. It shows how most of the colors are derived from colors.toml by default, in Omarchy’s template syntax:
@define-color bg {{ background }};
@define-color text {{ foreground }};
@define-color heading {{ bright_foreground }};
@define-color text_dim {{ mix foreground background 28% }};
@define-color text_faint {{ mix foreground background 46% }};
@define-color surface {{ mix background foreground 4.5% }};
@define-color surface_2 {{ mix background foreground 9% }};
@define-color rule {{ mix background foreground 15% }};
@define-color accent {{ accent }};
@define-color selection {{ selection_background }};
@define-color red {{ red }};
@define-color yellow {{ yellow }};
@define-color green {{ green }};
@define-color cyan {{ cyan }};
@define-color blue {{ blue }};
@define-color magenta {{ magenta }};
raise, comment and orange aren’t in it; n0te derives those itself.
Window transparency
n0te opens as a regular window and keeps Omarchy’s default window opacity, like your terminal. To make it opaque, add a window rule for its class, dev.n0te.N0te, in your Hyprland config.