Implement comprehensive theme customization with independent settings for
dark and light modes:
- Style layer: Classic (clean shadows), Glow (accent-colored glow effects),
Vibrant (dramatic deep shadows)
- Background layer: Neutral, Warm, Cool (light mode); plus OLED, Slate,
Forest (dark mode only)
- Accent colors: Green, Teal, Blue, Orange, Purple, Red
All combinations work independently (e.g., Glow + Forest + Teal). Settings
sync across devices via database and show toast confirmations on change.
Backend:
- Add 6 new settings fields (dark_style, dark_background, dark_accent,
light_style, light_background, light_accent)
- Add integration test for theme settings API
Frontend:
- Refactor index.css with 3-layer CSS variable system
- Update ThemeContext for dual-mode theme management
- Add Appearance section to Settings page with 6 dropdowns
- Update components for new ThemeContext API
Changes to ToastContext.tsx:
- Added 'loading' toast type with a spinning Loader2 icon
- Added showPersistentToast(id, message, type) function for toasts that don't auto-dismiss
- Exposed dismissToast(id) function to allow programmatic dismissal
- Added green-themed styling for loading toasts
Changes to SettingsPage.tsx:
- When exporting a backup that includes archives, shows a persistent "Preparing backup..." toast with spinner
- The toast is automatically dismissed when the download starts or if an error occurs
- For non-archive backups (which are fast), no loading toast is shown
The user will now see clear feedback when creating a backup with print archives - a toast with a spinner appears immediately after clicking export and stays visible
until the download dialog appears.
maziggy