phughk/ottyl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Unify colour scheme and CSS as one Style list in settings UI (ticket 047)

Browse Source 
The settings panel had two separate sections — "Colour scheme" (built-in
palettes) and "CSS" (imported/linked stylesheets) — even though the data
model (tickets 012/020) already treats both as equally-selectable themes
via custom_theme_id. Merge them into one "Style" section presenting a
single list: built-in scheme pills plus imported/linked entries, any of
which can be a palette swap or a full layout override, with copy that no
longer implies "colour scheme" and "CSS" are separate features.

Traced and manually verified (via a running dev server) that a
user-supplied stylesheet is not constrained to --c-* variable overrides:
import_css/get_css_content in src/api.rs and src/settings.rs store and
serve the raw content unmodified (no sanitization or selector scoping),
and applyCustomThemeCss injects it as a plain unscoped <link> tag — a
stylesheet with e.g. `flex-direction`/`font-size` rules on real selectors
applies exactly as authored, alongside the required --c-* declarations.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o
This commit is contained in:
Hugh Kaznowski
2026-09-06 02:17:10 +01:00
co-authored by Claude Sonnet 5
parent 7c331e76b1
commit 5b31f51526
4 changed files with 134 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/src/components/Docs.tsx
+8 -6
View File
@@ -50,9 +50,10 @@ const SECTIONS: DocSection[] = [
</ul>
<p className="font-semibold text-text">Settings</p>
<p>
One <em>settings</em> file per machine holds the colour scheme, imported/linked CSS, the ntfy sink, and
which profile is active. Settings only tracks profile pointers — the profiles themselves (params, metrics,
dashboards) are stored separately, next to the settings file by default.
One <em>settings</em> file per machine holds the active style (a built-in colour scheme or an
imported/linked stylesheet — see below), the ntfy sink, and which profile is active. Settings only tracks
profile pointers — the profiles themselves (params, metrics, dashboards) are stored separately, next to the
settings file by default.
</p>
<p className="font-semibold text-text">Profiles</p>
<p>
@@ -424,9 +425,10 @@ const SECTIONS: DocSection[] = [
body: (
<div className="flex flex-col gap-2">
<p>
The Settings panel controls process-wide state: colour scheme, the ntfy sink alert rules deliver to, the
max number of logs kept in memory (blank means unlimited), and imported/linked CSS. Changes apply
immediately and persist to the settings file on disk. There is no save button.
The Settings panel controls process-wide state: the active style — one unified list of built-in colour
schemes and any imported/linked stylesheets, any of which can be a simple palette or a full layout
redesign — the ntfy sink alert rules deliver to, and the max number of logs kept in memory (blank means
unlimited). Changes apply immediately and persist to the settings file on disk. There is no save button.
</p>
<p className="font-semibold text-text">Worked example</p>
<p>