[Feature] Platform theming system and visual appearance controls #224

New Issue

zemion · 2026-07-09T11:49:50+02:00

zemion commented

2026-07-09 11:49:50 +02:00

Objective

Create the platform-wide theming system that turns the persisted user UI preference hook into a coherent GovOPlaN visual appearance contract.

Context

This is split out from govoplan-campaign#39. User UI preferences are already tracked and implemented in govoplan-core#221. The current code can persist a theme preference and applies light/dark/system shell hooks, but the broader theming product surface still needs its own issue.

A broader Gitea search on 2026-07-09 found:

govoplan-core#221 for user preferences and profile/i18n plumbing;
no dedicated standalone i18n issue besides that closed slice;
govoplan-campaign#39 as the old combined i18n/theming/preferences catch-all.

Scope

Owning repository: govoplan-core.
Define token-level light/dark/system theme behavior for the shared WebUI shell.
Decide which appearance controls belong to user preferences, tenant defaults, and system policy.
Add theme preview/selection UI where appropriate.
Ensure module WebUIs consume shared CSS tokens instead of module-local one-off palettes.
Add visual regression or screenshot checks for core shell theming once the UI surface is stable.

Out Of Scope

Language package/i18n catalogue work unless it directly affects theme UI labels.
Campaign-specific copy or page-level redesigns.
Custom per-tenant branding beyond the shared theme contract, unless explicitly accepted as a follow-up slice.

Acceptance Criteria

Theme preference behavior is documented and visible in Settings.
Core shell and shared components render correctly in light, dark, and system modes.
At least one module page verifies token consumption through the shared shell.
Follow-up issues are opened for tenant branding or i18n if those need separate product decisions.

## Objective Create the platform-wide theming system that turns the persisted user UI preference hook into a coherent GovOPlaN visual appearance contract. ## Context This is split out from govoplan-campaign#39. User UI preferences are already tracked and implemented in govoplan-core#221. The current code can persist a theme preference and applies light/dark/system shell hooks, but the broader theming product surface still needs its own issue. A broader Gitea search on 2026-07-09 found: - govoplan-core#221 for user preferences and profile/i18n plumbing; - no dedicated standalone i18n issue besides that closed slice; - govoplan-campaign#39 as the old combined i18n/theming/preferences catch-all. ## Scope - Owning repository: govoplan-core. - Define token-level light/dark/system theme behavior for the shared WebUI shell. - Decide which appearance controls belong to user preferences, tenant defaults, and system policy. - Add theme preview/selection UI where appropriate. - Ensure module WebUIs consume shared CSS tokens instead of module-local one-off palettes. - Add visual regression or screenshot checks for core shell theming once the UI surface is stable. ## Out Of Scope - Language package/i18n catalogue work unless it directly affects theme UI labels. - Campaign-specific copy or page-level redesigns. - Custom per-tenant branding beyond the shared theme contract, unless explicitly accepted as a follow-up slice. ## Acceptance Criteria - Theme preference behavior is documented and visible in Settings. - Core shell and shared components render correctly in light, dark, and system modes. - At least one module page verifies token consumption through the shared shell. - Follow-up issues are opened for tenant branding or i18n if those need separate product decisions.

zemion added the

labels 2026-07-09 11:49:50 +02:00

zemion commented

2026-07-12 01:36:00 +02:00

Codex State: progress

Summary

Added a core-owned theme contract entry to the UI/UX decision ledger, converted the user theme selector to the shared SegmentedControl, added a token-based theme preview, and adjusted segmented-control CSS to use shared tokens.

Changed Files

docs/UI_UX_DECISION_LEDGER.md
webui/src/features/settings/SettingsPage.tsx
webui/src/styles/components.css

Verification

/home/zemion/.nvm/versions/node/v22.22.3/bin/npm run build

Next / Blocked

Keep this open for tenant defaults/policy enforcement and visual regression coverage across module WebUIs.

Suggested status label: status/in-progress

## Codex State: progress ### Summary - Added a core-owned theme contract entry to the UI/UX decision ledger, converted the user theme selector to the shared SegmentedControl, added a token-based theme preview, and adjusted segmented-control CSS to use shared tokens. ### Changed Files - `docs/UI_UX_DECISION_LEDGER.md` - `webui/src/features/settings/SettingsPage.tsx` - `webui/src/styles/components.css` ### Verification - `/home/zemion/.nvm/versions/node/v22.22.3/bin/npm run build` ### Next / Blocked - Keep this open for tenant defaults/policy enforcement and visual regression coverage across module WebUIs. Suggested status label: `status/in-progress`

zemion commented

2026-07-12 16:17:43 +02:00

Codex State: progress

Summary

Expanded the shared theme token layer across core and active module CSS, fixed system theme resolution to follow prefers-color-scheme, and added color-scheme metadata for native controls.
Created follow-up govoplan-core#246 for configurable theming from palette presets through advanced token overrides.

Changed Files

webui/src/App.tsx
webui/src/styles/tokens.css
webui/src/styles/components.css
webui/src/styles/forms.css
webui/src/styles/layout.css

Verification

/home/zemion/.nvm/versions/node/v22.22.3/bin/npm run build
CSS fixed-color scan clean outside tokens.css

Next / Blocked

Keep open until visual screenshot/regression coverage and tenant/default policy decisions are handled.

Suggested status label: status/in-progress

## Codex State: progress ### Summary - Expanded the shared theme token layer across core and active module CSS, fixed system theme resolution to follow prefers-color-scheme, and added color-scheme metadata for native controls. - Created follow-up govoplan-core#246 for configurable theming from palette presets through advanced token overrides. ### Changed Files - `webui/src/App.tsx` - `webui/src/styles/tokens.css` - `webui/src/styles/components.css` - `webui/src/styles/forms.css` - `webui/src/styles/layout.css` ### Verification - `/home/zemion/.nvm/versions/node/v22.22.3/bin/npm run build` - `CSS fixed-color scan clean outside tokens.css` ### Next / Blocked - Keep open until visual screenshot/regression coverage and tenant/default policy decisions are handled. Suggested status label: `status/in-progress`

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: add-ideas/govoplan-core#224