Themes
Nine themes plus three color modes. Pick a flavor for the app, decide whether it follows your OS in light or dark, opt the print stylesheet in or out of brand colors.
Sweetdocs ships with nine themes (one accent palette each) and three color modes (System / Light / Dark). The pair you pick applies to the whole app — your docs, the sidebar, the share viewer, every UI surface.
Appearance
The nine themes
The flavor names + accent colors:
| Theme ID | Name | Accent |
|---|---|---|
grape | Grape Soda | #7c3aed |
berry | Very Berry | #db2777 |
cherry | Cherry Pop | #d6253a |
mint | Mint Chip | #10b981 |
peach | Fuzzy Peach | #fb923c |
orange | Tangerine Twist | #ea580c |
lemon | Lemon Drop | #eab308 |
blue | Blue Raspberry | #0ea5e9 |
slate | Slate | #64748b |
The theme affects every UI surface that uses the var(--accent) / var(--accent-text) / var(--accent-light) / var(--accent-border) CSS variables:
- The AI button in the doc toolbar
- The Send button in the AI panel
- Selected sidebar rows
- Selected text in the editor
- Real-time cursor / selection highlight when the user is you
- Buttons in dialogs and modals
- Link color
- Code block subtle accent
The accent does not change body text color, doc background, or table grid color — those follow the color mode (light or dark).
Color modes
Three options for whether the theme runs light or dark:
| Mode | Behavior |
|---|---|
| System (default) | Follows your operating system setting. Switches automatically when your OS toggles light / dark. |
| Light | Always light, ignoring OS |
| Dark | Always dark, ignoring OS |
The mode is stored in localStorage under sd-mode (so it’s per-device, not per-account). The theme is on your profiles row (per-account).
Setting them
Settings → Appearance section:
- Click any of the 9 theme swatches → applies immediately, persists to your account
- Click a Color mode radio → applies immediately, persists per-device
The change is live across every tab and device on the same account (theme) or just the current device (color mode).
Print brand colors
A separate per-device toggle controls whether brand colors carry into printed output:
| Setting | What gets printed |
|---|---|
| On (default) | Headings, links, and code-block accents use the theme’s accent color |
| Off | Pure black-on-white — best for greyscale printers or archival |
Stored in localStorage under sweetdocs:print_brand_colors. Useful when your home printer is greyscale and you don’t want the accent rendering as muted gray patches.
Where the themes are defined
Each theme is a [data-theme="..."] selector in packages/ui/src/themes.css, with separate light + dark variants:
[data-theme="grape"] { --accent: …; --accent-light: …; … }
.dark[data-theme="grape"] { --accent: …; … }The light/dark choice is also a class on <html>. The theme name itself goes on <html data-theme="…">. So <html class="dark" data-theme="berry"> is dark mode with the Very Berry palette.
Per-doc theme override
Themes are per-account, not per-document. There’s no UI to set a different theme for a specific doc — sharing a doc with someone shows it in their theme, not yours.
The marketing site (this website) has its own theme picker (the “flavor” picker on the home hero) — but that’s a separate state from the app’s settings.
What’s not in v1
| Missing | Notes |
|---|---|
| Custom user-defined themes (pick your own accent) | Not in v1 — pick from the nine |
| Per-doc theme assignment | Themes are user-level only |
| Library-default theme (force a theme inside an org library) | Not in v1 |
| High-contrast / accessibility-tuned themes | The nine themes meet WCAG AA contrast in both light and dark, but there’s no separate “high contrast” mode |
| Font / typography customization | Not in v1 — typography is fixed (Inter for UI, the doc body font set by the theme) |