From f7675d96a4c5d4f7d79ff55b08ec1a0823925df4 Mon Sep 17 00:00:00 2001
From: Jerry_Wu <409187100@qq.com>
Date: Sat, 20 Sep 2025 17:11:41 +0800
Subject: [PATCH 01/11] feat(docs): add ThemeScript component to root

---
 .../components/theme-toggle/Brilliance.tsx    | 16 +++++++++++++++
 .../docs/src/components/theme-toggle/Moon.tsx | 20 +++++++++++++++++++
 .../docs/src/components/theme-toggle/Sun.tsx  | 20 +++++++++++++++++++
 .../components/theme-toggle/theme-script.tsx  | 12 +++++++++++
 packages/docs/src/root.tsx                    |  2 ++
 5 files changed, 70 insertions(+)
 create mode 100644 packages/docs/src/components/theme-toggle/Brilliance.tsx
 create mode 100644 packages/docs/src/components/theme-toggle/Moon.tsx
 create mode 100644 packages/docs/src/components/theme-toggle/Sun.tsx
 create mode 100644 packages/docs/src/components/theme-toggle/theme-script.tsx

diff --git a/packages/docs/src/components/theme-toggle/Brilliance.tsx b/packages/docs/src/components/theme-toggle/Brilliance.tsx
new file mode 100644
index 00000000000..c949c7c0567
--- /dev/null
+++ b/packages/docs/src/components/theme-toggle/Brilliance.tsx
@@ -0,0 +1,16 @@
+import { component$ } from '@builder.io/qwik';
+
+export const BrillianceIcon = component$(() => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      fill="currentColor"
+      class="bi bi-brilliance"
+      viewBox="0 0 16 16"
+    >
+      <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16M1 8a7 7 0 0 0 7 7 3.5 3.5 0 1 0 0-7 3.5 3.5 0 1 1 0-7 7 7 0 0 0-7 7" />
+    </svg>
+  );
+});
diff --git a/packages/docs/src/components/theme-toggle/Moon.tsx b/packages/docs/src/components/theme-toggle/Moon.tsx
new file mode 100644
index 00000000000..ade1105a532
--- /dev/null
+++ b/packages/docs/src/components/theme-toggle/Moon.tsx
@@ -0,0 +1,20 @@
+import { component$ } from '@builder.io/qwik';
+
+export const MoonIcon = component$(() => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="size-6"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
+      />
+    </svg>
+  );
+});
diff --git a/packages/docs/src/components/theme-toggle/Sun.tsx b/packages/docs/src/components/theme-toggle/Sun.tsx
new file mode 100644
index 00000000000..8edc007f38d
--- /dev/null
+++ b/packages/docs/src/components/theme-toggle/Sun.tsx
@@ -0,0 +1,20 @@
+import { component$ } from '@builder.io/qwik';
+
+export const SunIcon = component$(() => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="size-6"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
+      />
+    </svg>
+  );
+});
diff --git a/packages/docs/src/components/theme-toggle/theme-script.tsx b/packages/docs/src/components/theme-toggle/theme-script.tsx
new file mode 100644
index 00000000000..2da575d3a35
--- /dev/null
+++ b/packages/docs/src/components/theme-toggle/theme-script.tsx
@@ -0,0 +1,12 @@
+import { themeStorageKey } from '../router-head/theme-script';
+
+export const ThemeScript = () => {
+  const themeScript = `
+        try {
+          const getItem = localStorage.getItem('${themeStorageKey}')
+          if(getItem === 'light' || getItem === 'dark'){
+              document.firstElementChild.setAttribute('data-theme', getItem);
+          }
+        } catch (err) { }`;
+  return <script dangerouslySetInnerHTML={themeScript} />;
+};
diff --git a/packages/docs/src/root.tsx b/packages/docs/src/root.tsx
index 01b352597f0..024f0fb20da 100644
--- a/packages/docs/src/root.tsx
+++ b/packages/docs/src/root.tsx
@@ -6,6 +6,7 @@ import { RouterHead } from './components/router-head/router-head';
 import { BUILDER_PUBLIC_API_KEY } from './constants';
 import { GlobalStore, type SiteStore } from './context';
 import './global.css';
+import { ThemeScript } from './components/theme-toggle/theme-script';
 
 export const uwu = /*javascript*/ `
 ;(function () {
@@ -55,6 +56,7 @@ export default component$(() => {
       <head>
         <meta charset="utf-8" />
         <script dangerouslySetInnerHTML={uwu} />
+        <ThemeScript />
         <RouterHead />
 
         <ServiceWorkerRegister />

From ec44bf91dae6ca840cb0cf52af7d4c4dac81ce5d Mon Sep 17 00:00:00 2001
From: Jerry_Wu <409187100@qq.com>
Date: Sat, 20 Sep 2025 18:17:38 +0800
Subject: [PATCH 02/11] feat(docs): enhance theme toggle functionality and
 styles

- Added dark mode support in global CSS with new color variables.
- Refactored ThemeScript component to improve theme preference handling.
- Updated theme toggle components to accept class props for better styling.
- Simplified theme toggle logic in ThemeToggle component.
- Removed deprecated ThemeScript import from root component.
- Cleaned up unused CSS styles related to theme toggle.
---
 .../components/router-head/theme-script.tsx   |  9 +-
 .../components/theme-toggle/Brilliance.tsx    | 11 ++-
 .../docs/src/components/theme-toggle/Moon.tsx | 11 ++-
 .../docs/src/components/theme-toggle/Sun.tsx  | 11 ++-
 .../components/theme-toggle/theme-script.tsx  | 12 ---
 .../components/theme-toggle/theme-toggle.css  | 37 ++------
 .../components/theme-toggle/theme-toggle.tsx  | 90 +++++++++----------
 packages/docs/src/global.css                  | 41 +++++++++
 packages/docs/src/root.tsx                    |  2 -
 9 files changed, 121 insertions(+), 103 deletions(-)
 delete mode 100644 packages/docs/src/components/theme-toggle/theme-script.tsx

diff --git a/packages/docs/src/components/router-head/theme-script.tsx b/packages/docs/src/components/router-head/theme-script.tsx
index f9db735731e..7174e670f53 100644
--- a/packages/docs/src/components/router-head/theme-script.tsx
+++ b/packages/docs/src/components/router-head/theme-script.tsx
@@ -3,11 +3,10 @@ export const themeStorageKey = 'theme-preference';
 export const ThemeScript = () => {
   const themeScript = `
         try {
-          document.firstElementChild
-              .setAttribute('data-theme',
-                  localStorage.getItem('${themeStorageKey}') ??
-                  (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
-              );
+          const getItem = localStorage.getItem('${themeStorageKey}')
+          if(getItem === 'light' || getItem === 'dark'){
+              document.firstElementChild.setAttribute('data-theme', getItem);
+          }
         } catch (err) { }`;
   return <script dangerouslySetInnerHTML={themeScript} />;
 };
diff --git a/packages/docs/src/components/theme-toggle/Brilliance.tsx b/packages/docs/src/components/theme-toggle/Brilliance.tsx
index c949c7c0567..e7e0b86a826 100644
--- a/packages/docs/src/components/theme-toggle/Brilliance.tsx
+++ b/packages/docs/src/components/theme-toggle/Brilliance.tsx
@@ -1,14 +1,19 @@
-import { component$ } from '@builder.io/qwik';
+import { component$, type QwikIntrinsicElements } from '@builder.io/qwik';
 
-export const BrillianceIcon = component$(() => {
+interface BrillianceIconProps {
+  class?: string;
+}
+
+export const BrillianceIcon = component$<BrillianceIconProps>(({ class: className, ...props }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="16"
       height="16"
       fill="currentColor"
-      class="bi bi-brilliance"
+      class={className}
       viewBox="0 0 16 16"
+      {...props}
     >
       <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16M1 8a7 7 0 0 0 7 7 3.5 3.5 0 1 0 0-7 3.5 3.5 0 1 1 0-7 7 7 0 0 0-7 7" />
     </svg>
diff --git a/packages/docs/src/components/theme-toggle/Moon.tsx b/packages/docs/src/components/theme-toggle/Moon.tsx
index ade1105a532..7e3194cd1a9 100644
--- a/packages/docs/src/components/theme-toggle/Moon.tsx
+++ b/packages/docs/src/components/theme-toggle/Moon.tsx
@@ -1,6 +1,10 @@
-import { component$ } from '@builder.io/qwik';
+import { component$, type QwikIntrinsicElements } from '@builder.io/qwik';
 
-export const MoonIcon = component$(() => {
+interface MoonIconProps {
+  class?: string;
+}
+
+export const MoonIcon = component$<MoonIconProps>(({ class: className, ...props }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -8,7 +12,8 @@ export const MoonIcon = component$(() => {
       viewBox="0 0 24 24"
       stroke-width="1.5"
       stroke="currentColor"
-      class="size-6"
+      class={className}
+      {...props}
     >
       <path
         stroke-linecap="round"
diff --git a/packages/docs/src/components/theme-toggle/Sun.tsx b/packages/docs/src/components/theme-toggle/Sun.tsx
index 8edc007f38d..324a01f0432 100644
--- a/packages/docs/src/components/theme-toggle/Sun.tsx
+++ b/packages/docs/src/components/theme-toggle/Sun.tsx
@@ -1,6 +1,10 @@
-import { component$ } from '@builder.io/qwik';
+import { component$, type QwikIntrinsicElements } from '@builder.io/qwik';
 
-export const SunIcon = component$(() => {
+interface SunIconProps {
+  class?: string;
+}
+
+export const SunIcon = component$<SunIconProps>(({ class: className, ...props }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -8,7 +12,8 @@ export const SunIcon = component$(() => {
       viewBox="0 0 24 24"
       stroke-width="1.5"
       stroke="currentColor"
-      class="size-6"
+      class={className}
+      {...props}
     >
       <path
         stroke-linecap="round"
diff --git a/packages/docs/src/components/theme-toggle/theme-script.tsx b/packages/docs/src/components/theme-toggle/theme-script.tsx
deleted file mode 100644
index 2da575d3a35..00000000000
--- a/packages/docs/src/components/theme-toggle/theme-script.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { themeStorageKey } from '../router-head/theme-script';
-
-export const ThemeScript = () => {
-  const themeScript = `
-        try {
-          const getItem = localStorage.getItem('${themeStorageKey}')
-          if(getItem === 'light' || getItem === 'dark'){
-              document.firstElementChild.setAttribute('data-theme', getItem);
-          }
-        } catch (err) { }`;
-  return <script dangerouslySetInnerHTML={themeScript} />;
-};
diff --git a/packages/docs/src/components/theme-toggle/theme-toggle.css b/packages/docs/src/components/theme-toggle/theme-toggle.css
index a4cca757be5..78eb36ad244 100644
--- a/packages/docs/src/components/theme-toggle/theme-toggle.css
+++ b/packages/docs/src/components/theme-toggle/theme-toggle.css
@@ -1,33 +1,10 @@
-.theme-toggle {
-  --size: 22px;
-  --icon-fill: hsl(210 10% 15%);
-  --icon-fill-hover: hsl(210 10% 30%);
-
-  display: block;
-
-  background: none;
-  border: none;
-  padding: 0;
-
-  inline-size: var(--size);
-  block-size: var(--size);
-  aspect-ratio: 1;
-  border-radius: 50%;
-
-  cursor: pointer;
-  touch-action: manipulation;
-  -webkit-tap-highlight-color: transparent;
-
-  outline-offset: 5px;
-}
-
-[data-theme='dark'] .theme-toggle {
-  --icon-fill: hsl(210 10% 100%);
-  --icon-fill-hover: hsl(210 15% 70%);
+.themeIcon {
+  opacity: 0;
+  transition: opacity 400ms ease-in-out;
 }
 
-.theme-toggle > svg {
-  inline-size: 100%;
-  block-size: 100%;
-  stroke-linecap: round;
+html[data-theme='light'] .themeIcon.light,
+html[data-theme='dark'] .themeIcon.dark,
+html:not([data-theme]) .themeIcon.auto {
+  opacity: 1;
 }
diff --git a/packages/docs/src/components/theme-toggle/theme-toggle.tsx b/packages/docs/src/components/theme-toggle/theme-toggle.tsx
index 2b8433c5f75..5a5e73f9f9b 100644
--- a/packages/docs/src/components/theme-toggle/theme-toggle.tsx
+++ b/packages/docs/src/components/theme-toggle/theme-toggle.tsx
@@ -1,10 +1,34 @@
-import { component$, event$, useContext, useStyles$ } from '@builder.io/qwik';
+import { component$, event$, isServer, useContext, useStyles$ } from '@builder.io/qwik';
 import { SunAndMoon } from './sun-and-moon';
 import { themeStorageKey } from '../router-head/theme-script';
 import themeToggle from './theme-toggle.css?inline';
 import { GlobalStore } from '../../context';
+import { SunIcon } from './Sun';
+import { MoonIcon } from './Moon';
+import { BrillianceIcon } from './Brilliance';
+export type ThemePreference = 'dark' | 'light' | 'auto';
+export const setPreference = (theme: ThemePreference) => {
+  if (theme === 'auto') {
+    document.firstElementChild?.removeAttribute('data-theme');
+  } else {
+    document.firstElementChild?.setAttribute('data-theme', theme!);
+  }
+
+  localStorage.setItem(themeStorageKey, theme);
+};
 
-export type ThemePreference = 'dark' | 'light';
+export const getColorPreference = (): ThemePreference => {
+  if (isServer) {
+    return 'auto';
+  }
+  let theme;
+  try {
+    theme = localStorage.getItem(themeStorageKey);
+  } catch {
+    //
+  }
+  return (theme as ThemePreference) || 'auto';
+};
 
 export const colorSchemeChangeListener = (onColorSchemeChange: (isDark: boolean) => void) => {
   const listener = ({ matches: isDark }: MediaQueryListEvent) => {
@@ -18,56 +42,32 @@ export const colorSchemeChangeListener = (onColorSchemeChange: (isDark: boolean)
     window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', listener);
 };
 
-export const setPreference = (theme: ThemePreference) => {
-  localStorage.setItem(themeStorageKey, theme);
-  reflectPreference(theme);
-};
-
-export const reflectPreference = (theme: ThemePreference) => {
-  document.firstElementChild?.setAttribute('data-theme', theme);
-};
-
-export const getColorPreference = (): ThemePreference => {
-  let theme;
-  try {
-    theme = localStorage.getItem(themeStorageKey);
-  } catch (err) {
-    //
-  }
-  if (theme) {
-    return theme as ThemePreference;
-  } else {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-  }
-};
-
 export const ThemeToggle = component$(() => {
   useStyles$(themeToggle);
-  const state = useContext(GlobalStore);
-
   const onClick$ = event$(() => {
-    state.theme = state.theme === 'light' ? 'dark' : 'light';
-    setPreference(state.theme);
+    let currentTheme = getColorPreference();
+    if (currentTheme === 'dark') {
+      currentTheme = 'light';
+    } else if (currentTheme === 'light') {
+      currentTheme = 'auto';
+    } else {
+      currentTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'light' : 'dark';
+    }
+    setPreference(currentTheme);
   });
 
   return (
     <>
-      <span class="lg:hidden">
-        <button onClick$={onClick$}>{state.theme === 'light' ? 'Dark' : 'Light'} theme</button>
-      </span>
-      <span class="hidden lg:block">
-        <button
-          type="button"
-          class="theme-toggle"
-          id="theme-toggle"
-          title="Toggles light & dark"
-          aria-label={state.theme}
-          aria-live="polite"
-          onClick$={onClick$}
-        >
-          <SunAndMoon />
-        </button>
-      </span>
+      <button
+        onClick$={onClick$}
+        class="group relative flex h-8 w-8 items-center justify-center rounded-md bg-background text-foreground hover:opacity-60"
+      >
+        <div class="absolute inset-0 grid place-items-center transition-transform duration-200 ease-out group-hover:scale-110 group-active:scale-75">
+          <SunIcon class="themeIcon light col-start-1 row-start-1" />
+          <MoonIcon class="themeIcon dark col-start-1 row-start-1" />
+          <BrillianceIcon class="themeIcon auto col-start-1 row-start-1" />
+        </div>
+      </button>
     </>
   );
 });
diff --git a/packages/docs/src/global.css b/packages/docs/src/global.css
index 7d5a6917763..9e520fbf789 100644
--- a/packages/docs/src/global.css
+++ b/packages/docs/src/global.css
@@ -171,6 +171,47 @@
   --panel-toggle-background-color: var(--qwik-dark-blue);
 }
 
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    --qwik-blue: #009dfd;
+
+    --bg-color: #101010;
+    --bg-secondary-color: #232323;
+    --bg-header-color: #00000006;
+    --text-color: #e3e2e9;
+    --secondary-text-color: #ffffffc3;
+    --interactive-text-color: var(--qwik-blue);
+
+    --code-bg-color: #1d1d1d;
+    --code-border-color: #525252;
+    --blockquote-bg-color: #353639;
+
+    --repl-tab-button-hover-bg-color: #ffffff25;
+    --repl-tab-button-input-hover-border-color: #c3c1de75;
+    --repl-tab-button-input-active-border-color: #d8c2fa;
+    --repl-tab-button-active-border-color: var(--qwik-light-blue);
+    --repl-diagnostics-hover-border-color: rgba(255, 0, 144, 0.46);
+    --repl-diagnostics-active-border-color: rgb(255, 0, 144);
+    --repl-commands-color: var(--qwik-light-blue);
+    --repl-tab-bg-color: var(--bg-color);
+    --repl-border-color: rgba(255, 255, 255, 0.2);
+
+    --examples-header-text-color: var(--text-color);
+    --examples-active-bg-color: #1d1d1d;
+    --examples-hover-bg-color: #353639;
+    --examples-border-color: rgba(255, 255, 255, 0.2);
+    --examples-main-border-color: rgba(255, 255, 255, 0.1);
+
+    --made-with-love-text-color: #c6c5cb;
+
+    --media-separator-color: rgba(255, 255, 255, 0.1);
+    --media-video-shadow-color: var(--qwik-blue);
+
+    --panel-toggle-background-color: var(--qwik-dark-blue);
+  }
+}
+
 @media (max-width: 768px) {
   :root {
     --panel-toggle-height: 56px;
diff --git a/packages/docs/src/root.tsx b/packages/docs/src/root.tsx
index 024f0fb20da..01b352597f0 100644
--- a/packages/docs/src/root.tsx
+++ b/packages/docs/src/root.tsx
@@ -6,7 +6,6 @@ import { RouterHead } from './components/router-head/router-head';
 import { BUILDER_PUBLIC_API_KEY } from './constants';
 import { GlobalStore, type SiteStore } from './context';
 import './global.css';
-import { ThemeScript } from './components/theme-toggle/theme-script';
 
 export const uwu = /*javascript*/ `
 ;(function () {
@@ -56,7 +55,6 @@ export default component$(() => {
       <head>
         <meta charset="utf-8" />
         <script dangerouslySetInnerHTML={uwu} />
-        <ThemeScript />
         <RouterHead />
 
         <ServiceWorkerRegister />

From a871af81fac6ea8bd399bd1ffc165f2d65f21ee4 Mon Sep 17 00:00:00 2001
From: Jerry_Wu <409187100@qq.com>
Date: Sat, 11 Oct 2025 17:46:42 +0800
Subject: [PATCH 03/11] feat: enhance dark mode support and clean up theme
 toggle components

- Added CSS rules for dark mode image filtering and temporary workarounds.
- Updated theme toggle components to remove unused imports and streamline code.
- Introduced light mode styles for ecosystem elements based on user preferences.
---
 .../components/theme-toggle/Brilliance.tsx    |  2 +-
 .../docs/src/components/theme-toggle/Moon.tsx |  2 +-
 .../docs/src/components/theme-toggle/Sun.tsx  |  2 +-
 .../components/theme-toggle/theme-toggle.tsx  |  4 +---
 packages/docs/src/global.css                  | 21 +++++++++++++++++++
 .../docs/src/routes/(ecosystem)/ecosystem.css | 12 +++++++++++
 6 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/packages/docs/src/components/theme-toggle/Brilliance.tsx b/packages/docs/src/components/theme-toggle/Brilliance.tsx
index e7e0b86a826..365aa13becb 100644
--- a/packages/docs/src/components/theme-toggle/Brilliance.tsx
+++ b/packages/docs/src/components/theme-toggle/Brilliance.tsx
@@ -1,4 +1,4 @@
-import { component$, type QwikIntrinsicElements } from '@builder.io/qwik';
+import { component$ } from '@builder.io/qwik';
 
 interface BrillianceIconProps {
   class?: string;
diff --git a/packages/docs/src/components/theme-toggle/Moon.tsx b/packages/docs/src/components/theme-toggle/Moon.tsx
index 7e3194cd1a9..f76372b300a 100644
--- a/packages/docs/src/components/theme-toggle/Moon.tsx
+++ b/packages/docs/src/components/theme-toggle/Moon.tsx
@@ -1,4 +1,4 @@
-import { component$, type QwikIntrinsicElements } from '@builder.io/qwik';
+import { component$ } from '@builder.io/qwik';
 
 interface MoonIconProps {
   class?: string;
diff --git a/packages/docs/src/components/theme-toggle/Sun.tsx b/packages/docs/src/components/theme-toggle/Sun.tsx
index 324a01f0432..fe2ca0e22ed 100644
--- a/packages/docs/src/components/theme-toggle/Sun.tsx
+++ b/packages/docs/src/components/theme-toggle/Sun.tsx
@@ -1,4 +1,4 @@
-import { component$, type QwikIntrinsicElements } from '@builder.io/qwik';
+import { component$ } from '@builder.io/qwik';
 
 interface SunIconProps {
   class?: string;
diff --git a/packages/docs/src/components/theme-toggle/theme-toggle.tsx b/packages/docs/src/components/theme-toggle/theme-toggle.tsx
index 5a5e73f9f9b..130f2589593 100644
--- a/packages/docs/src/components/theme-toggle/theme-toggle.tsx
+++ b/packages/docs/src/components/theme-toggle/theme-toggle.tsx
@@ -1,8 +1,6 @@
-import { component$, event$, isServer, useContext, useStyles$ } from '@builder.io/qwik';
-import { SunAndMoon } from './sun-and-moon';
+import { component$, event$, isServer, useStyles$ } from '@builder.io/qwik';
 import { themeStorageKey } from '../router-head/theme-script';
 import themeToggle from './theme-toggle.css?inline';
-import { GlobalStore } from '../../context';
 import { SunIcon } from './Sun';
 import { MoonIcon } from './Moon';
 import { BrillianceIcon } from './Brilliance';
diff --git a/packages/docs/src/global.css b/packages/docs/src/global.css
index 51714951b96..0c6e75e0738 100644
--- a/packages/docs/src/global.css
+++ b/packages/docs/src/global.css
@@ -209,6 +209,27 @@
     --media-video-shadow-color: var(--qwik-blue);
 
     --panel-toggle-background-color: var(--qwik-dark-blue);
+    .builder .dark-mode :is(img, iframe, video) {
+      filter: invert(100%) hue-rotate(180deg);
+    }
+
+    /* Temporary workaround */
+    .builder .csoetdv,
+    .builder .cvha93q {
+      filter: invert(90%) hue-rotate(180deg);
+    }
+
+    .builder .dark-mode {
+      filter: invert(90%) hue-rotate(180deg);
+    }
+
+    .dark-mode-invert {
+      filter: invert(100%) hue-rotate(180deg);
+    }
+
+    .dark-mode-hide {
+      display: none !important;
+    }
   }
 }
 
diff --git a/packages/docs/src/routes/(ecosystem)/ecosystem.css b/packages/docs/src/routes/(ecosystem)/ecosystem.css
index 0a8307f26ea..5e99fe7740f 100644
--- a/packages/docs/src/routes/(ecosystem)/ecosystem.css
+++ b/packages/docs/src/routes/(ecosystem)/ecosystem.css
@@ -18,6 +18,18 @@
   filter: invert(1);
 }
 
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme]) {
+    .qwik-plus-logo-text {
+      filter: invert(1);
+    }
+    .ecosystem h2,
+    .ecosystem-menu h3 {
+      border-color: rgba(0, 0, 0, 0.3);
+    }
+  }
+}
+
 .ecosystem .purple-gradient {
   position: fixed;
   width: 1400px;

From 94d105b480dd7b0ded11641ab843f22f557e9878 Mon Sep 17 00:00:00 2001
From: Jerry_Wu <409187100@qq.com>
Date: Mon, 13 Oct 2025 10:19:00 +0800
Subject: [PATCH 04/11] feat: improve dark mode styles and remove unused theme
 toggle components

- Added dark mode styles for various components including code sandbox and API documentation.
- Removed sun-and-moon theme toggle components and associated CSS to streamline the codebase.
- Updated theme icon styles for better responsiveness and consistency.
---
 .../src/components/code-sandbox/index.css     | 20 +++++
 .../components/theme-toggle/Brilliance.tsx    |  2 -
 .../components/theme-toggle/sun-and-moon.css  | 84 -------------------
 .../components/theme-toggle/sun-and-moon.tsx  | 25 ------
 .../components/theme-toggle/theme-toggle.css  |  7 ++
 packages/docs/src/routes/api/api.css          | 53 ++++++++++++
 .../docs/(qwik)/advanced/eslint/styles.css    | 27 ++++++
 7 files changed, 107 insertions(+), 111 deletions(-)
 delete mode 100644 packages/docs/src/components/theme-toggle/sun-and-moon.css
 delete mode 100644 packages/docs/src/components/theme-toggle/sun-and-moon.tsx

diff --git a/packages/docs/src/components/code-sandbox/index.css b/packages/docs/src/components/code-sandbox/index.css
index 03dd3b5b0fb..1ff33cc767b 100644
--- a/packages/docs/src/components/code-sandbox/index.css
+++ b/packages/docs/src/components/code-sandbox/index.css
@@ -17,6 +17,26 @@
   background-color: #161616;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    .browser iframe {
+      border: 1px solid #333;
+      border-top: none;
+    }
+
+    .browser .bar {
+      background-color: #1f1f1f;
+    }
+
+    .browser .url {
+      background-color: #161616;
+    }
+    .browser .bar > ul > li.edit > a:hover {
+      color: #aaa;
+    }
+  }
+}
+
 .browser .bar > ul {
   display: flex;
   flex-direction: row;
diff --git a/packages/docs/src/components/theme-toggle/Brilliance.tsx b/packages/docs/src/components/theme-toggle/Brilliance.tsx
index 365aa13becb..aa4f5cf37e7 100644
--- a/packages/docs/src/components/theme-toggle/Brilliance.tsx
+++ b/packages/docs/src/components/theme-toggle/Brilliance.tsx
@@ -8,8 +8,6 @@ export const BrillianceIcon = component$<BrillianceIconProps>(({ class: classNam
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
       fill="currentColor"
       class={className}
       viewBox="0 0 16 16"
diff --git a/packages/docs/src/components/theme-toggle/sun-and-moon.css b/packages/docs/src/components/theme-toggle/sun-and-moon.css
deleted file mode 100644
index 0902c9fad1e..00000000000
--- a/packages/docs/src/components/theme-toggle/sun-and-moon.css
+++ /dev/null
@@ -1,84 +0,0 @@
-.sun-and-moon {
-  --ease-elastic-3: cubic-bezier(0.5, 1.25, 0.75, 1.25);
-  --ease-elastic-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);
-  --ease-out-5: cubic-bezier(0, 0, 0, 1);
-  --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
-}
-
-.sun-and-moon > :is(.moon, .sun, .sun-beams) {
-  transform-origin: center center;
-}
-
-.sun-and-moon > :is(.moon, .sun) {
-  fill: var(--icon-fill);
-}
-
-.theme-toggle:is(:hover, :focus-visible) > .sun-and-moon > :is(.moon, .sun) {
-  fill: var(--icon-fill-hover);
-}
-
-.sun-and-moon > .sun-beams {
-  stroke: var(--icon-fill);
-  stroke-width: 2px;
-}
-
-.theme-toggle:is(:hover, :focus-visible) .sun-and-moon > .sun-beams {
-  stroke: var(--icon-fill-hover);
-}
-
-[data-theme='dark'] .sun-and-moon > .sun {
-  transform: scale(1.75);
-}
-
-[data-theme='dark'] .sun-and-moon > .sun-beams {
-  opacity: 0;
-}
-
-[data-theme='dark'] .sun-and-moon > .moon > circle {
-  transform: translateX(-7px);
-}
-
-@supports (cx: 1) {
-  [data-theme='dark'] .sun-and-moon > .moon > circle {
-    transform: translateX(0);
-    cx: 17;
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .sun-and-moon > .sun {
-    transition: transform 0.5s var(--ease-elastic-3);
-  }
-
-  .sun-and-moon > .sun-beams {
-    transition:
-      transform 0.5s var(--ease-elastic-4),
-      opacity 0.5s var(--ease-3);
-  }
-
-  .sun-and-moon .moon > circle {
-    transition: transform 0.25s var(--ease-out-5);
-  }
-
-  @supports (cx: 1) {
-    .sun-and-moon .moon > circle {
-      transition: cx 0.25s var(--ease-out-5);
-    }
-  }
-}
-
-[data-theme='dark'] .sun-and-moon > .sun {
-  transform: scale(1.75);
-  transition-timing-function: var(--ease-3);
-  transition-duration: 0.25s;
-}
-
-[data-theme='dark'] .sun-and-moon > .sun-beams {
-  transform: rotateZ(-25deg);
-  transition-duration: 0.15s;
-}
-
-[data-theme='dark'] .sun-and-moon > .moon > circle {
-  transition-delay: 0.25s;
-  transition-duration: 0.5s;
-}
diff --git a/packages/docs/src/components/theme-toggle/sun-and-moon.tsx b/packages/docs/src/components/theme-toggle/sun-and-moon.tsx
deleted file mode 100644
index 6aeb969543e..00000000000
--- a/packages/docs/src/components/theme-toggle/sun-and-moon.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
-import sunAndMoonStyles from './sun-and-moon.css?inline';
-
-export const SunAndMoon = component$(() => {
-  useStyles$(sunAndMoonStyles);
-  return (
-    <svg class="sun-and-moon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
-      <mask class="moon" id="moon-mask">
-        <rect x="0" y="0" width="100%" height="100%" fill="white" />
-        <circle cx="24" cy="10" r="6" fill="black" />
-      </mask>
-      <circle class="sun" cx="12" cy="12" r="6" mask="url(#moon-mask)" fill="currentColor" />
-      <g class="sun-beams" stroke="currentColor">
-        <line x1="12" y1="1" x2="12" y2="3" />
-        <line x1="12" y1="21" x2="12" y2="23" />
-        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
-        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
-        <line x1="1" y1="12" x2="3" y2="12" />
-        <line x1="21" y1="12" x2="23" y2="12" />
-        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
-        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
-      </g>
-    </svg>
-  );
-});
diff --git a/packages/docs/src/components/theme-toggle/theme-toggle.css b/packages/docs/src/components/theme-toggle/theme-toggle.css
index 78eb36ad244..47bc8becdd5 100644
--- a/packages/docs/src/components/theme-toggle/theme-toggle.css
+++ b/packages/docs/src/components/theme-toggle/theme-toggle.css
@@ -1,6 +1,13 @@
 .themeIcon {
   opacity: 0;
   transition: opacity 400ms ease-in-out;
+  width: 25px;
+  height: 25px;
+}
+
+.themeIcon.auto {
+  width: 21px;
+  height: 21px;
 }
 
 html[data-theme='light'] .themeIcon.light,
diff --git a/packages/docs/src/routes/api/api.css b/packages/docs/src/routes/api/api.css
index 94b229ab68c..e710b2355d2 100644
--- a/packages/docs/src/routes/api/api.css
+++ b/packages/docs/src/routes/api/api.css
@@ -60,6 +60,8 @@
 [data-theme="dark"] .docs.api table {
   box-shadow: 0 0 30px 0 rgba(80,80,80,0.1);
 }
+
+
 .docs.api article thead tr {
   background: #f6f6f6;
   text-align: left;
@@ -70,6 +72,8 @@
 [data-theme="dark"] .docs.api thead tr {
   background: #373737;
 }
+
+
 .docs.api thead th,
 .docs.api tbody tr td {
   padding: 12px 24px;
@@ -83,6 +87,7 @@
   background: black;
 }
 
+
 .docs.api .docs-container {
   margin: 10px auto;
   padding: 80px 30px 0;
@@ -103,6 +108,10 @@
 [data-theme="dark"] .docs.api .section-title {
   background: #373737;
 }
+
+
+
+
 @media screen and (min-width: 768px) {
   .docs.api .section-title {
     font-size: 1rem;
@@ -144,6 +153,8 @@
     color: inherit;
 }
 
+
+
 .docs.api a {
   display: inline-block;
   color: black;
@@ -153,6 +164,8 @@
   color: inherit;
 }
 
+
+
 .docs.api ul {
   margin: 0;
 }
@@ -170,6 +183,8 @@
   border-bottom: 1px solid #373737;
 }
 
+
+
 .docs.api .api-edit {
   position: absolute;
   top: 50px;
@@ -186,6 +201,8 @@
   background: #373737;
 }
 
+
+
 .docs.api .filter-item {
   @apply bg-slate-100;
   line-height: 2;
@@ -193,6 +210,9 @@
 [data-theme="dark"] .docs.api .filter-item {
   background: #373737;
 }
+
+
+
 @media screen and (min-width: 768px) {
   .docs.api .filter-item {
     line-height: 1.5;
@@ -247,3 +267,36 @@
 .docs.api .table-wrapper {
   overflow-x: auto;
 }
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    .docs.api article a[href*="github.com"] {
+      background: #373737;
+    }
+    .docs.api table {
+      box-shadow: 0 0 30px 0 rgba(80,80,80,0.1);
+    }
+    .docs.api thead tr {
+      background: #373737;
+    }
+    .docs.api tbody tr:hover,
+    .docs.api tbody tr:nth-child(even) {
+      background: black;
+    }
+    .docs.api .section-title {
+      background: #373737;
+    }
+    .docs.api a {
+      color: inherit;
+    }
+    .docs.api a {
+      color: inherit;
+    }
+    .api-detail-section {
+      border-bottom: 1px solid #373737;
+    }
+    .docs.api .filter-item {
+      background: #373737;
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/docs/src/routes/docs/(qwik)/advanced/eslint/styles.css b/packages/docs/src/routes/docs/(qwik)/advanced/eslint/styles.css
index 6b7a4a21c7d..9cba0b9c82a 100644
--- a/packages/docs/src/routes/docs/(qwik)/advanced/eslint/styles.css
+++ b/packages/docs/src/routes/docs/(qwik)/advanced/eslint/styles.css
@@ -140,3 +140,30 @@
   border-color: #575757;
   color: var(--color-text);
 }
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    .docs .edit-examples-wrapper .edit-btn {
+      background: #373737;
+      border-color: #575757;
+      color: var(--color-text);
+    }
+    .docs .badge.bad {
+      @apply bg-red-900;
+    }
+    .docs .badge.good {
+      @apply bg-green-900;
+    }
+    .docs .rule-wrapper {
+      border-color: #575757;
+    }
+    .docs .panel .panel-border {
+      border-color: #575757;
+    }
+    .docs .panel {
+      background: #373737;
+      border-color: #575757;
+      color: var(--color-text);
+    }
+  }
+}

From 5088ec892ddb6a7c9fbbdc4ae7ad434fe4737856 Mon Sep 17 00:00:00 2001
From: Jerry_Wu <409187100@qq.com>
Date: Tue, 14 Oct 2025 09:34:33 +0800
Subject: [PATCH 05/11] fix: update SVG logos to use consistent fill color for
 dark mode

---
 packages/docs/src/components/svgs/discord-logo.tsx | 2 +-
 packages/docs/src/components/svgs/github-logo.tsx  | 2 +-
 packages/docs/src/components/svgs/twitter-logo.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/docs/src/components/svgs/discord-logo.tsx b/packages/docs/src/components/svgs/discord-logo.tsx
index c038b6dc69a..bdcd10665be 100644
--- a/packages/docs/src/components/svgs/discord-logo.tsx
+++ b/packages/docs/src/components/svgs/discord-logo.tsx
@@ -13,7 +13,7 @@ export const DiscordLogo = ({ width, height }: DiscordLogoProps) => (
     viewBox="0 0 512 512"
     role="img"
     aria-label="Discord Logo"
-    class="fill-[var(--text-color)]"
+    class="fill-[#e3e2e9]"
   >
     <path d="M464 66.52A50 50 0 00414.12 17L97.64 16A49.65 49.65 0 0048 65.52V392c0 27.3 22.28 48 49.64 48H368l-13-44 109 100zM324.65 329.81s-8.72-10.39-16-19.32C340.39 301.55 352.5 282 352.5 282a139 139 0 01-27.85 14.25 173.31 173.31 0 01-35.11 10.39 170.05 170.05 0 01-62.72-.24 184.45 184.45 0 01-35.59-10.4 141.46 141.46 0 01-17.68-8.21c-.73-.48-1.45-.72-2.18-1.21-.49-.24-.73-.48-1-.48-4.36-2.42-6.78-4.11-6.78-4.11s11.62 19.09 42.38 28.26c-7.27 9.18-16.23 19.81-16.23 19.81-53.51-1.69-73.85-36.47-73.85-36.47 0-77.06 34.87-139.62 34.87-139.62 34.87-25.85 67.8-25.12 67.8-25.12l2.42 2.9c-43.59 12.32-63.44 31.4-63.44 31.4s5.32-2.9 14.28-6.77c25.91-11.35 46.5-14.25 55-15.21a24 24 0 014.12-.49 205.62 205.62 0 0148.91-.48 201.62 201.62 0 0172.89 22.95s-19.13-18.15-60.3-30.45l3.39-3.86s33.17-.73 67.81 25.16c0 0 34.87 62.56 34.87 139.62 0-.28-20.35 34.5-73.86 36.19z" />
     <path d="M212.05 218c-13.8 0-24.7 11.84-24.7 26.57s11.14 26.57 24.7 26.57c13.8 0 24.7-11.83 24.7-26.57.25-14.76-10.9-26.57-24.7-26.57zM300.43 218c-13.8 0-24.7 11.84-24.7 26.57s11.14 26.57 24.7 26.57c13.81 0 24.7-11.83 24.7-26.57S314 218 300.43 218z" />
diff --git a/packages/docs/src/components/svgs/github-logo.tsx b/packages/docs/src/components/svgs/github-logo.tsx
index b1b22df0519..9bcdbbd1d82 100644
--- a/packages/docs/src/components/svgs/github-logo.tsx
+++ b/packages/docs/src/components/svgs/github-logo.tsx
@@ -10,7 +10,7 @@ export const GithubLogo = ({ width, height }: GithubLogoProps) => (
     height={height}
     role="img"
     aria-label="GitHub Logo"
-    class="fill-[var(--text-color)]"
+    class="fill-[#e3e2e9]"
   >
     <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
   </svg>
diff --git a/packages/docs/src/components/svgs/twitter-logo.tsx b/packages/docs/src/components/svgs/twitter-logo.tsx
index 3cfd2ef1635..70cf58a88fc 100644
--- a/packages/docs/src/components/svgs/twitter-logo.tsx
+++ b/packages/docs/src/components/svgs/twitter-logo.tsx
@@ -11,7 +11,7 @@ export const TwitterLogo = ({ width, height }: TwitterLogoProps) => (
     viewBox="0 0 512 512"
     role="img"
     aria-label="Twitter Logo"
-    class="fill-[var(--text-color)]"
+    class="fill-[#e3e2e9]"
   >
     <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
   </svg>

From 68c7d21dd19172195f9fa3f7b17697e07c46db9c Mon Sep 17 00:00:00 2001
From: Jerry_Wu <409187100@qq.com>
Date: Wed, 15 Oct 2025 11:18:41 +0800
Subject: [PATCH 06/11] refactor: streamline theme handling and remove unused
 dark mode styles

- Removed dark mode CSS rules from global styles and various components to simplify the codebase.
- Updated theme toggle logic to improve responsiveness and ensure consistent theme application based on user preferences.
- Enhanced theme script to handle theme attributes more robustly.
---
 .../src/components/code-sandbox/index.css     | 20 ------
 .../docs/src/components/header/header.tsx     | 11 +++-
 .../components/router-head/theme-script.tsx   |  8 ++-
 .../components/theme-toggle/theme-toggle.css  |  6 +-
 .../components/theme-toggle/theme-toggle.tsx  | 41 +++++++++---
 packages/docs/src/global.css                  | 62 -------------------
 .../docs/src/routes/(ecosystem)/ecosystem.css | 12 ----
 packages/docs/src/routes/api/api.css          | 33 ----------
 .../docs/(qwik)/advanced/eslint/styles.css    | 27 --------
 9 files changed, 52 insertions(+), 168 deletions(-)

diff --git a/packages/docs/src/components/code-sandbox/index.css b/packages/docs/src/components/code-sandbox/index.css
index 1ff33cc767b..03dd3b5b0fb 100644
--- a/packages/docs/src/components/code-sandbox/index.css
+++ b/packages/docs/src/components/code-sandbox/index.css
@@ -17,26 +17,6 @@
   background-color: #161616;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme]) {
-    .browser iframe {
-      border: 1px solid #333;
-      border-top: none;
-    }
-
-    .browser .bar {
-      background-color: #1f1f1f;
-    }
-
-    .browser .url {
-      background-color: #161616;
-    }
-    .browser .bar > ul > li.edit > a:hover {
-      color: #aaa;
-    }
-  }
-}
-
 .browser .bar > ul {
   display: flex;
   flex-direction: row;
diff --git a/packages/docs/src/components/header/header.tsx b/packages/docs/src/components/header/header.tsx
index 73019c7179f..2435f6e48ab 100644
--- a/packages/docs/src/components/header/header.tsx
+++ b/packages/docs/src/components/header/header.tsx
@@ -22,6 +22,7 @@ import {
   getColorPreference,
   setPreference,
   ThemeToggle,
+  getEffectiveTheme,
 } from '../theme-toggle/theme-toggle';
 import { SearchIcon } from '../docsearch/icons/SearchIcon';
 import { getPkgManagerPreference } from '../package-manager-tabs';
@@ -49,10 +50,14 @@ export const Header = component$(() => {
 
   useVisibleTask$(() => {
     globalStore.pkgManager = getPkgManagerPreference();
-    globalStore.theme = getColorPreference();
+    const pref = getColorPreference();
+    globalStore.theme = getEffectiveTheme(pref);
     return colorSchemeChangeListener((isDark) => {
-      globalStore.theme = isDark ? 'dark' : 'light';
-      setPreference(globalStore.theme);
+      const currentPref = getColorPreference();
+      if (currentPref === 'auto') {
+        globalStore.theme = isDark ? 'dark' : 'light';
+        setPreference('auto');
+      }
     });
   });
 
diff --git a/packages/docs/src/components/router-head/theme-script.tsx b/packages/docs/src/components/router-head/theme-script.tsx
index 7174e670f53..10d825052f0 100644
--- a/packages/docs/src/components/router-head/theme-script.tsx
+++ b/packages/docs/src/components/router-head/theme-script.tsx
@@ -4,8 +4,14 @@ export const ThemeScript = () => {
   const themeScript = `
         try {
           const getItem = localStorage.getItem('${themeStorageKey}')
+          const el = document.firstElementChild;
+          if(!el) { throw new Error('documentElement not found'); }
+
           if(getItem === 'light' || getItem === 'dark'){
-              document.firstElementChild.setAttribute('data-theme', getItem);
+              el.setAttribute('data-theme', getItem);
+          } else {
+              const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+              el.setAttribute('data-theme', isDark ? 'dark' : 'light');
           }
         } catch (err) { }`;
   return <script dangerouslySetInnerHTML={themeScript} />;
diff --git a/packages/docs/src/components/theme-toggle/theme-toggle.css b/packages/docs/src/components/theme-toggle/theme-toggle.css
index 47bc8becdd5..e3abe3a8b7f 100644
--- a/packages/docs/src/components/theme-toggle/theme-toggle.css
+++ b/packages/docs/src/components/theme-toggle/theme-toggle.css
@@ -10,8 +10,8 @@
   height: 21px;
 }
 
-html[data-theme='light'] .themeIcon.light,
-html[data-theme='dark'] .themeIcon.dark,
-html:not([data-theme]) .themeIcon.auto {
+button.pref-light .themeIcon.light,
+button.pref-dark .themeIcon.dark,
+button.pref-auto .themeIcon.auto {
   opacity: 1;
 }
diff --git a/packages/docs/src/components/theme-toggle/theme-toggle.tsx b/packages/docs/src/components/theme-toggle/theme-toggle.tsx
index 130f2589593..2dc159794d1 100644
--- a/packages/docs/src/components/theme-toggle/theme-toggle.tsx
+++ b/packages/docs/src/components/theme-toggle/theme-toggle.tsx
@@ -1,15 +1,33 @@
-import { component$, event$, isServer, useStyles$ } from '@builder.io/qwik';
+import { component$, event$, isServer, useSignal, useStyles$ } from '@builder.io/qwik';
 import { themeStorageKey } from '../router-head/theme-script';
 import themeToggle from './theme-toggle.css?inline';
 import { SunIcon } from './Sun';
 import { MoonIcon } from './Moon';
 import { BrillianceIcon } from './Brilliance';
 export type ThemePreference = 'dark' | 'light' | 'auto';
+
+export const getSystemIsDark = (): boolean =>
+  window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+export const getEffectiveTheme = (preference: ThemePreference): 'light' | 'dark' => {
+  if (preference === 'auto') {
+    return getSystemIsDark() ? 'dark' : 'light';
+  }
+  return preference;
+};
 export const setPreference = (theme: ThemePreference) => {
   if (theme === 'auto') {
-    document.firstElementChild?.removeAttribute('data-theme');
+    const el = document.firstElementChild;
+    if (!el) {
+      return;
+    }
+    el.setAttribute('data-theme', getEffectiveTheme('auto'));
   } else {
-    document.firstElementChild?.setAttribute('data-theme', theme!);
+    const el = document.firstElementChild;
+    if (!el) {
+      return;
+    }
+    el.setAttribute('data-theme', theme!);
   }
 
   localStorage.setItem(themeStorageKey, theme);
@@ -42,23 +60,32 @@ export const colorSchemeChangeListener = (onColorSchemeChange: (isDark: boolean)
 
 export const ThemeToggle = component$(() => {
   useStyles$(themeToggle);
+  const preference = useSignal<ThemePreference>(getColorPreference());
   const onClick$ = event$(() => {
-    let currentTheme = getColorPreference();
+    let currentTheme = preference.value;
     if (currentTheme === 'dark') {
       currentTheme = 'light';
     } else if (currentTheme === 'light') {
       currentTheme = 'auto';
-    } else {
-      currentTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'light' : 'dark';
+    } else if (currentTheme === 'auto') {
+      currentTheme = 'dark';
     }
     setPreference(currentTheme);
+    preference.value = currentTheme;
   });
 
   return (
     <>
       <button
         onClick$={onClick$}
-        class="group relative flex h-8 w-8 items-center justify-center rounded-md bg-background text-foreground hover:opacity-60"
+        class={[
+          'group relative flex h-8 w-8 items-center justify-center rounded-md bg-background text-foreground hover:opacity-60',
+          {
+            'pref-light': preference.value === 'light',
+            'pref-dark': preference.value === 'dark',
+            'pref-auto': preference.value === 'auto',
+          },
+        ]}
       >
         <div class="absolute inset-0 grid place-items-center transition-transform duration-200 ease-out group-hover:scale-110 group-active:scale-75">
           <SunIcon class="themeIcon light col-start-1 row-start-1" />
diff --git a/packages/docs/src/global.css b/packages/docs/src/global.css
index 0c6e75e0738..95d2d77c03f 100644
--- a/packages/docs/src/global.css
+++ b/packages/docs/src/global.css
@@ -171,68 +171,6 @@
   --panel-toggle-background-color: var(--qwik-dark-blue);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme]) {
-    color-scheme: dark;
-    --qwik-blue: #009dfd;
-
-    --bg-color: #101010;
-    --bg-secondary-color: #232323;
-    --bg-header-color: #00000006;
-    --text-color: #e3e2e9;
-    --secondary-text-color: #ffffffc3;
-    --interactive-text-color: var(--qwik-blue);
-
-    --code-bg-color: #1d1d1d;
-    --code-border-color: #525252;
-    --blockquote-bg-color: #353639;
-
-    --repl-tab-button-hover-bg-color: #ffffff25;
-    --repl-tab-button-input-hover-border-color: #c3c1de75;
-    --repl-tab-button-input-active-border-color: #d8c2fa;
-    --repl-tab-button-active-border-color: var(--qwik-light-blue);
-    --repl-diagnostics-hover-border-color: rgba(255, 0, 144, 0.46);
-    --repl-diagnostics-active-border-color: rgb(255, 0, 144);
-    --repl-commands-color: var(--qwik-light-blue);
-    --repl-tab-bg-color: var(--bg-color);
-    --repl-border-color: rgba(255, 255, 255, 0.2);
-
-    --examples-header-text-color: var(--text-color);
-    --examples-active-bg-color: #1d1d1d;
-    --examples-hover-bg-color: #353639;
-    --examples-border-color: rgba(255, 255, 255, 0.2);
-    --examples-main-border-color: rgba(255, 255, 255, 0.1);
-
-    --made-with-love-text-color: #c6c5cb;
-
-    --media-separator-color: rgba(255, 255, 255, 0.1);
-    --media-video-shadow-color: var(--qwik-blue);
-
-    --panel-toggle-background-color: var(--qwik-dark-blue);
-    .builder .dark-mode :is(img, iframe, video) {
-      filter: invert(100%) hue-rotate(180deg);
-    }
-
-    /* Temporary workaround */
-    .builder .csoetdv,
-    .builder .cvha93q {
-      filter: invert(90%) hue-rotate(180deg);
-    }
-
-    .builder .dark-mode {
-      filter: invert(90%) hue-rotate(180deg);
-    }
-
-    .dark-mode-invert {
-      filter: invert(100%) hue-rotate(180deg);
-    }
-
-    .dark-mode-hide {
-      display: none !important;
-    }
-  }
-}
-
 @media (max-width: 768px) {
   :root {
     --panel-toggle-height: 56px;
diff --git a/packages/docs/src/routes/(ecosystem)/ecosystem.css b/packages/docs/src/routes/(ecosystem)/ecosystem.css
index 5e99fe7740f..0a8307f26ea 100644
--- a/packages/docs/src/routes/(ecosystem)/ecosystem.css
+++ b/packages/docs/src/routes/(ecosystem)/ecosystem.css
@@ -18,18 +18,6 @@
   filter: invert(1);
 }
 
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme]) {
-    .qwik-plus-logo-text {
-      filter: invert(1);
-    }
-    .ecosystem h2,
-    .ecosystem-menu h3 {
-      border-color: rgba(0, 0, 0, 0.3);
-    }
-  }
-}
-
 .ecosystem .purple-gradient {
   position: fixed;
   width: 1400px;
diff --git a/packages/docs/src/routes/api/api.css b/packages/docs/src/routes/api/api.css
index e710b2355d2..0586a5022aa 100644
--- a/packages/docs/src/routes/api/api.css
+++ b/packages/docs/src/routes/api/api.css
@@ -266,37 +266,4 @@
 }
 .docs.api .table-wrapper {
   overflow-x: auto;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme]) {
-    .docs.api article a[href*="github.com"] {
-      background: #373737;
-    }
-    .docs.api table {
-      box-shadow: 0 0 30px 0 rgba(80,80,80,0.1);
-    }
-    .docs.api thead tr {
-      background: #373737;
-    }
-    .docs.api tbody tr:hover,
-    .docs.api tbody tr:nth-child(even) {
-      background: black;
-    }
-    .docs.api .section-title {
-      background: #373737;
-    }
-    .docs.api a {
-      color: inherit;
-    }
-    .docs.api a {
-      color: inherit;
-    }
-    .api-detail-section {
-      border-bottom: 1px solid #373737;
-    }
-    .docs.api .filter-item {
-      background: #373737;
-    }
-  }
 }
\ No newline at end of file
diff --git a/packages/docs/src/routes/docs/(qwik)/advanced/eslint/styles.css b/packages/docs/src/routes/docs/(qwik)/advanced/eslint/styles.css
index 9cba0b9c82a..6b7a4a21c7d 100644
--- a/packages/docs/src/routes/docs/(qwik)/advanced/eslint/styles.css
+++ b/packages/docs/src/routes/docs/(qwik)/advanced/eslint/styles.css
@@ -140,30 +140,3 @@
   border-color: #575757;
   color: var(--color-text);
 }
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme]) {
-    .docs .edit-examples-wrapper .edit-btn {
-      background: #373737;
-      border-color: #575757;
-      color: var(--color-text);
-    }
-    .docs .badge.bad {
-      @apply bg-red-900;
-    }
-    .docs .badge.good {
-      @apply bg-green-900;
-    }
-    .docs .rule-wrapper {
-      border-color: #575757;
-    }
-    .docs .panel .panel-border {
-      border-color: #575757;
-    }
-    .docs .panel {
-      background: #373737;
-      border-color: #575757;
-      color: var(--color-text);
-    }
-  }
-}

From c4a2fd4f25fd005a20db4d6cc6efbd9186ca9669 Mon Sep 17 00:00:00 2001
From: Jerry_Wu <409187100@qq.com>
Date: Wed, 15 Oct 2025 15:26:35 +0800
Subject: [PATCH 07/11] refactor: update SVG logos to use 'currentColor' for
 fill attribute

- Changed the fill attribute in Discord, GitHub, and Twitter logo SVGs from a specific color to 'currentColor' for better adaptability in different themes.
- Cleaned up unnecessary CSS rules in the API styles to enhance maintainability.
---
 .../docs/src/components/svgs/discord-logo.tsx |  2 +-
 .../docs/src/components/svgs/github-logo.tsx  |  2 +-
 .../docs/src/components/svgs/twitter-logo.tsx |  2 +-
 packages/docs/src/routes/api/api.css          | 22 +------------------
 4 files changed, 4 insertions(+), 24 deletions(-)

diff --git a/packages/docs/src/components/svgs/discord-logo.tsx b/packages/docs/src/components/svgs/discord-logo.tsx
index bdcd10665be..931c62270fb 100644
--- a/packages/docs/src/components/svgs/discord-logo.tsx
+++ b/packages/docs/src/components/svgs/discord-logo.tsx
@@ -13,7 +13,7 @@ export const DiscordLogo = ({ width, height }: DiscordLogoProps) => (
     viewBox="0 0 512 512"
     role="img"
     aria-label="Discord Logo"
-    class="fill-[#e3e2e9]"
+    fill="currentColor"
   >
     <path d="M464 66.52A50 50 0 00414.12 17L97.64 16A49.65 49.65 0 0048 65.52V392c0 27.3 22.28 48 49.64 48H368l-13-44 109 100zM324.65 329.81s-8.72-10.39-16-19.32C340.39 301.55 352.5 282 352.5 282a139 139 0 01-27.85 14.25 173.31 173.31 0 01-35.11 10.39 170.05 170.05 0 01-62.72-.24 184.45 184.45 0 01-35.59-10.4 141.46 141.46 0 01-17.68-8.21c-.73-.48-1.45-.72-2.18-1.21-.49-.24-.73-.48-1-.48-4.36-2.42-6.78-4.11-6.78-4.11s11.62 19.09 42.38 28.26c-7.27 9.18-16.23 19.81-16.23 19.81-53.51-1.69-73.85-36.47-73.85-36.47 0-77.06 34.87-139.62 34.87-139.62 34.87-25.85 67.8-25.12 67.8-25.12l2.42 2.9c-43.59 12.32-63.44 31.4-63.44 31.4s5.32-2.9 14.28-6.77c25.91-11.35 46.5-14.25 55-15.21a24 24 0 014.12-.49 205.62 205.62 0 0148.91-.48 201.62 201.62 0 0172.89 22.95s-19.13-18.15-60.3-30.45l3.39-3.86s33.17-.73 67.81 25.16c0 0 34.87 62.56 34.87 139.62 0-.28-20.35 34.5-73.86 36.19z" />
     <path d="M212.05 218c-13.8 0-24.7 11.84-24.7 26.57s11.14 26.57 24.7 26.57c13.8 0 24.7-11.83 24.7-26.57.25-14.76-10.9-26.57-24.7-26.57zM300.43 218c-13.8 0-24.7 11.84-24.7 26.57s11.14 26.57 24.7 26.57c13.81 0 24.7-11.83 24.7-26.57S314 218 300.43 218z" />
diff --git a/packages/docs/src/components/svgs/github-logo.tsx b/packages/docs/src/components/svgs/github-logo.tsx
index 9bcdbbd1d82..ad56defd8cd 100644
--- a/packages/docs/src/components/svgs/github-logo.tsx
+++ b/packages/docs/src/components/svgs/github-logo.tsx
@@ -10,7 +10,7 @@ export const GithubLogo = ({ width, height }: GithubLogoProps) => (
     height={height}
     role="img"
     aria-label="GitHub Logo"
-    class="fill-[#e3e2e9]"
+    fill="currentColor"
   >
     <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
   </svg>
diff --git a/packages/docs/src/components/svgs/twitter-logo.tsx b/packages/docs/src/components/svgs/twitter-logo.tsx
index 70cf58a88fc..fac49fa48b7 100644
--- a/packages/docs/src/components/svgs/twitter-logo.tsx
+++ b/packages/docs/src/components/svgs/twitter-logo.tsx
@@ -11,7 +11,7 @@ export const TwitterLogo = ({ width, height }: TwitterLogoProps) => (
     viewBox="0 0 512 512"
     role="img"
     aria-label="Twitter Logo"
-    class="fill-[#e3e2e9]"
+    fill="currentColor"
   >
     <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
   </svg>
diff --git a/packages/docs/src/routes/api/api.css b/packages/docs/src/routes/api/api.css
index 0586a5022aa..94b229ab68c 100644
--- a/packages/docs/src/routes/api/api.css
+++ b/packages/docs/src/routes/api/api.css
@@ -60,8 +60,6 @@
 [data-theme="dark"] .docs.api table {
   box-shadow: 0 0 30px 0 rgba(80,80,80,0.1);
 }
-
-
 .docs.api article thead tr {
   background: #f6f6f6;
   text-align: left;
@@ -72,8 +70,6 @@
 [data-theme="dark"] .docs.api thead tr {
   background: #373737;
 }
-
-
 .docs.api thead th,
 .docs.api tbody tr td {
   padding: 12px 24px;
@@ -87,7 +83,6 @@
   background: black;
 }
 
-
 .docs.api .docs-container {
   margin: 10px auto;
   padding: 80px 30px 0;
@@ -108,10 +103,6 @@
 [data-theme="dark"] .docs.api .section-title {
   background: #373737;
 }
-
-
-
-
 @media screen and (min-width: 768px) {
   .docs.api .section-title {
     font-size: 1rem;
@@ -153,8 +144,6 @@
     color: inherit;
 }
 
-
-
 .docs.api a {
   display: inline-block;
   color: black;
@@ -164,8 +153,6 @@
   color: inherit;
 }
 
-
-
 .docs.api ul {
   margin: 0;
 }
@@ -183,8 +170,6 @@
   border-bottom: 1px solid #373737;
 }
 
-
-
 .docs.api .api-edit {
   position: absolute;
   top: 50px;
@@ -201,8 +186,6 @@
   background: #373737;
 }
 
-
-
 .docs.api .filter-item {
   @apply bg-slate-100;
   line-height: 2;
@@ -210,9 +193,6 @@
 [data-theme="dark"] .docs.api .filter-item {
   background: #373737;
 }
-
-
-
 @media screen and (min-width: 768px) {
   .docs.api .filter-item {
     line-height: 1.5;
@@ -266,4 +246,4 @@
 }
 .docs.api .table-wrapper {
   overflow-x: auto;
-}
\ No newline at end of file
+}

From 12441e5a32c7d5569a42cf97b9406903aa4ec4d7 Mon Sep 17 00:00:00 2001
From: Jerry_Wu <409187100@qq.com>
Date: Wed, 15 Oct 2025 15:29:41 +0800
Subject: [PATCH 08/11] refactor: reorganize theme handling and remove
 deprecated theme script

- Moved the ThemeScript import to the theme-toggle component for better structure.
- Removed the obsolete theme-script file to clean up the codebase.
- Updated the colorSchemeChangeListener import to reflect the new file structure.
---
 packages/docs/src/components/header/header.tsx     |  2 +-
 .../src/components/router-head/router-head.tsx     |  2 +-
 .../{router-head => theme-toggle}/theme-script.tsx | 12 ++++++++++++
 .../src/components/theme-toggle/theme-toggle.tsx   | 14 +-------------
 4 files changed, 15 insertions(+), 15 deletions(-)
 rename packages/docs/src/components/{router-head => theme-toggle}/theme-script.tsx (61%)

diff --git a/packages/docs/src/components/header/header.tsx b/packages/docs/src/components/header/header.tsx
index 2435f6e48ab..c2f72607ce8 100644
--- a/packages/docs/src/components/header/header.tsx
+++ b/packages/docs/src/components/header/header.tsx
@@ -18,7 +18,6 @@ import { TwitterLogo } from '../svgs/twitter-logo';
 import styles from './header.css?inline';
 import { GlobalStore } from '../../context';
 import {
-  colorSchemeChangeListener,
   getColorPreference,
   setPreference,
   ThemeToggle,
@@ -26,6 +25,7 @@ import {
 } from '../theme-toggle/theme-toggle';
 import { SearchIcon } from '../docsearch/icons/SearchIcon';
 import { getPkgManagerPreference } from '../package-manager-tabs';
+import { colorSchemeChangeListener } from '../theme-toggle/theme-script';
 
 export const SearchButton = component$<PropsOf<'button'>>(({ ...props }) => {
   return (
diff --git a/packages/docs/src/components/router-head/router-head.tsx b/packages/docs/src/components/router-head/router-head.tsx
index b9b512370d3..728bb1154b9 100644
--- a/packages/docs/src/components/router-head/router-head.tsx
+++ b/packages/docs/src/components/router-head/router-head.tsx
@@ -2,7 +2,7 @@ import { component$ } from '@builder.io/qwik';
 import { useDocumentHead, useLocation } from '@builder.io/qwik-city';
 import { Social } from './social';
 import { Vendor } from './vendor';
-import { ThemeScript } from './theme-script';
+import { ThemeScript } from '../theme-toggle/theme-script';
 
 export const RouterHead = component$(() => {
   const { url } = useLocation();
diff --git a/packages/docs/src/components/router-head/theme-script.tsx b/packages/docs/src/components/theme-toggle/theme-script.tsx
similarity index 61%
rename from packages/docs/src/components/router-head/theme-script.tsx
rename to packages/docs/src/components/theme-toggle/theme-script.tsx
index 10d825052f0..6281a21a384 100644
--- a/packages/docs/src/components/router-head/theme-script.tsx
+++ b/packages/docs/src/components/theme-toggle/theme-script.tsx
@@ -1,5 +1,17 @@
 export const themeStorageKey = 'theme-preference';
 
+export const colorSchemeChangeListener = (onColorSchemeChange: (isDark: boolean) => void) => {
+  const listener = ({ matches: isDark }: MediaQueryListEvent) => {
+    onColorSchemeChange(isDark);
+  };
+  window
+    .matchMedia('(prefers-color-scheme: dark)')
+    .addEventListener('change', (event) => listener(event));
+
+  return () =>
+    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', listener);
+};
+
 export const ThemeScript = () => {
   const themeScript = `
         try {
diff --git a/packages/docs/src/components/theme-toggle/theme-toggle.tsx b/packages/docs/src/components/theme-toggle/theme-toggle.tsx
index 2dc159794d1..23a138c17c5 100644
--- a/packages/docs/src/components/theme-toggle/theme-toggle.tsx
+++ b/packages/docs/src/components/theme-toggle/theme-toggle.tsx
@@ -1,5 +1,5 @@
 import { component$, event$, isServer, useSignal, useStyles$ } from '@builder.io/qwik';
-import { themeStorageKey } from '../router-head/theme-script';
+import { themeStorageKey } from './theme-script';
 import themeToggle from './theme-toggle.css?inline';
 import { SunIcon } from './Sun';
 import { MoonIcon } from './Moon';
@@ -46,18 +46,6 @@ export const getColorPreference = (): ThemePreference => {
   return (theme as ThemePreference) || 'auto';
 };
 
-export const colorSchemeChangeListener = (onColorSchemeChange: (isDark: boolean) => void) => {
-  const listener = ({ matches: isDark }: MediaQueryListEvent) => {
-    onColorSchemeChange(isDark);
-  };
-  window
-    .matchMedia('(prefers-color-scheme: dark)')
-    .addEventListener('change', (event) => listener(event));
-
-  return () =>
-    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', listener);
-};
-
 export const ThemeToggle = component$(() => {
   useStyles$(themeToggle);
   const preference = useSignal<ThemePreference>(getColorPreference());

From fd65cc93f0b5bb05726494d6e6b754fd92a33188 Mon Sep 17 00:00:00 2001
From: Jerry_Wu <409187100@qq.com>
Date: Thu, 16 Oct 2025 13:40:43 +0800
Subject: [PATCH 09/11] refactor: enhance theme toggle component for better
 responsiveness

- Updated the theme toggle button styles to improve layout and alignment.
- Added conditional text display for theme preference on smaller screens.
- Adjusted visibility of theme icons based on screen size for a cleaner UI.
---
 .../docs/src/components/theme-toggle/theme-toggle.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/docs/src/components/theme-toggle/theme-toggle.tsx b/packages/docs/src/components/theme-toggle/theme-toggle.tsx
index 23a138c17c5..ee68d7a3c53 100644
--- a/packages/docs/src/components/theme-toggle/theme-toggle.tsx
+++ b/packages/docs/src/components/theme-toggle/theme-toggle.tsx
@@ -67,7 +67,7 @@ export const ThemeToggle = component$(() => {
       <button
         onClick$={onClick$}
         class={[
-          'group relative flex h-8 w-8 items-center justify-center rounded-md bg-background text-foreground hover:opacity-60',
+          'group relative flex h-8 m-auto items-center justify-center rounded-md bg-background text-foreground hover:opacity-60 sm:w-8 sm:px-0',
           {
             'pref-light': preference.value === 'light',
             'pref-dark': preference.value === 'dark',
@@ -75,11 +75,18 @@ export const ThemeToggle = component$(() => {
           },
         ]}
       >
-        <div class="absolute inset-0 grid place-items-center transition-transform duration-200 ease-out group-hover:scale-110 group-active:scale-75">
+        <div class="absolute inset-0 hidden sm:grid place-items-center transition-transform duration-200 ease-out group-hover:scale-110 group-active:scale-75">
           <SunIcon class="themeIcon light col-start-1 row-start-1" />
           <MoonIcon class="themeIcon dark col-start-1 row-start-1" />
           <BrillianceIcon class="themeIcon auto col-start-1 row-start-1" />
         </div>
+        <div class="lg:hidden font-medium leading-none">
+          {preference.value === 'light'
+            ? 'Light theme'
+            : preference.value === 'dark'
+              ? 'Dark theme'
+              : 'Auto'}
+        </div>
       </button>
     </>
   );

From 183646caaf75158c01cdd661444b2e929f9a583d Mon Sep 17 00:00:00 2001
From: Jerry_Wu <409187100@qq.com>
Date: Thu, 16 Oct 2025 17:32:33 +0800
Subject: [PATCH 10/11] refactor: extract theme loading logic into a separate
 module

- Created a new load-theme.js file to encapsulate the theme loading logic.
- Updated ThemeScript component to import and utilize the new loadThemeScript for improved code organization and maintainability.
---
 .../src/components/theme-toggle/load-theme.js  | 18 ++++++++++++++++++
 .../components/theme-toggle/theme-script.tsx   | 16 ++--------------
 2 files changed, 20 insertions(+), 14 deletions(-)
 create mode 100644 packages/docs/src/components/theme-toggle/load-theme.js

diff --git a/packages/docs/src/components/theme-toggle/load-theme.js b/packages/docs/src/components/theme-toggle/load-theme.js
new file mode 100644
index 00000000000..1931abcffb9
--- /dev/null
+++ b/packages/docs/src/components/theme-toggle/load-theme.js
@@ -0,0 +1,18 @@
+(() => {
+  try {
+    const getItem = localStorage.getItem('theme-preference');
+    const el = document.firstElementChild;
+    if (!el) {
+      throw new Error('documentElement not found');
+    }
+
+    if (getItem === 'light' || getItem === 'dark') {
+      el.setAttribute('data-theme', getItem);
+    } else {
+      const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      el.setAttribute('data-theme', isDark ? 'dark' : 'light');
+    }
+  } catch (err) {
+    console.error(err);
+  }
+})();
diff --git a/packages/docs/src/components/theme-toggle/theme-script.tsx b/packages/docs/src/components/theme-toggle/theme-script.tsx
index 6281a21a384..0c9fefcbee9 100644
--- a/packages/docs/src/components/theme-toggle/theme-script.tsx
+++ b/packages/docs/src/components/theme-toggle/theme-script.tsx
@@ -1,3 +1,4 @@
+import loadThemeScript from './load-theme?compiled-string';
 export const themeStorageKey = 'theme-preference';
 
 export const colorSchemeChangeListener = (onColorSchemeChange: (isDark: boolean) => void) => {
@@ -13,18 +14,5 @@ export const colorSchemeChangeListener = (onColorSchemeChange: (isDark: boolean)
 };
 
 export const ThemeScript = () => {
-  const themeScript = `
-        try {
-          const getItem = localStorage.getItem('${themeStorageKey}')
-          const el = document.firstElementChild;
-          if(!el) { throw new Error('documentElement not found'); }
-
-          if(getItem === 'light' || getItem === 'dark'){
-              el.setAttribute('data-theme', getItem);
-          } else {
-              const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-              el.setAttribute('data-theme', isDark ? 'dark' : 'light');
-          }
-        } catch (err) { }`;
-  return <script dangerouslySetInnerHTML={themeScript} />;
+  return <script dangerouslySetInnerHTML={loadThemeScript} />;
 };

From f68330f485f05e9b420505ea86f920149234db5c Mon Sep 17 00:00:00 2001
From: Jerry_Wu <409187100@qq.com>
Date: Thu, 16 Oct 2025 17:53:48 +0800
Subject: [PATCH 11/11] refactor: remove IIFE from load-theme.js for cleaner
 code structure

- Eliminated the immediately invoked function expression (IIFE) in load-theme.js to simplify the theme loading logic.
- Improved readability and maintainability of the theme loading process.
---
 .../src/components/theme-toggle/load-theme.js | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/packages/docs/src/components/theme-toggle/load-theme.js b/packages/docs/src/components/theme-toggle/load-theme.js
index 1931abcffb9..8090b9d3642 100644
--- a/packages/docs/src/components/theme-toggle/load-theme.js
+++ b/packages/docs/src/components/theme-toggle/load-theme.js
@@ -1,18 +1,16 @@
-(() => {
-  try {
-    const getItem = localStorage.getItem('theme-preference');
-    const el = document.firstElementChild;
-    if (!el) {
-      throw new Error('documentElement not found');
-    }
+try {
+  const getItem = localStorage.getItem('theme-preference');
+  const el = document.firstElementChild;
+  if (!el) {
+    throw new Error('documentElement not found');
+  }
 
-    if (getItem === 'light' || getItem === 'dark') {
-      el.setAttribute('data-theme', getItem);
-    } else {
-      const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-      el.setAttribute('data-theme', isDark ? 'dark' : 'light');
-    }
-  } catch (err) {
-    console.error(err);
+  if (getItem === 'light' || getItem === 'dark') {
+    el.setAttribute('data-theme', getItem);
+  } else {
+    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    el.setAttribute('data-theme', isDark ? 'dark' : 'light');
   }
-})();
+} catch (err) {
+  console.error(err);
+}