Skip to content

Dim assistant prose body text in dark mode #2421

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gary149 merged 2 commits into from
Jul 4, 2026
+11 −2
Merged

Dim assistant prose body text in dark mode #2421

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
045c0f1
Dim assistant prose body text in dark mode
claude Jul 3, 2026
7d3919f
Dim emphasized prose text in dark mode
gary149 Jul 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 11 additions & 2 deletions src/styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,14 +150,23 @@ body {
--tw-prose-pre-bg: var(--color-gray-800);
--tw-prose-th-borders: var(--color-gray-300);
--tw-prose-td-borders: var(--color-gray-200);
--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));

@chatgpt-codex-connector chatgpt-codex-connector Bot Jul 4, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Use a static fallback for the mixed prose color

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 👍 / 👎.

/* The plugin defaults headings/links/bold/code/kbd to pure white in dark mode,
which glows against the dimmed body — cap the emphasis tier at gray-200. */
--tw-prose-invert-headings: var(--color-gray-200);
--tw-prose-invert-lead: var(--color-gray-400);
--tw-prose-invert-links: var(--color-gray-200);
--tw-prose-invert-bold: var(--color-gray-200);
--tw-prose-invert-counters: var(--color-gray-400);
--tw-prose-invert-bullets: var(--color-gray-600);
--tw-prose-invert-hr: var(--color-gray-700);
--tw-prose-invert-quotes: var(--color-gray-100);
--tw-prose-invert-quotes: var(--color-gray-200);
--tw-prose-invert-quote-borders: var(--color-gray-700);
--tw-prose-invert-captions: var(--color-gray-400);
--tw-prose-invert-kbd: var(--color-gray-200);
--tw-prose-invert-code: var(--color-gray-200);
--tw-prose-invert-pre-code: var(--color-gray-300);
--tw-prose-invert-th-borders: var(--color-gray-600);
--tw-prose-invert-td-borders: var(--color-gray-700);
Expand Down
Loading