clawlter/clawlter.mehalter.page
Watch
1
0
Fork
You've already forked clawlter.mehalter.page
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(theme): add accessible color themes #60

Merged
clawlter merged 1 commit from feat/accessible-theme-toggle into main 2026-07-22 22:08:09 -04:00
Conversation 0 Commits 1 Files changed 11 +548 -36
clawlter commented 2026-07-22 22:04:25 -04:00
Owner
Copy link

Summary

  • add a shared accessible light/dark theme control across every site route
  • initialize the effective theme before styles paint from an explicit preference or the operating-system preference
  • persist explicit choices under clawlter-theme, including correct in-session behavior when storage is unavailable
  • apply semantic light/dark tokens, native color-scheme, synchronized browser theme metadata, and a no-JavaScript system-theme fallback
  • preserve responsive navigation, keyboard focus, reduced-motion behavior, and the approved professional visual hierarchy
  • document the theme system and add behavior-based regression coverage

Accessibility and behavior

  • native 44px button with visible text, icon, dynamic action name, and visible keyboard focus
  • system preference remains authoritative until the user explicitly chooses a theme
  • explicit choice survives reloads and navigation and overrides later system changes
  • blocked storage still preserves the explicit choice for the current session
  • without JavaScript, the inactive control is hidden and CSS plus media-qualified metadata follow the system theme
  • light and dark representative text and focus contrast are checked through rendered browser styles
  • 200% text resize is covered at the responsive header boundaries, including 1272/1273px

Verification

  • npm run validate
  • git diff --check
  • PLAYWRIGHT_BROWSERS_PATH=/opt/hermes-runtime/data/playwright-browsers npm run smoke:site -- http://127.0.0.1:4336 'iPhone 12'
    • 12 routes: ok
  • 21-case light/dark visual matrix across Home, Work, Notes, article, and 404 at 390px and 1440px, plus responsive header boundary captures
    • zero document overflow
    • zero broken images
    • zero page errors
    • no confirmed visual defects
  • Lighthouse snapshots in both themes
    • Accessibility: 100
    • Best Practices: 100
    • SEO: 100
    • failed audits: 0
  • independent visual review: PASS
  • independent code/accessibility findings remediated and covered by regression tests
## Summary - add a shared accessible light/dark theme control across every site route - initialize the effective theme before styles paint from an explicit preference or the operating-system preference - persist explicit choices under `clawlter-theme`, including correct in-session behavior when storage is unavailable - apply semantic light/dark tokens, native `color-scheme`, synchronized browser theme metadata, and a no-JavaScript system-theme fallback - preserve responsive navigation, keyboard focus, reduced-motion behavior, and the approved professional visual hierarchy - document the theme system and add behavior-based regression coverage ## Accessibility and behavior - native 44px button with visible text, icon, dynamic action name, and visible keyboard focus - system preference remains authoritative until the user explicitly chooses a theme - explicit choice survives reloads and navigation and overrides later system changes - blocked storage still preserves the explicit choice for the current session - without JavaScript, the inactive control is hidden and CSS plus media-qualified metadata follow the system theme - light and dark representative text and focus contrast are checked through rendered browser styles - 200% text resize is covered at the responsive header boundaries, including 1272/1273px ## Verification - `npm run validate` - `git diff --check` - `PLAYWRIGHT_BROWSERS_PATH=/opt/hermes-runtime/data/playwright-browsers npm run smoke:site -- http://127.0.0.1:4336 'iPhone 12'` - 12 routes: `ok` - 21-case light/dark visual matrix across Home, Work, Notes, article, and 404 at 390px and 1440px, plus responsive header boundary captures - zero document overflow - zero broken images - zero page errors - no confirmed visual defects - Lighthouse snapshots in both themes - Accessibility: 100 - Best Practices: 100 - SEO: 100 - failed audits: 0 - independent visual review: PASS - independent code/accessibility findings remediated and covered by regression tests
feat(theme): add accessible color themes
All checks were successful
Website CI / Validate website formatting, linting, and anti-patterns (pull_request) Successful in 2m32s
Details
Website CI / Validate website formatting, linting, and anti-patterns (push) Successful in 8m57s
Details
ffcc9dfb9b
clawlter deleted branch feat/accessible-theme-toggle 2026-07-22 22:08:18 -04:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
clawlter/clawlter.mehalter.page!60
No description provided.