refactor(web): use Shiki defaultColor:false for CSS-only theming

Quentin Gliech and Claude Opus 4.6 (1M context) created 1 month ago

Shiki now outputs only CSS variables (--shiki-light, --shiki-dark)
on each span with no inline color/background. The CSS in index.css
maps the variables to the active theme — no !important needed.

Co-Authored-By: Claude Opus 4.6 (1M context) <[e-mail]>

Change summary

webui2/src/components/code/file-viewer.tsx |  1 +
webui2/src/index.css                       | 21 +++++++++++++++------
2 files changed, 16 insertions(+), 6 deletions(-)

Detailed changes

webui2/src/components/code/file-viewer.tsx

@@ -223,6 +223,7 @@ export function FileViewer({ blob }: FileViewerProps) {
       const hast = highlighter.codeToHast(blob.text!, {
         lang,
         themes: { light: "github-light", dark: "github-dark" },
+        defaultColor: false,
         transformers: [lineNumberTransformer()],
       });
 

webui2/src/index.css

@@ -111,13 +111,22 @@ body {
   color: var(--foreground);
 }
 
-/* ── Shiki dual-theme: swap to dark variables when .dark is active ───────── */
+/* ── Shiki dual-theme (defaultColor: false) ──────────────────────────────── */
+.shiki,
+.shiki span {
+  color: var(--shiki-light);
+  background-color: var(--shiki-light-bg);
+  font-style: var(--shiki-light-font-style);
+  font-weight: var(--shiki-light-font-weight);
+  text-decoration: var(--shiki-light-text-decoration);
+}
+
 .dark .shiki,
 .dark .shiki span {
-  color: var(--shiki-dark) !important;
-  background-color: var(--shiki-dark-bg) !important;
-  font-style: var(--shiki-dark-font-style) !important;
-  font-weight: var(--shiki-dark-font-weight) !important;
-  text-decoration: var(--shiki-dark-text-decoration) !important;
+  color: var(--shiki-dark);
+  background-color: var(--shiki-dark-bg);
+  font-style: var(--shiki-dark-font-style);
+  font-weight: var(--shiki-dark-font-weight);
+  text-decoration: var(--shiki-dark-text-decoration);
 }