Dim assistant prose body text in dark mode#2421
Conversation
The prose body used gray-300 (#d4d4d4) in dark mode, which read slightly too bright. Gray-400 (#a3a3a3) is too dim a jump, so mix the two for a half-step (~#bcbcbc). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013nt5HnqeFaD7cd7XhzgW55
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 045c0f154a
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| --tw-prose-invert-body: var(--color-gray-300); | ||
| /* gray-300 reads too bright for body text on dark backgrounds, but gray-400 is | ||
| too dim — split the difference (~#bcbcbc). */ | ||
| --tw-prose-invert-body: color-mix(in srgb, var(--color-gray-300) 50%, var(--color-gray-400)); |
There was a problem hiding this comment.
Because this app is on Vite 6 without a build.target override, the production target still includes browsers such as Safari 14 that do not support color-mix(). Placing the unsupported function inside a custom property does not make it fall back cleanly: when dark:prose-invert maps this into the typography plugin's color: var(--tw-prose-body), that color declaration becomes invalid. On dark prose pages without a parent dark:text-* fallback, such as src/routes/privacy/+page.svelte, body text can inherit the default black color against dark:bg-gray-900; use the computed static color or guard the color-mix() assignment with @supports.
Useful? React with 👍 / 👎.
Headings, bold, links, inline code, and kbd fell back to the typography plugin's pure white in dark mode, which glowed against the dimmed body text. Cap the emphasis tier at gray-200 and soften blockquotes from gray-100 to match.
2 participants
The prose body used gray-300 (#d4d4d4) in dark mode, which read slightly
too bright. Gray-400 (#a3a3a3) is too dim a jump, so mix the two for a
half-step (~#bcbcbc).
Co-Authored-By: Claude Fable 5 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_013nt5HnqeFaD7cd7XhzgW55