docs: add dark mode to features and architecture docs

This commit is contained in:
Frederic Cabassut
2026-03-21 08:47:20 +01:00
committed by Fred Cabassut
parent 7a27952713
commit 09c8e290a9
2 changed files with 16 additions and 0 deletions
+10
View File
@@ -136,6 +136,16 @@ MCP tool handlers ┘
### Tools (14)
`list_notes`, `get_note`, `create_note`, `update_note`, `trash_note`, `restore_note`, `archive_note`, `unarchive_note`, `delete_note`, `search_notes`, `list_tags`, `pin_note`, `reorder_notes`, `upload_image`
## Dark Mode
Theme switching uses CSS variable overrides on the `<html>` element:
- **CSS**: `[data-theme="dark"]` attribute on `<html>` overrides all `--bg-*`, `--text-*`, `--border-*`, and `--primary-*` variables defined in `src/app.css`
- **Persistence**: preference stored as `theme` in the existing `userPreferences` key-value system (values: `"system"` | `"light"` | `"dark"`)
- **FOUC prevention**: a blocking inline `<script>` in `app.html` reads the preference from localStorage and sets `data-theme` before any content renders
- **Reactivity**: a `$effect` in the root `+layout.svelte` watches the theme store and updates `document.documentElement.dataset.theme` on change
- **Note card colors**: `getNoteColor()` in `src/lib/utils/colors.ts` accepts a `dark` boolean and returns the appropriate color variant per theme
## File Organization
```
+6
View File
@@ -64,6 +64,12 @@
- Fog, Storm, Dusk, Blossom, Clay, Chalk
- Colors adapt to note theme
### Dark Mode
- Three-way theme toggle: System / Light / Dark (in Settings > Preferences)
- Dark mode uses a warm parchment variant — retro aesthetic preserved in both themes
- Respects system `prefers-color-scheme` preference by default
- FOUC-free: theme applied before first paint via a blocking inline script
### Pin Notes
- Pin important notes to always appear at top
- Pinned section separated from unpinned notes