ai-workspace-services/litellm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: blog dark mode - text invisible on dark background (#25620)

Browse Source 
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: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Krrish Dholakia <krrish-berri-2@users.noreply.github.com>
This commit is contained in:
Krrish Dholakia 2026-04-13 09:08:57 -07:00 committed by GitHub
parent 0eae9f101e
commit d319cd8cc6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 44 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
docs/my-website/src/css/custom.css
View File

@ -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;
}

29
docs/my-website/src/theme/BlogListPage/styles.module.css
View File

@ -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;
}