Skip to content

fix: dark/light contrast on 6 chrome surfaces - #1529

Open
ParasxAgarwal wants to merge 1 commit into
responsively-org:mainfrom
ParasxAgarwal:fix/dark-mode-contrast
Open

fix: dark/light contrast on 6 chrome surfaces#1529
ParasxAgarwal wants to merge 1 commit into
responsively-org:mainfrom
ParasxAgarwal:fix/dark-mode-contrast

Conversation

@ParasxAgarwal

Copy link
Copy Markdown

What

Six small, objective dark/light contrast fixes in the app chrome. className-only — no behavior, store, or layout change.

Dark mode was missing dark: twins on a few surfaces, and two elements had the inverse bug (hardcoded white text that is unreadable in light mode):

Missing dark twins (look wrong in dark mode):

  • DropDown menu panel — dividers + outline ring had no dark variant → add dark:divide-slate-700 + dark:ring-white/10 (matches the menu flyout outline).
  • ViewAllBookmarks panel — the bare border defaulted to a light gray with no dark color → add border-slate-300 + dark:border-slate-700.
  • Toggle switch knob — light-only knob border → add dark:after:border-gray-500.
  • AboutDialog tagline — text-gray-500 too dim on the dark panel → add dark:text-gray-400.

Inverse bugs (unreadable in light mode):

  • ConfirmDialog title was text-white on the modal panel, which is bg-slate-200 in light mode → white-on-light-gray, invisible. Now text-slate-800 dark:text-white.
  • Notification text was text-white inside the menu flyout, which is bg-slate-100 in light mode → white-on-light, invisible. Now inherits in light, dark:text-white.

Intentionally NOT changed

The three bg-white surfaces in Previewer/Device (the device viewport behind the <webview>) and DesignOverlay (the design-mockup backdrop) are the canvas, not chrome: the loaded website / uploaded design paints over them, so they must stay neutral in every theme. Darkening them would flash dark behind transparent or short pages. Left as-is by design.

Verification (project toolchain)

  • prettier --check: all matched
  • eslint on the 6 files: clean (exit 0)
  • tsc --noEmit: clean (exit 0, 0 errors)
  • vitest run (full suite): 14 files / 69 tests passed

Note on the commit

Committed with --no-verify. The repo's husky pre-commit hook fails to spawn cross-env in this monorepo checkout (the binary lives under desktop-app/node_modules/.bin while the hook runs from the repo root → ENOENT before it does any work). The checks the hook performs (prettier + eslint via lint-staged) were run and pass independently, as shown above, and CI lints via the lint script rather than the hook.

Dark mode was missing dark: twins on a few chrome surfaces, and two
elements had the inverse bug (hardcoded white text, unreadable in light
mode). className-only; no behavior, store, or layout change.

Missing dark twins:
- DropDown menu panel: add dark:divide-slate-700 + dark:ring-white/10
  (matches the menu flyout outline).
- ViewAllBookmarks panel: bare border had no dark color -> add
  border-slate-300 + dark:border-slate-700.
- Toggle switch knob: add dark:after:border-gray-500.
- About dialog tagline: add dark:text-gray-400 (gray-500 too dim).

Inverse bugs (unreadable in light mode):
- ConfirmDialog title was text-white on the bg-slate-200 light panel ->
  now text-slate-800 dark:text-white.
- Notification text was text-white inside the bg-slate-100 light flyout ->
  now inherits in light, dark:text-white.

The bg-white CANVAS surfaces in Previewer/Device (webview viewport) and
DesignOverlay (design backdrop) are intentionally left as-is: the loaded
site / design image paints over them, so they must stay neutral in every
theme.

Verified with the project toolchain: prettier --check matched, eslint
clean, tsc --noEmit clean, vitest run 14 files / 69 tests passed.

Committed with --no-verify: the husky pre-commit hook cannot spawn
cross-env in this monorepo checkout (binary under desktop-app/node_modules/.bin,
hook runs from repo root -> ENOENT). The hook's checks (prettier + eslint)
pass independently and CI lints via the 'lint' script.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant