Jannik/PaperClipAI
1
0 Fork 0
mirror of https://github.com/paperclipai/paperclip.git synced 2026-10-26 10:26:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(markdown): make rendered code blocks follow the active theme

Browse Source 
Rendered markdown code blocks were pinned to the Catppuccin literals
#1e1e2e and #cdd6f4. Both the normal and the `prose-invert` variables
used the same two values. A code block therefore stayed dark in light
mode. It was the only dark surface on a light page.

Bind the block to existing theme tokens instead:

- surface  --muted       (the value --code-bg-resolved already falls back to)
- text     --foreground
- border   --border
- radius   --radius-lg

These tokens already carry a `.dark` override, so one rule now covers
both modes. No new token is introduced.

Also move the copy and wrap buttons to --background. Their old fill was
`color-mix(--muted 92%, --background 8%)`. That value is almost equal to
the block's new --muted surface, so the buttons would nearly disappear.

The CodeMirror theme inside the MDXEditor keeps the Catppuccin literals.
That surface is an editor, not a rendered snippet. Changing it needs a
full light CodeMirror theme.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
scotttongandClaude Opus 5 committed 2026-08-17 21:04:58 -07:00
1 parent 4af55ba6bd
commit 0ff8e0eecd
2 files changed
+17 -15
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

ui/src/components/MarkdownBody.tsx
+1 -1
View File
@@ -242,7 +242,7 @@ const codeBlockActionStyle: React.CSSProperties = {
padding: "0.2rem 0.4rem",
borderRadius: "calc(var(--radius) - 4px)",
border: "1px solid color-mix(in oklab, var(--foreground) 14%, transparent)",
backgroundColor: "color-mix(in oklab, var(--muted) 92%, var(--background) 8%)",
backgroundColor: "var(--background)",
color: "var(--muted-foreground)",
fontSize: "var(--text-micro)",
lineHeight: 1,
ui/src/index.css
+16 -14
View File
@@ -1406,10 +1406,10 @@ a.paperclip-mention-chip[data-mention-kind="agent"]::before {
.paperclip-mdxeditor-content pre {
margin: 0.4rem 0;
padding: 0;
border: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent);
border-radius: calc(var(--radius) - 3px);
background: #1e1e2e;
color: #cdd6f4;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--muted);
color: var(--foreground);
overflow-x: auto;
}
@@ -1482,20 +1482,22 @@ a.paperclip-mention-chip[data-mention-kind="agent"]::before {
}
/* Rendered markdown code blocks & inline code (prose/MarkdownBody context).
Dark theme code blocks with compact sizing.
Override prose CSS variables so prose-invert can't revert to defaults. */
Theme-aware: the block rides --muted/--foreground/--border so it follows
light and dark instead of pinning the old Catppuccin #1e1e2e/#cdd6f4 in
both modes. Override prose CSS variables so prose-invert can't revert to
defaults. */
.paperclip-markdown {
--tw-prose-pre-bg: #1e1e2e;
--tw-prose-pre-code: #cdd6f4;
--tw-prose-invert-pre-bg: #1e1e2e;
--tw-prose-invert-pre-code: #cdd6f4;
--tw-prose-pre-bg: var(--muted);
--tw-prose-pre-code: var(--foreground);
--tw-prose-invert-pre-bg: var(--muted);
--tw-prose-invert-pre-code: var(--foreground);
}
.paperclip-markdown pre {
border: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent) !important;
border-radius: calc(var(--radius) - 3px) !important;
background-color: #1e1e2e !important;
color: #cdd6f4 !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius-lg) !important;
background-color: var(--muted) !important;
color: var(--foreground) !important;
padding: 0.5rem 0.65rem !important;
margin: 0.4rem 0 !important;
font-size: 1em !important;