mirror of
https://github.com/we-promise/sure.git
synced 2026-05-08 21:25:00 +00:00
f45c7b33fd
prose.css already overrides <strong> and the heading family for dark mode, but inline <code> was missing the same treatment. The Tailwind Typography plugin's default code color (designed for the light prose theme) fell through unchanged in dark mode, producing a near-black foreground on the dark page background. URLs and other technical references rendered as <code> were effectively invisible. Adding a third override block in the same shape as the existing two: white text on a gray-800 chip in dark mode. Light mode keeps the plugin defaults. Spotted on the Mercury settings panel while reviewing #1621, but the bug applies to every .prose consumer (AI chat, GitHub release notes, dashboard prose blocks, etc.). Closes #1624.
25 lines
1.1 KiB
CSS
25 lines
1.1 KiB
CSS
/* Specific override for strong tags in prose under dark mode */
|
|
.prose:where([data-theme=dark], [data-theme=dark] *) strong {
|
|
color: theme(colors.white) !important;
|
|
}
|
|
|
|
/* Specific override for headings in prose under dark mode */
|
|
.prose:where([data-theme=dark], [data-theme=dark] *) h1,
|
|
.prose:where([data-theme=dark], [data-theme=dark] *) h2,
|
|
.prose:where([data-theme=dark], [data-theme=dark] *) h3,
|
|
.prose:where([data-theme=dark], [data-theme=dark] *) h4,
|
|
.prose:where([data-theme=dark], [data-theme=dark] *) h5,
|
|
.prose:where([data-theme=dark], [data-theme=dark] *) h6,
|
|
.prose:where([data-theme=dark], [data-theme=dark] *) blockquote,
|
|
.prose:where([data-theme=dark], [data-theme=dark] *) thead th {
|
|
color: theme(colors.white) !important;
|
|
}
|
|
|
|
/* Inline code in prose under dark mode. Without this the Tailwind Typography
|
|
plugin's default near-black foreground falls through and disappears against
|
|
the dark page background. */
|
|
.prose:where([data-theme=dark], [data-theme=dark] *) code {
|
|
color: theme(colors.white) !important;
|
|
background-color: theme(colors.gray.800) !important;
|
|
}
|