Skip to content

Commit ad63797

Browse files
committed
Change the color to white on blogs
1 parent e99e37f commit ad63797

1 file changed

Lines changed: 66 additions & 0 deletions

File tree

src/css/custom.css

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -358,6 +358,72 @@ html[data-theme="dark"] .menu__link--active::after {
358358
color: #60a5fa;
359359
}
360360

361+
/* Ensure blog and markdown content is readable in dark mode */
362+
html[data-theme="dark"] .blog .markdown,
363+
html[data-theme="dark"] .blog-post .markdown,
364+
html[data-theme="dark"] .markdown,
365+
html[data-theme="dark"] article,
366+
html[data-theme="dark"] .post,
367+
html[data-theme="dark"] .content,
368+
html[data-theme="dark"] .blog .content {
369+
color: #ffffff !important;
370+
}
371+
372+
/* Make headings and list text white as well */
373+
html[data-theme="dark"] .markdown h1,
374+
html[data-theme="dark"] .markdown h2,
375+
html[data-theme="dark"] .markdown h3,
376+
html[data-theme="dark"] .markdown h4,
377+
html[data-theme="dark"] .markdown h5,
378+
html[data-theme="dark"] .markdown h6,
379+
html[data-theme="dark"] .blog .markdown h1,
380+
html[data-theme="dark"] .blog .markdown h2 {
381+
color: #ffffff !important;
382+
}
383+
384+
/* Links in blog content should be clearly visible in dark mode */
385+
/* Links in blog content should be clearly visible in dark mode.
386+
Narrow targeting to anchors within article markdown paragraphs so
387+
tag-pill components and other tagged elements keep their original colors. */
388+
html[data-theme="dark"] article .markdown p a,
389+
html[data-theme="dark"] article p a,
390+
html[data-theme="dark"] .blog-post .markdown p a {
391+
color: #93c5fd !important;
392+
}
393+
394+
/* Force article/blog post prose to white in dark mode without touching tag pills */
395+
html[data-theme="dark"] article h1,
396+
html[data-theme="dark"] article h2,
397+
html[data-theme="dark"] article h3,
398+
html[data-theme="dark"] article h4,
399+
html[data-theme="dark"] article h5,
400+
html[data-theme="dark"] article h6,
401+
html[data-theme="dark"] article p,
402+
html[data-theme="dark"] article li,
403+
html[data-theme="dark"] article blockquote,
404+
html[data-theme="dark"] article dd,
405+
html[data-theme="dark"] article dt,
406+
html[data-theme="dark"] article small,
407+
html[data-theme="dark"] article figcaption,
408+
html[data-theme="dark"] .blog-wrapper,
409+
html[data-theme="dark"] .blog-post-page,
410+
html[data-theme="dark"] .plugin-blog,
411+
html[data-theme="dark"] .container p,
412+
html[data-theme="dark"] .col--7 p,
413+
html[data-theme="dark"] .row p {
414+
color: #ffffff !important;
415+
-webkit-text-fill-color: #ffffff !important;
416+
}
417+
418+
/* Also enforce for lists and blockquotes inside posts */
419+
html[data-theme="dark"] article li,
420+
html[data-theme="dark"] article ul,
421+
html[data-theme="dark"] article ol,
422+
html[data-theme="dark"] article blockquote {
423+
color: #ffffff !important;
424+
-webkit-text-fill-color: #ffffff !important;
425+
}
426+
361427
/* Navbar styling and alignment */
362428
.navbar,
363429
.navbar__inner,

0 commit comments

Comments
 (0)