feat(web): theme import/export, more themable colors, hideable local/ical calendars

Theme:
- Export/import themes via UI as <date>_<time>.theme (JSON, readable keys,
  link to THEME.md). Import is partial-aware: only present params are written
  (server accepts partial); prompts before importing files with unknown params.
- Dynamic favicon + theme-color tinted to the primary colour on load/save.
- New themable colours: general hover-highlight, day hover/selected/bg,
  today background, plus two unified sidebar action-icon colours
  (inactive/active) covering bell, hide, delete and read-only icons.
- All new colours are per-setting syncable; documented in THEME.md.

UX:
- Styled confirm dialog (#modal-confirm) replaces window.confirm() for
  calendar delete and account disconnect.
- Birthday/local calendars and iCal subscriptions can now be hidden from the
  sidebar via Settings (new sidebar_hidden column + hide toggle).

Backend: additive nullable columns + idempotent migrations for user_settings
colours and local_calendars/ical_subscriptions.sidebar_hidden.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-07-20 13:20:30 +02:00
parent 12c869451b
commit 6316ed3a6b
15 changed files with 475 additions and 47 deletions

View File

@@ -16,6 +16,16 @@ export const DEFAULT_COLORS = {
surface_color: '#1A1A1A',
month_divider_color: '#7090C0',
month_label_color: '#7090C0',
// Fine-grained element colours. Defaults equal the previously-derived look
// (see THEME.md). day_selected/today_bg are applied as a subtle tint of the
// chosen colour; the rest are applied solid.
hover_highlight_color: '#2A2A38',
icon_inactive_color: '#9090AA',
icon_active_color: '#E8E8F0',
day_hover_color: '#2A2A38',
day_selected_color: '#4285F4',
day_bg_color: '#000000',
today_bg_color: '#4285F4',
};
// The syncable settings the web client exposes, grouped into table sections.
@@ -68,6 +78,13 @@ export const SETTING_GROUPS = [
{ key: 'line_color', labelKey: 'settings_line_color', type: 'color' },
{ key: 'month_divider_color', labelKey: 'settings_month_divider_color', type: 'color' },
{ key: 'month_label_color', labelKey: 'settings_month_label_color', type: 'color' },
{ key: 'hover_highlight_color', labelKey: 'settings_hover_highlight_color', type: 'color' },
{ key: 'icon_inactive_color', labelKey: 'settings_icon_inactive_color', type: 'color' },
{ key: 'icon_active_color', labelKey: 'settings_icon_active_color', type: 'color' },
{ key: 'day_hover_color', labelKey: 'settings_day_hover_color', type: 'color' },
{ key: 'day_selected_color', labelKey: 'settings_day_selected_color', type: 'color' },
{ key: 'day_bg_color', labelKey: 'settings_day_bg_color', type: 'color' },
{ key: 'today_bg_color', labelKey: 'settings_today_bg_color', type: 'color' },
],
},
];