Guides
Custom themes
Build a theme with the colour editor, share it as a file, and add CSS safely.
Make a theme
- Open Settings, Appearance.
- Pick a preset close to what you want and choose Customize.
- Change the colour blocks. The app updates as you edit.
- Switch between light and dark to edit each.
- Name the theme and save it.
Choose an accent and a background first. The editor derives the other colours from those two, and you can override any of them.
The colours
| Role | Where it shows |
|---|---|
field |
Page background |
deep |
Deeper areas |
raised |
Cards and sheets |
ink |
Main text |
ink2 |
Secondary text |
ink3 |
Hints |
hair |
Lines |
tint |
Hover tint |
accent |
Accents and active controls |
field, deep, raised, ink and accent must be opaque. The others may be translucent.
Watch the contrast chips. Text on a background needs a ratio of 4.5 to 1 for ink and ink2, and 3 to 1 for ink3, accent and hair. The Fix button moves a colour to the nearest value that passes.
Share a theme
Export gives you a <name>.nuvotheme.json file of up to 48 KB. Send it. The other person imports it from Settings, Appearance. Nuvo checks the file before it enters the editor, including any CSS inside it.
Add CSS
Settings, Customization has a CSS box for people who write CSS. The sheet is limited to 32 KB. The checker rules are in themes and custom CSS. If the checker rejects a sheet, it lists the line and the reason. Fix those and apply again.
Examples that pass:
a { color: #c2456b; }
@media (min-width: 900px) {
a { text-decoration: underline; }
}Examples that fail: any url(...), @import, @font-face.
If something goes wrong
Hold Shift while starting Nuvo, or start with --safe-appearance. Nuvo uses the default look. Fix your theme, then turn custom appearance back on.