Skip to content

Add: light theme for the settings pages - #94

Merged
SandObserver merged 2 commits into
mainfrom
feat/settings-light-theme
Aug 16, 2026
Merged

SandObserver merged 2 commits into
mainfrom
feat/settings-light-theme

Conversation

@SandObserver

Copy link
Copy Markdown
Owner

Summary

  • Redeclare the palette, the roles and the semantic sets at their light values under html[data-theme="light"] in tokens.css, with an increased-contrast partner for every light hue and a :root, html[data-theme="light"] selector list on the prefers-contrast: more block.
  • Add the --on-accent role for ink on a filled control, and point the admin rules that drew --label-primary on a coloured fill at it.
  • Scope the admin page's surfaces, borders, overlays and elevation to page tokens (--ov-soft/--ov/--ov-strong, --field-fill, --track-off, --scrim, --shadow-*) and give each a light value; no themed colour is left written into a rule.
  • Add ui/js/theme.js for the mode logic and ui/js/admin-theme.js, a blocking classic script that resolves the mode and writes data-theme and the theme-color meta before the first paint.
  • Add a Settings Display Mode row to Appearance > Display with System Default, Light and Dark, stored in localStorage under sy-theme, applied on selection and followed live while the mode is System Default.
  • Rewrite the contrast test's resolver to read declarations per selector and per at-rule, and measure every required pair in both themes, raised and not.
  • Add the light palette and light semantic tables to palette-values.test.mjs.
  • Add the five new strings to all six catalogs.

Testing
All green, except the Docker build smoke test, which has no local Docker and is left to CI. Added ui/test/theme.test.mjs (12 tests), two light-theme contrast combinations plus an accent-as-text check, and two light reference-value tests.

Checklist

  • Stays within the project constraints: one container, no runtime dependencies, no build step (see CONTRIBUTING.md).
  • Tests added or updated for new logic, and the full suite, lint, and typechecks pass.
  • Docs updated if behavior or configuration changed.
  • CHANGELOG.md updated under Unreleased if the change is user-visible.

Redeclare the palette, roles and semantic sets at their light values under
html[data-theme="light"], and scope the admin page's overlays, elevation and
surfaces to the same attribute.

A Settings Display Mode row in Appearance selects System Default, Light or
Dark. The choice is stored per device in localStorage and applied before the
first paint by a classic script.
@SandObserver SandObserver added the ui/ux UI, UX, and accessibility only fix label Aug 16, 2026
Comment thread ui/test/palette-values.test.mjs Fixed
@SandObserver
SandObserver merged commit 57cd708 into main Aug 16, 2026
4 checks passed
@SandObserver
SandObserver deleted the feat/settings-light-theme branch August 16, 2026 22:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ui/ux UI, UX, and accessibility only fix

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants