{
+ const root = document.documentElement
+ const styleElement = getOrCreateThemeStyleElement()
+
+ const applyTheme = () => {
+ const nextThemeCss = root.classList.contains("dark")
+ ? githubDarkCss
+ : githubLightCss
+ styleElement.textContent = nextThemeCss
+ }
+
+ applyTheme()
+
+ const observer = new MutationObserver(() => {
+ applyTheme()
+ })
+
+ observer.observe(root, {
+ attributes: true,
+ attributeFilter: ["class"],
+ })
+
+ return () => {
+ observer.disconnect()
+ }
+ }, [])
+}
diff --git a/web/frontend/src/index.css b/web/frontend/src/index.css
index 7958233f3..fc55a3a32 100644
--- a/web/frontend/src/index.css
+++ b/web/frontend/src/index.css
@@ -157,69 +157,6 @@
height: calc(100svh - 3.5rem);
}
-/* Markdown code highlighting (rehype-highlight / highlight.js classes) */
-.prose pre code.hljs,
-.prose pre code[class*="language-"] {
- display: block;
- overflow-x: auto;
- background: transparent;
- padding: 0;
- color: #e4e4e7;
-}
-
-.prose pre code .hljs-comment,
-.prose pre code .hljs-quote {
- color: #71717a;
-}
-
-.prose pre code .hljs-keyword,
-.prose pre code .hljs-selector-tag,
-.prose pre code .hljs-subst {
- color: #f472b6;
-}
-
-.prose pre code .hljs-string,
-.prose pre code .hljs-doctag,
-.prose pre code .hljs-regexp,
-.prose pre code .hljs-addition,
-.prose pre code .hljs-attribute,
-.prose pre code .hljs-template-tag,
-.prose pre code .hljs-template-variable {
- color: #34d399;
-}
-
-.prose pre code .hljs-number,
-.prose pre code .hljs-literal,
-.prose pre code .hljs-bullet,
-.prose pre code .hljs-meta,
-.prose pre code .hljs-built_in,
-.prose pre code .hljs-builtin-name,
-.prose pre code .hljs-symbol,
-.prose pre code .hljs-variable,
-.prose pre code .hljs-link,
-.prose pre code .hljs-type,
-.prose pre code .hljs-selector-class,
-.prose pre code .hljs-selector-attr,
-.prose pre code .hljs-selector-pseudo {
- color: #22d3ee;
-}
-
-.prose pre code .hljs-title,
-.prose pre code .hljs-section,
-.prose pre code .hljs-name,
-.prose pre code .hljs-selector-id,
-.prose pre code .hljs-deletion {
- color: #60a5fa;
-}
-
-.prose pre code .hljs-emphasis {
- font-style: italic;
-}
-
-.prose pre code .hljs-strong {
- font-weight: 700;
-}
-
/* Typing indicator animations */
@keyframes shimmer {
0% {
diff --git a/web/frontend/src/main.tsx b/web/frontend/src/main.tsx
index 81e72c29f..17eb18291 100644
--- a/web/frontend/src/main.tsx
+++ b/web/frontend/src/main.tsx
@@ -3,6 +3,7 @@ import { RouterProvider, createRouter } from "@tanstack/react-router"
import { StrictMode } from "react"
import ReactDOM from "react-dom/client"
+import { useHighlightTheme } from "./hooks/use-highlight-theme"
import "./i18n"
import "./index.css"
import { routeTree } from "./routeTree.gen"
@@ -22,14 +23,22 @@ declare module "@tanstack/react-router" {
}
}
+function AppProviders() {
+ useHighlightTheme()
+
+ return (
+
+
+
+ )
+}
+
const rootElement = document.getElementById("root")!
if (!rootElement.innerHTML) {
const root = ReactDOM.createRoot(rootElement)
root.render(
-
-
-
+
,
)
}
From acbe65467483e5b40b8e16d25cdc24e03f3c6e31 Mon Sep 17 00:00:00 2001
From: lc6464 <64722907+lc6464@users.noreply.github.com>
Date: Wed, 15 Apr 2026 17:36:22 +0800
Subject: [PATCH 3/4] chore(web): move app providers out of main entry
---
web/frontend/src/app-providers.tsx | 13 +++++++++++++
web/frontend/src/main.tsx | 18 ++++++------------
2 files changed, 19 insertions(+), 12 deletions(-)
create mode 100644 web/frontend/src/app-providers.tsx
diff --git a/web/frontend/src/app-providers.tsx b/web/frontend/src/app-providers.tsx
new file mode 100644
index 000000000..bfb5dfb38
--- /dev/null
+++ b/web/frontend/src/app-providers.tsx
@@ -0,0 +1,13 @@
+import type { ReactNode } from "react"
+
+import { useHighlightTheme } from "./hooks/use-highlight-theme"
+
+interface AppProvidersProps {
+ children: ReactNode
+}
+
+export function AppProviders({ children }: AppProvidersProps) {
+ useHighlightTheme()
+
+ return <>{children}
+}
diff --git a/web/frontend/src/main.tsx b/web/frontend/src/main.tsx
index 17eb18291..313daf62d 100644
--- a/web/frontend/src/main.tsx
+++ b/web/frontend/src/main.tsx
@@ -3,7 +3,7 @@ import { RouterProvider, createRouter } from "@tanstack/react-router"
import { StrictMode } from "react"
import ReactDOM from "react-dom/client"
-import { useHighlightTheme } from "./hooks/use-highlight-theme"
+import { AppProviders } from "./app-providers"
import "./i18n"
import "./index.css"
import { routeTree } from "./routeTree.gen"
@@ -23,22 +23,16 @@ declare module "@tanstack/react-router" {
}
}
-function AppProviders() {
- useHighlightTheme()
-
- return (
-
-
-
- )
-}
-
const rootElement = document.getElementById("root")!
if (!rootElement.innerHTML) {
const root = ReactDOM.createRoot(rootElement)
root.render(
-
+
+
+
+
+
,
)
}
From 5a2e7795cd5d855c97b4f7ab913e5c45f6024bb2 Mon Sep 17 00:00:00 2001
From: lc6464 <64722907+lc6464@users.noreply.github.com>
Date: Wed, 15 Apr 2026 18:30:43 +0800
Subject: [PATCH 4/4] refactor(web): improve theme style element management in
useHighlightTheme hook
---
web/frontend/src/hooks/use-highlight-theme.ts | 37 ++++++++++++++++---
1 file changed, 31 insertions(+), 6 deletions(-)
diff --git a/web/frontend/src/hooks/use-highlight-theme.ts b/web/frontend/src/hooks/use-highlight-theme.ts
index 47b782679..1e4517c3f 100644
--- a/web/frontend/src/hooks/use-highlight-theme.ts
+++ b/web/frontend/src/hooks/use-highlight-theme.ts
@@ -4,14 +4,39 @@ import githubDarkCss from "highlight.js/styles/github-dark.css?inline"
import githubLightCss from "highlight.js/styles/github.css?inline"
const THEME_STYLE_ID = "hljs-theme-style"
+const THEME_STYLE_OWNER_ATTR = "data-picoclaw-highlight-theme"
+const THEME_STYLE_OWNER_VALUE = "true"
+const MANAGED_THEME_STYLE_SELECTOR = `style[${THEME_STYLE_OWNER_ATTR}="${THEME_STYLE_OWNER_VALUE}"]`
+const ID_THEME_STYLE_SELECTOR = `style#${THEME_STYLE_ID}`
-function getOrCreateThemeStyleElement() {
- let styleElement = document.getElementById(THEME_STYLE_ID)
- if (!styleElement) {
- styleElement = document.createElement("style")
- styleElement.id = THEME_STYLE_ID
- document.head.appendChild(styleElement)
+function getOrCreateThemeStyleElement(): HTMLStyleElement {
+ const managedStyleElement = document.head.querySelector
(
+ MANAGED_THEME_STYLE_SELECTOR,
+ )
+ if (managedStyleElement) {
+ return managedStyleElement
}
+
+ const existingStyleElement =
+ document.querySelector(ID_THEME_STYLE_SELECTOR)
+ if (existingStyleElement) {
+ existingStyleElement.setAttribute(
+ THEME_STYLE_OWNER_ATTR,
+ THEME_STYLE_OWNER_VALUE,
+ )
+ return existingStyleElement
+ }
+
+ const conflictingElement = document.getElementById(THEME_STYLE_ID)
+ const styleElement = document.createElement("style")
+ if (!conflictingElement) {
+ styleElement.id = THEME_STYLE_ID
+ }
+
+ // Leave conflicting non-style nodes untouched and track the injected style explicitly.
+ styleElement.setAttribute(THEME_STYLE_OWNER_ATTR, THEME_STYLE_OWNER_VALUE)
+ document.head.appendChild(styleElement)
+
return styleElement
}