Calendarr/THEME.md

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).

You can also export the current theme to a <date>_<time>.theme file and import one later. A .theme file is plain 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. 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.