6316ed3a6b
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>
67 lines
3.7 KiB
Markdown
67 lines
3.7 KiB
Markdown
# Theme parameters (Web)
|
|
|
|
Calendarr's web client lets you customise the colour theme under
|
|
**Settings → Darstellung → Farben**. Every colour has its own sync toggle (share
|
|
it across your devices or keep it device-local — see
|
|
[backend/SETTINGS_SYNC.md](backend/SETTINGS_SYNC.md)).
|
|
|
|
You can also **export** the current theme to a `<date>_<time>.theme` file and
|
|
**import** one later. A `.theme` file is plain JSON:
|
|
|
|
```json
|
|
{
|
|
"_format": "calendarr-theme",
|
|
"_version": 1,
|
|
"_docs": "https://git.scarriffle.com/Scarriffle/Calendarr/src/branch/beta/THEME.md",
|
|
"exported_at": "2026-07-20T14:33:00.000Z",
|
|
"settings": {
|
|
"primary_color": "#4285F4",
|
|
"hover_highlight_color": "#2A2A38",
|
|
"...": "..."
|
|
}
|
|
}
|
|
```
|
|
|
|
A theme may be **partial** — delete any keys you don't want and only the
|
|
remaining ones are applied. Importing writes **only the parameters present in
|
|
the file** (keys whose sync toggle is on are also pushed to the server; the rest
|
|
update this browser only); omitted parameters are left untouched. If the file
|
|
contains parameters this version doesn't recognise, you're asked whether to
|
|
import the rest anyway.
|
|
|
|
## Colour parameters
|
|
|
|
Source of truth for the defaults: `DEFAULT_COLORS` in
|
|
[frontend/js/settings-sync.js](frontend/js/settings-sync.js). Each value is a
|
|
`#RRGGBB` hex string. Where a default is listed as "derived", leaving the value
|
|
untouched reproduces the previous automatic look; setting it overrides that.
|
|
|
|
| Key | What it colours | Default |
|
|
|---|---|---|
|
|
| `primary_color` | Primary/brand colour — buttons, links, active states, and the browser favicon/tab colour | `#4285F4` |
|
|
| `accent_color` | Accent — danger actions, the "now" line, reminders | `#EA4335` |
|
|
| `today_color` | "Today" accent: the day-number circle and today's labels | `#4285F4` |
|
|
| `text_color` | Base text colour (secondary/tertiary text is derived from it) | `#FFFFFF` |
|
|
| `bg_color` | App background | `#000000` |
|
|
| `surface_color` | Sidebar / top bar / card surfaces (derived from `bg_color` when unset) | `#1A1A1A` |
|
|
| `line_color` | Borders and grid lines | `#3A3A52` |
|
|
| `month_divider_color` | The line marking a month change in the scrolling month view | `#7090C0` |
|
|
| `month_label_color` | The month abbreviation shown at a month change | `#7090C0` |
|
|
| `hover_highlight_color` | General interactive hover — buttons, menu items, list rows | `#2A2A38` (= derived hover) |
|
|
| `icon_inactive_color` | Sidebar action icons (notification bell *off*, hide/eye, delete/trash, "not editable") in their resting / off / not-hovered state | `#9090AA` (= secondary text) |
|
|
| `icon_active_color` | The same sidebar action icons when hovered, pressed, or *on* (e.g. notification bell enabled) | `#E8E8F0` (= primary text) |
|
|
| `day_hover_color` | Hover background over a calendar day (month / week / quarter / agenda / mini-calendar / date picker) | `#2A2A38` (= derived hover) |
|
|
| `day_selected_color` | The selected day — applied as a subtle tint of this colour | `#4285F4` (= primary) |
|
|
| `day_bg_color` | Normal (unselected, non-today) day background. Defaults to the app background so days look transparent | `#000000` |
|
|
| `today_bg_color` | Today's day-cell background — applied as a subtle tint of this colour | `#4285F4` (= today accent) |
|
|
|
|
Notes:
|
|
- `day_selected_color` and `today_bg_color` are applied as a low-opacity tint of
|
|
the chosen colour (so content stays readable). The colour you pick is the base
|
|
hue; the swatch shows the full colour.
|
|
- `day_bg_color` defaults to the app background. If you set a custom
|
|
`bg_color`, also set `day_bg_color` to match if you want fully transparent days.
|
|
- The other clients (iOS / Android) currently ignore the fine-grained element
|
|
colours; they are stored and synced by the server but only the web client
|
|
renders them.
|