fix: blog dark mode - text invisible on dark background#25620
fix: blog dark mode - text invisible on dark background#25620krrish-berri-2 merged 1 commit intomainfrom
Conversation
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 <html> 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: Krrish Dholakia <krrish-berri-2@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
|
Greptile SummaryThis PR fixes a dark mode readability bug on the blog pages caused by incorrect CSS selector specificity. Both Confidence Score: 5/5CSS-only docs fix with no backend impact — safe to merge. All changes are confined to documentation site CSS. The selector fix is technically correct (compound vs. descendant for same-element attributes), all targeted CSS module classes exist, and No files require special attention.
|
| Filename | Overview |
|---|---|
| docs/my-website/src/css/custom.css | Fixes dark mode blog selectors from descendant to compound form; adds missing pre and a overrides. !important on pre is consistent with existing light-mode rules for the same element. |
| docs/my-website/src/theme/BlogListPage/styles.module.css | Adds dark mode overrides for marquee, pagination, meta, and separator elements. Descendant selectors are correct here since these CSS module classes are on child elements, not on <html>. |
Flowchart
%%{init: {'theme': 'neutral'}}%%
flowchart TD
A["<html data-theme='dark' class='blog-wrapper'>"] --> B{Selector type}
B -->|"BROKEN: descendant\n[data-theme='dark'] .blog-wrapper h1"| C["Looks for .blog-wrapper\nas a CHILD of html[data-theme='dark']"]
C --> D["No match — both attrs\nare on the same element"]
B -->|"FIXED: compound\n[data-theme='dark'].blog-wrapper h1"| E["Matches html element\nthat has BOTH attributes"]
E --> F["dark-mode color applied\ncolor: #f9fafb"]
D --> G["Light-mode color leaks through\ncolor: #111827 on dark background"]
Reviews (1): Last reviewed commit: "fix: blog dark mode - text invisible on ..." | Re-trigger Greptile
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
4 participants
Relevant issues
Fixes blog dark mode readability issue reported via user feedback — text was invisible (dark text on dark background).
Pre-Submission checklist
Screenshots / Proof of Fix
Before (reported issue): Blog post title, headings, and body text are invisible in dark mode — dark text (#111827) rendered on dark background (#0d1117).
After fix — Blog post page in dark mode:
Blog post in dark mode with readable light text
After fix — Blog list page in dark mode:
Blog list page in dark mode with readable text
Light mode still works correctly:
Blog post in light mode
Video walkthrough:
blog_dark_mode_fix_demo.mp4
Type
🐛 Bug Fix
Changes
Root cause
Docusaurus applies both
data-theme="dark"and theblog-wrapperclass to the same<html>element. The CSS dark-mode overrides used descendant selectors with a space:Since both attributes are on
<html>,.blog-wrapperis never a descendant of[data-theme='dark']— they're on the same element. The dark-mode overrides never applied, leaving the light-mode colors (#111827 dark text) on the dark background (#0d1117).Fix
Changed to compound selectors (no space) so both conditions match the same
<html>element:Additional improvements
precode blocks and links in blog postsTo show artifacts inline, enable in settings.
Slack Thread