22a58e0d9f
Replaces the blue defaults with the provided green theme (primary #58B900, accent #45A148, today #6FB669, greens for month/selected/today-bg, etc.). These apply when no admin instance theme is set. THEME.md defaults table updated. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
67 lines
3.6 KiB
Markdown
67 lines
3.6 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 | `#58B900` |
|
|
| `accent_color` | Accent — danger actions, the "now" line, reminders | `#45A148` |
|
|
| `today_color` | "Today" accent: the day-number circle and today's labels | `#6FB669` |
|
|
| `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) | `#2B2B2B` |
|
|
| `line_color` | Borders and grid lines | `#3B3B3D` |
|
|
| `month_divider_color` | The line marking a month change in the scrolling month view | `#95D25E` |
|
|
| `month_label_color` | The month abbreviation shown at a month change | `#95D25E` |
|
|
| `hover_highlight_color` | General interactive hover — buttons, menu items, list rows | `#2A2A38` |
|
|
| `icon_inactive_color` | Sidebar action icons (notification bell *off*, hide/eye, delete/trash, "not editable") in their resting / off / not-hovered state | `#90AA91` |
|
|
| `icon_active_color` | The same sidebar action icons when hovered, pressed, or *on* (e.g. notification bell enabled) | `#E8E8F0` |
|
|
| `day_hover_color` | Hover background over a calendar day (month / week / quarter / agenda / mini-calendar / date picker) | `#2B382A` |
|
|
| `day_selected_color` | The selected day — applied as a subtle tint of this colour | `#88EF9A` |
|
|
| `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 | `#477650` |
|
|
|
|
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.
|