Improve code block color theming (#16325)

* feat: Improve code block theming

* chore: update webui build output

* chore: Update webui static build

diff --git a/tools/server/public/index.html.gz b/tools/server/public/index.html.gz
index 3a62b93364d4c7f6658464d0b37bb56463373d25..cd3528d3b2e4974bf5f15d52cebcb38372c9cd56 100644 (file)
Binary files a/tools/server/public/index.html.gz and b/tools/server/public/index.html.gz differ

diff --git a/tools/server/webui/src/app.css b/tools/server/webui/src/app.css
index c74319936149d94cd5803a8de8fe5c65edbf91ee..2ca1536409bf2a64ee0bcaaec31e1c112f70fc7a 100644 (file)
--- a/tools/server/webui/src/app.css
+++ b/tools/server/webui/src/app.css
@@ -37,8 +37,8 @@
        --sidebar-accent-foreground: oklch(0.205 0 0);
        --sidebar-border: oklch(0.922 0 0);
        --sidebar-ring: oklch(0.708 0 0);
-       --code-background: oklch(0.225 0 0);
-       --code-foreground: oklch(0.875 0 0);
+       --code-background: oklch(0.975 0 0);
+       --code-foreground: oklch(0.145 0 0);
        --layer-popover: 1000000;
 }
 
@@ -74,6 +74,8 @@
        --sidebar-accent-foreground: oklch(0.985 0 0);
        --sidebar-border: oklch(1 0 0 / 10%);
        --sidebar-ring: oklch(0.556 0 0);
+       --code-background: oklch(0.225 0 0);
+       --code-foreground: oklch(0.875 0 0);
 }
 
 @theme inline {

diff --git a/tools/server/webui/src/lib/components/app/misc/MarkdownContent.svelte b/tools/server/webui/src/lib/components/app/misc/MarkdownContent.svelte
index 7d62eaadaa82b45b731a2880f9772deca809d79d..45b9c6debbbd5673396ed6fc3520cc6341be450f 100644 (file)
--- a/tools/server/webui/src/lib/components/app/misc/MarkdownContent.svelte
+++ b/tools/server/webui/src/lib/components/app/misc/MarkdownContent.svelte
@@ -8,9 +8,13 @@
        import rehypeKatex from 'rehype-katex';
        import rehypeStringify from 'rehype-stringify';
        import { copyCodeToClipboard } from '$lib/utils/copy';
-       import 'highlight.js/styles/github-dark.css';
+       import { browser } from '$app/environment';
        import 'katex/dist/katex.min.css';
 
+       import githubDarkCss from 'highlight.js/styles/github-dark.css?inline';
+       import githubLightCss from 'highlight.js/styles/github.css?inline';
+       import { mode } from 'mode-watcher';
+
        interface Props {
                content: string;
                class?: string;
@@ -21,6 +25,26 @@
        let containerRef = $state<HTMLDivElement>();
        let processedHtml = $state('');
 
+       function loadHighlightTheme(isDark: boolean) {
+               if (!browser) return;
+
+               const existingThemes = document.querySelectorAll('style[data-highlight-theme]');
+               existingThemes.forEach((style) => style.remove());
+
+               const style = document.createElement('style');
+               style.setAttribute('data-highlight-theme', 'true');
+               style.textContent = isDark ? githubDarkCss : githubLightCss;
+
+               document.head.appendChild(style);
+       }
+
+       $effect(() => {
+               const currentMode = mode.current;
+               const isDark = currentMode === 'dark';
+
+               loadHighlightTheme(isDark);
+       });
+
        let processor = $derived(() => {
                return remark()
                        .use(remarkGfm) // GitHub Flavored Markdown