From d319cd8cc6ecb64d3a0ac3939858a9b91f44281b Mon Sep 17 00:00:00 2001 From: Krrish Dholakia Date: Mon, 13 Apr 2026 09:08:57 -0700 Subject: [PATCH] fix: blog dark mode - text invisible on dark background (#25620) The blog CSS selectors for dark mode used descendant selectors like [data-theme='dark'] .blog-wrapper which never matched because both data-theme and .blog-wrapper are applied to the same element by Docusaurus. Fixed by using compound selectors (no space): [data-theme='dark'].blog-wrapper. Also added missing dark-mode overrides for: - pre/code blocks in blog posts - link colors in blog posts - marquee items, separators, and labels on blog list page - pagination links on blog list page - meta text and author separators on blog list page Co-authored-by: Cursor Agent Co-authored-by: Krrish Dholakia --- docs/my-website/src/css/custom.css | 20 +++++++++---- .../src/theme/BlogListPage/styles.module.css | 29 +++++++++++++++++++ 2 files changed, 44 insertions(+), 5 deletions(-) diff --git a/docs/my-website/src/css/custom.css b/docs/my-website/src/css/custom.css index 29be18a5ae..b036604cf1 100644 --- a/docs/my-website/src/css/custom.css +++ b/docs/my-website/src/css/custom.css @@ -899,18 +899,28 @@ video { font-size: 0.85rem; } -[data-theme='dark'] .blog-wrapper article header h1, -[data-theme='dark'] .blog-wrapper article .markdown h2, -[data-theme='dark'] .blog-wrapper article .markdown h3 { +[data-theme='dark'].blog-wrapper article header h1, +[data-theme='dark'].blog-wrapper article .markdown h2, +[data-theme='dark'].blog-wrapper article .markdown h3 { color: #f9fafb; } -[data-theme='dark'] .blog-wrapper article .markdown { +[data-theme='dark'].blog-wrapper article .markdown { color: #d1d5db; } -[data-theme='dark'] .blog-wrapper article .markdown code { +[data-theme='dark'].blog-wrapper article .markdown code { background: #1f2937; border-color: #374151; color: #f9fafb; } + +[data-theme='dark'].blog-wrapper article .markdown pre { + background: #161b22 !important; + border-color: #30363d !important; + box-shadow: none; +} + +[data-theme='dark'].blog-wrapper article .markdown a { + color: #38bdf8; +} diff --git a/docs/my-website/src/theme/BlogListPage/styles.module.css b/docs/my-website/src/theme/BlogListPage/styles.module.css index 520e4c41c6..aab6ad5cf6 100644 --- a/docs/my-website/src/theme/BlogListPage/styles.module.css +++ b/docs/my-website/src/theme/BlogListPage/styles.module.css @@ -252,3 +252,32 @@ [data-theme='dark'] .hiringBtn:hover { background: #fff; } + +[data-theme='dark'] .marqueeItem { + color: #9ca3af; +} + +[data-theme='dark'] .marqueeSep { + color: #374151; +} + +[data-theme='dark'] .marqueeLabel { + color: #6b7280; +} + +[data-theme='dark'] .pageLink { + color: #d1d5db; +} + +[data-theme='dark'] .pageLink:hover { + color: #38bdf8; +} + +[data-theme='dark'] .meta { + color: #9ca3af; +} + +[data-theme='dark'] .metaDash, +[data-theme='dark'] .authorSep { + color: #4b5563; +}