mikkel/nexus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(21-02): install rehype-highlight and add theme-aware hljs CSS

Browse source 
- Add rehype-highlight ^7.0.2 to ui dependencies
- Add .dark, .theme-tokyo-night, :root:not(.dark) hljs token overrides to index.css
- Covers catppuccin-mocha (default dark), tokyo-night, catppuccin-latte themes
- Uses var(--card) for background consistency with theme system
This commit is contained in:
Mikkel Georgsen 2026-04-01 13:00:25 +02:00
parent d5934b743f
commit acab737dab
2 changed files with 78 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
ui/package.json
View file

@ -41,7 +41,6 @@
"@paperclipai/adapter-utils": "workspace:*",
"@paperclipai/branding": "workspace:*",
"@paperclipai/shared": "workspace:*",
"hermes-paperclip-adapter": "^0.2.0",
"@radix-ui/react-slot": "^1.2.4",
"@tailwindcss/typography": "^0.5.19",
"@tanstack/react-query": "^5.90.21",
@ -49,6 +48,7 @@
"clsx": "^2.1.1",
"cmdk": "^1.1.1",
"diff": "^8.0.4",
"hermes-paperclip-adapter": "^0.2.0",
"lexical": "0.35.0",
"lucide-react": "^0.574.0",
"mermaid": "^11.12.0",
@ -57,6 +57,7 @@
"react-dom": "^19.0.0",
"react-markdown": "^10.1.0",
"react-router-dom": "^7.1.5",
"rehype-highlight": "^7.0.2",
"remark-gfm": "^4.0.1",
"tailwind-merge": "^3.4.1"
},

76
ui/src/index.css
View file

@ -794,6 +794,82 @@ a.paperclip-project-mention-chip {
white-space: nowrap;
}
/* ── highlight.js theme-aware overrides ───────────────────────── */
/*
* Catppuccin Mocha (default dark) — base hljs styles.
* Applied when .dark class is present (catppuccin-mocha is the default dark theme).
*/
.dark .hljs {
background: var(--card);
color: #cdd6f4;
}
.dark .hljs-keyword { color: #cba6f7; }
.dark .hljs-string { color: #a6e3a1; }
.dark .hljs-number { color: #fab387; }
.dark .hljs-comment { color: #6c7086; font-style: italic; }
.dark .hljs-function,
.dark .hljs-title { color: #89b4fa; }
.dark .hljs-built_in { color: #f9e2af; }
.dark .hljs-type { color: #94e2d5; }
.dark .hljs-attr { color: #89dceb; }
.dark .hljs-literal { color: #fab387; }
.dark .hljs-selector-class { color: #89b4fa; }
.dark .hljs-tag { color: #f38ba8; }
.dark .hljs-name { color: #cba6f7; }
.dark .hljs-variable { color: #cdd6f4; }
.dark .hljs-params { color: #cdd6f4; }
.dark .hljs-operator { color: #89dceb; }
/*
* Tokyo Night — overrides for .theme-tokyo-night.dark class.
* ThemeContext sets both .dark and .theme-tokyo-night on <html>.
*/
.theme-tokyo-night .hljs {
background: var(--card);
color: #a9b1d6;
}
.theme-tokyo-night .hljs-keyword { color: #bb9af7; }
.theme-tokyo-night .hljs-string { color: #9ece6a; }
.theme-tokyo-night .hljs-number { color: #ff9e64; }
.theme-tokyo-night .hljs-comment { color: #565f89; font-style: italic; }
.theme-tokyo-night .hljs-function,
.theme-tokyo-night .hljs-title { color: #7aa2f7; }
.theme-tokyo-night .hljs-built_in { color: #e0af68; }
.theme-tokyo-night .hljs-type { color: #2ac3de; }
.theme-tokyo-night .hljs-attr { color: #73daca; }
.theme-tokyo-night .hljs-literal { color: #ff9e64; }
.theme-tokyo-night .hljs-selector-class { color: #7aa2f7; }
.theme-tokyo-night .hljs-tag { color: #f7768e; }
.theme-tokyo-night .hljs-name { color: #bb9af7; }
.theme-tokyo-night .hljs-variable { color: #c0caf5; }
.theme-tokyo-night .hljs-params { color: #c0caf5; }
.theme-tokyo-night .hljs-operator { color: #89ddff; }
/*
* Catppuccin Latte (light theme) — applied via :root:not(.dark).
* ThemeContext removes .dark class for catppuccin-latte.
*/
:root:not(.dark) .hljs {
background: var(--card);
color: #4c4f69;
}
:root:not(.dark) .hljs-keyword { color: #8839ef; }
:root:not(.dark) .hljs-string { color: #40a02b; }
:root:not(.dark) .hljs-number { color: #fe640b; }
:root:not(.dark) .hljs-comment { color: #9ca0b0; font-style: italic; }
:root:not(.dark) .hljs-function,
:root:not(.dark) .hljs-title { color: #1e66f5; }
:root:not(.dark) .hljs-built_in { color: #df8e1d; }
:root:not(.dark) .hljs-type { color: #179299; }
:root:not(.dark) .hljs-attr { color: #179299; }
:root:not(.dark) .hljs-literal { color: #fe640b; }
:root:not(.dark) .hljs-selector-class { color: #1e66f5; }
:root:not(.dark) .hljs-tag { color: #d20f39; }
:root:not(.dark) .hljs-name { color: #8839ef; }
:root:not(.dark) .hljs-variable { color: #4c4f69; }
:root:not(.dark) .hljs-params { color: #4c4f69; }
:root:not(.dark) .hljs-operator { color: #04a5e5; }
/* Keep MDXEditor popups above app dialogs, even when they portal to <body>. */
[class*="_popupContainer_"] {
z-index: 81 !important;