How OpenChronology was built

#231 · Add a Timeline theme plugin for the timeline's colors and fonts

2026-10-19T21:50:48Z CE

• timeline-app
• pull request
• plugins

Fixes #230. A **Timeline theme** plugin for the whole timeline's colors and fonts. Like **Timeline background** (#223), it's set in the plugin list, since it belongs to no event. ### What it sets | Setting | What it changes | | --- | --- | | Label color | Event labels and headings; dates take a lighter shade | | Label font | Event labels | | Measure color | Axis, tick marks and labels, guide lines, stems, relationship arcs | | Measure font | Tick labels | | Halo color | The glow and frosted backing from #220 | | Marker color | Moment and summary markers (summaries darker; hover and selection shades too) | | Duration color | Duration bands (dark or light text to suit) and collapsed durations | | Background color | The stage, beneath any images; the halo shows over it | Anything left blank keeps today's look. Colors chosen on events still win. ### How - **New setting kinds** (`plugins.ts`): - Timeline settings can now be `color` (`#rrggbb`, kept lower case) and `font` (installed font names, checked by the same `fontValue` as heading fonts, so no URLs or other CSS). - `settingValue()` checks a value by its kind, and the server and editor refuse bad values with a message for each kind. - **`theme` manifest component:** maps the roles `text`, `textFont`, `measure`, `measureFont`, `halo`, `marker`, `duration` and `background` to the plugin's own settings. Font roles must read `font` settings, the rest `color` settings. `pluginTheme()` merges them, and the last enabled plugin to set a role wins it. - **Drawing:** - `timeline-theme.ts` turns a theme into `--timeline-*` properties on the stage, mixing shades with `color-mix()` and choosing dark or light band text by luminance. - The stylesheet reads each property with today's color as fallback. - The properties are only rewritten when the theme changes. - **Plugin list:** - A color is set with a color picker, its hex value and **Use default**. - A font is set in a text field that suggests the heading fonts. - URL settings are unchanged. - **Image embedding** now reads only `image-url` settings. ### Tests - **Unit:** validation of each kind, theme references, merging, `themeProperties` and `textOn`. The library's second page now ends with `timeline-theme`. - **Browser (`timeline-theme-browser.mjs`):** - A loaded theme restyles labels, ticks and bands. - Marker, background and halo colors set in the dialog take effect. - A moment's own color wins. - A bad font list is refused and not saved. - **Use default** restores the label color. - `npm test` (301), typecheck, prettier and the full browser suite (19) pass. This needs a release before the server accepts it. Until then, v0.2.0 refuses manifests with `theme` or the new setting kinds.

Open #231 · Add a Timeline theme plugin for the timeline's colors and fonts in the timeline