Skip to content

Fix demos dark mode - #884

Merged
zahlekhan merged 3 commits into
thesysdev:mainfrom
zahlekhan:codex/fix-demos-dark-mode
Jul 30, 2026
Merged

Fix demos dark mode#884
zahlekhan merged 3 commits into
thesysdev:mainfrom
zahlekhan:codex/fix-demos-dark-mode

Conversation

@zahlekhan

@zahlekhan zahlekhan commented Jul 28, 2026

Copy link
Copy Markdown
Contributor

Summary

  • keep the demos code panel dark in dark mode instead of flipping to a white inverted surface
  • strengthen muted text, input borders, panel borders, and empty-state contrast
  • add an accessible label to the model selector

Screenshot

Demos playground with the corrected dark-mode surfaces and contrast

Root cause

The code panel used --openui-inverted-background and accent text tokens. Those tokens intentionally invert with the active theme, so the code canvas became white in dark mode while its text and controls remained styled for a dark canvas. Several tertiary text and border tokens also compounded low alpha values, making placeholders, empty states, and panel boundaries difficult to see.

Impact

The demos playground now has consistent dark surfaces and a clearer, more readable visual hierarchy. Light mode also benefits from stronger muted-text contrast.

Validation

  • pnpm --filter @openuidev/docs types:check
  • targeted ESLint checks
  • Prettier and git diff --check

@zahlekhan zahlekhan changed the title Fix demos dark mode and add visual regression tests Fix demos dark mode Jul 28, 2026
@zahlekhan
zahlekhan marked this pull request as ready for review July 30, 2026 08:19
@zahlekhan
zahlekhan enabled auto-merge (squash) July 30, 2026 08:19
@zahlekhan
zahlekhan merged commit ae6a3e2 into thesysdev:main Jul 30, 2026
2 checks passed
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.

2 participants