Fix invisible bold text and other prose colors in dark mode
The Tailwind Typography plugin sets bold/strong text to gray-900 by default, which is invisible on dark backgrounds. Added prose-strong:text-foreground and other theme-aware color overrides for list markers, blockquotes, rules, and table headers across all markdown prose views.
This commit is contained in:
@@ -58,7 +58,7 @@ export function ArticleContent({ event, preview, className }: ArticleContentProp
|
||||
className="w-full rounded-xl object-cover max-h-96 mb-6"
|
||||
/>
|
||||
)}
|
||||
<div className="prose prose-sm max-w-none break-words text-foreground prose-headings:text-foreground prose-headings:font-bold prose-a:text-primary prose-img:rounded-lg prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:bg-muted prose-pre:text-foreground prose-code:text-[13px] prose-code:before:content-none prose-code:after:content-none prose-code:bg-muted prose-code:rounded prose-code:px-1.5 prose-code:py-0.5 prose-code:font-normal">
|
||||
<div className="prose prose-sm max-w-none break-words text-foreground prose-headings:text-foreground prose-headings:font-bold prose-strong:text-foreground prose-a:text-primary prose-img:rounded-lg prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:bg-muted prose-pre:text-foreground prose-code:text-[13px] prose-code:before:content-none prose-code:after:content-none prose-code:bg-muted prose-code:rounded prose-code:px-1.5 prose-code:py-0.5 prose-code:font-normal prose-li:marker:text-muted-foreground prose-blockquote:text-muted-foreground prose-blockquote:border-border prose-hr:border-border prose-th:text-foreground">
|
||||
<Markdown rehypePlugins={[rehypeSanitize]}>
|
||||
{event.content}
|
||||
</Markdown>
|
||||
|
||||
@@ -136,7 +136,7 @@ export function CustomNipCard({ event, preview = true }: CustomNipCardProps) {
|
||||
{/* Full markdown content -- detail view only, outside card */}
|
||||
{!preview && event.content && (
|
||||
<div className="rounded-2xl border border-border overflow-hidden px-4 py-4 sidebar:px-5 sidebar:py-5">
|
||||
<div className="prose prose-sm max-w-none break-words text-foreground prose-headings:text-foreground prose-headings:font-bold prose-a:text-primary prose-img:rounded-lg prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:bg-muted prose-pre:text-foreground prose-code:text-[13px] prose-code:before:content-none prose-code:after:content-none prose-code:bg-muted prose-code:rounded prose-code:px-1.5 prose-code:py-0.5 prose-code:font-normal">
|
||||
<div className="prose prose-sm max-w-none break-words text-foreground prose-headings:text-foreground prose-headings:font-bold prose-strong:text-foreground prose-a:text-primary prose-img:rounded-lg prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:bg-muted prose-pre:text-foreground prose-code:text-[13px] prose-code:before:content-none prose-code:after:content-none prose-code:bg-muted prose-code:rounded prose-code:px-1.5 prose-code:py-0.5 prose-code:font-normal prose-li:marker:text-muted-foreground prose-blockquote:text-muted-foreground prose-blockquote:border-border prose-hr:border-border prose-th:text-foreground">
|
||||
<Markdown rehypePlugins={[rehypeSanitize]}>
|
||||
{event.content}
|
||||
</Markdown>
|
||||
|
||||
@@ -213,7 +213,7 @@ export function PullRequestCard({
|
||||
{/* PR description */}
|
||||
{!preview && hasDescription && (
|
||||
<div className="rounded-2xl border border-border overflow-hidden px-4 py-4 sidebar:px-5 sidebar:py-5">
|
||||
<div className="prose prose-sm max-w-none break-words text-foreground prose-headings:text-foreground prose-headings:font-bold prose-a:text-primary prose-img:rounded-lg prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:bg-muted prose-pre:text-foreground prose-code:text-[13px] prose-code:before:content-none prose-code:after:content-none prose-code:bg-muted prose-code:rounded prose-code:px-1.5 prose-code:py-0.5 prose-code:font-normal">
|
||||
<div className="prose prose-sm max-w-none break-words text-foreground prose-headings:text-foreground prose-headings:font-bold prose-strong:text-foreground prose-a:text-primary prose-img:rounded-lg prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:bg-muted prose-pre:text-foreground prose-code:text-[13px] prose-code:before:content-none prose-code:after:content-none prose-code:bg-muted prose-code:rounded prose-code:px-1.5 prose-code:py-0.5 prose-code:font-normal prose-li:marker:text-muted-foreground prose-blockquote:text-muted-foreground prose-blockquote:border-border prose-hr:border-border prose-th:text-foreground">
|
||||
<Markdown rehypePlugins={[rehypeSanitize]}>
|
||||
{event.content}
|
||||
</Markdown>
|
||||
|
||||
@@ -575,7 +575,7 @@ function MessageBubble({ message }: { message: DisplayMessage }) {
|
||||
{isUser ? (
|
||||
<p className="whitespace-pre-wrap break-words">{message.content}</p>
|
||||
) : (
|
||||
<div className="prose prose-sm max-w-none text-foreground prose-headings:text-foreground prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-li:my-0.5 prose-pre:my-2 prose-code:text-xs prose-a:text-primary">
|
||||
<div className="prose prose-sm max-w-none text-foreground prose-headings:text-foreground prose-strong:text-foreground prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-li:my-0.5 prose-pre:my-2 prose-code:text-xs prose-a:text-primary">
|
||||
<Markdown rehypePlugins={[rehypeSanitize]}>
|
||||
{message.content}
|
||||
</Markdown>
|
||||
|
||||
Reference in New Issue
Block a user