Add an "Increase contrast" accessibility setting to Appearance#67
Merged
Conversation
DragonnZhang
pushed a commit
that referenced
this pull request
Jul 7, 2026
DragonnZhang
pushed a commit
that referenced
this pull request
Jul 19, 2026
Resolve merge conflict in docs/loop/feature-ledger.md: adopt main's canonical ledger and prepend this PR's high-contrast (#67) row. No code changes.
DragonnZhang
force-pushed
the
loop/high-contrast
branch
from
July 19, 2026 17:04
67a2c03 to
b3a5ce4
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What & why
Adds an "Increase contrast" toggle to Settings → Appearance → Interface,
directly below the existing Reduce motion toggle — its natural accessibility
companion. Increasing contrast is a standard desktop control (macOS Accessibility
→ Increase contrast, Windows contrast themes, VS Code's High Contrast themes)
that OpenWork lacked. OpenWork's borders, dividers, input outlines and
secondary/"muted" text are intentionally very low-alpha (
--borderisoklch(from var(--foreground) l c h / 0.05),--muted-foregroundis a 50% mix),which is hard to read for low-vision users and in bright environments.
Closes #66.
How it works (frontend-only, no backend)
Mirrors the merged Reduce motion feature end-to-end:
localStorageundercraft-high-contrast(new keyin
lib/local-storage.ts).HighContrastProvidercontext (context/HighContrastContext.tsx), wired inmain.tsxbesideReduceMotionProvider. It reflects the pref asdata-high-contrast="true"on<html>.index.cssgated on:root[data-high-contrast='true']raises thecontrast of the theme tokens — strengthening
--border,--input,--muted-foreground,--foreground-dimmedand the focus--ring, plus avisible
:focus-visibleoutline. Every theme derives those tokens from--foreground(which flips per light/dark), so the alpha-based overrides workin both light and dark and across preset themes. The theme system injects
colors as a plain
:root { … }rule, so the higher-specificity:root[data-high-contrast='true']selector wins without!important.AppearanceSettingsPage(Interface section), off by default.settings.appearance.increaseContrast/…Desc) acrossall 7 locales.
Verification (DoD)
bun run typecheck:all— zero delta vsmain(apps/electroncarries 11pre-existing errors —
vitest/auto-update.ts— byte-identical set on bothbranches;
packages/uiand all other packages clean).bun test— zero delta vsmain: 3578 pass, 56 fail — the identicalpre-existing 56-failure set (diff of failing-test names is empty).
bun run lint:i18n:parity— OK (1546 keys each; +2 in every locale).electron:build:renderer) — succeeds; verified the rulesurvives PostCSS/Tailwind into
apps/electron/dist/renderer/assets/index-*.css:[data-high-contrast=true]{--hc-enabled:1;--border:oklch(from var(--foreground) l c h/.28); …}plus the:focus-visibleoutline.CDP assertion
e2e/assertions/high-contrast.assert.tsdrives the real UI in the draft/no-sessionstate (no backend): opens Settings → Appearance, flips the toggle, and asserts
the switch's
aria-checked, thedata-high-contrastattribute on<html>, thepersisted
localStoragevalue, and that the CSS actually applied (a--hc-enabledmarker computes to1on:root) — toggling twice to prove itapplies and reverts. It follows the merged
reduce-motionassertion pattern.Could not execute the CDP run in this environment: launching Electron requires
downloading the Electron binary, which the sandbox's egress policy blocks (HTTP
403 on the Electron download host) — the same environment limitation documented on
the merged Reduce motion PR (#51). Everything that does not need the Electron
binary (typecheck, tests, i18n parity, renderer bundle) passes.
Scope
Frontend/renderer only — no qwen-code backend changes.
Generated by Claude Code