From 045c0f154ac0b32c40daed712f05a6222c97a320 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 3 Jul 2026 21:17:17 +0000 Subject: [PATCH 1/2] Dim assistant prose body text in dark mode 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 Claude-Session: https://claude.ai/code/session_013nt5HnqeFaD7cd7XhzgW55 --- src/styles/main.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/styles/main.css b/src/styles/main.css index 879f78aa70e..6e3ac0ab34d 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -150,7 +150,9 @@ 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)); --tw-prose-invert-lead: var(--color-gray-400); --tw-prose-invert-counters: var(--color-gray-400); --tw-prose-invert-bullets: var(--color-gray-600); From 7d3919fb0c7d4b54a3992bc94a17a289aa7db7b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Victor=20Mu=C5=A1tar?= Date: Sat, 4 Jul 2026 17:43:38 +0200 Subject: [PATCH 2/2] Dim emphasized prose text in dark mode 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. --- src/styles/main.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/styles/main.css b/src/styles/main.css index 6e3ac0ab34d..b9990a784a0 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -153,13 +153,20 @@ body { /* 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)); + /* 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);