diff --git a/src/css/custom.css b/src/css/custom.css index cd898991..a5a2a250 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -358,6 +358,72 @@ html[data-theme="dark"] .menu__link--active::after { color: #60a5fa; } +/* Ensure blog and markdown content is readable in dark mode */ +html[data-theme="dark"] .blog .markdown, +html[data-theme="dark"] .blog-post .markdown, +html[data-theme="dark"] .markdown, +html[data-theme="dark"] article, +html[data-theme="dark"] .post, +html[data-theme="dark"] .content, +html[data-theme="dark"] .blog .content { + color: #ffffff !important; +} + +/* Make headings and list text white as well */ +html[data-theme="dark"] .markdown h1, +html[data-theme="dark"] .markdown h2, +html[data-theme="dark"] .markdown h3, +html[data-theme="dark"] .markdown h4, +html[data-theme="dark"] .markdown h5, +html[data-theme="dark"] .markdown h6, +html[data-theme="dark"] .blog .markdown h1, +html[data-theme="dark"] .blog .markdown h2 { + color: #ffffff !important; +} + +/* Links in blog content should be clearly visible in dark mode */ +/* Links in blog content should be clearly visible in dark mode. + Narrow targeting to anchors within article markdown paragraphs so + tag-pill components and other tagged elements keep their original colors. */ +html[data-theme="dark"] article .markdown p a, +html[data-theme="dark"] article p a, +html[data-theme="dark"] .blog-post .markdown p a { + color: #93c5fd !important; +} + +/* Force article/blog post prose to white in dark mode without touching tag pills */ +html[data-theme="dark"] article h1, +html[data-theme="dark"] article h2, +html[data-theme="dark"] article h3, +html[data-theme="dark"] article h4, +html[data-theme="dark"] article h5, +html[data-theme="dark"] article h6, +html[data-theme="dark"] article p, +html[data-theme="dark"] article li, +html[data-theme="dark"] article blockquote, +html[data-theme="dark"] article dd, +html[data-theme="dark"] article dt, +html[data-theme="dark"] article small, +html[data-theme="dark"] article figcaption, +html[data-theme="dark"] .blog-wrapper, +html[data-theme="dark"] .blog-post-page, +html[data-theme="dark"] .plugin-blog, +html[data-theme="dark"] .container p, +html[data-theme="dark"] .col--7 p, +html[data-theme="dark"] .row p { + color: #ffffff !important; + -webkit-text-fill-color: #ffffff !important; +} + +/* Also enforce for lists and blockquotes inside posts */ +html[data-theme="dark"] article li, +html[data-theme="dark"] article ul, +html[data-theme="dark"] article ol, +html[data-theme="dark"] article blockquote { + color: #ffffff !important; + -webkit-text-fill-color: #ffffff !important; +} + /* Navbar styling and alignment */ .navbar, .navbar__inner,