diff --git a/packages/docs/src/components/code-sandbox/index.tsx b/packages/docs/src/components/code-sandbox/index.tsx
index 1f13741b1a5..54be71903d1 100644
--- a/packages/docs/src/components/code-sandbox/index.tsx
+++ b/packages/docs/src/components/code-sandbox/index.tsx
@@ -1,5 +1,4 @@
-import { component$, Slot, useContext, useSignal, useStylesScoped$ } from '@qwik.dev/core';
-import { GlobalStore } from '../../context';
+import { component$, Slot, useSignal, useStylesScoped$ } from '@qwik.dev/core';
 import { EditIcon } from '../svgs/edit-icon';
 import CSS from './index.css?inline';
 
@@ -10,10 +9,9 @@ export default component$<{
   console?: boolean;
   maxHeight?: number;
   style?: Record<string, string>;
-}>(({ url, tabs, src, style, console, maxHeight }) => {
+}>(({ url, tabs, src, style, console }) => {
   const activeTab = useSignal(0);
   useStylesScoped$(CSS);
-  const state = useContext(GlobalStore);
   const exampleUrl = (url || src) + (console ? '?console=true' : '');
   return (
     <>
@@ -71,7 +69,7 @@ export default component$<{
         <div>
           <iframe
             loading="lazy"
-            src={examplePath({ path: exampleUrl, theme: state.theme, includeTheme: true })}
+            src={examplePath(exampleUrl)}
             style={{ width: '100%', height: '200px', ...style }}
           />
         </div>
@@ -80,37 +78,16 @@ export default component$<{
   );
 });
 
-function examplePath(
-  opts:
-    | {
-        path: string;
-        theme?: string;
-        includeTheme?: boolean;
-      }
-    | string
-) {
-  const {
-    path,
-    theme = 'light',
-    includeTheme = false,
-  } = typeof opts === 'string' ? ({ path: opts } as any) : opts;
+function examplePath(path: string) {
   const newPath = path
     .replace('/(qwik)/', '/')
     .replace('/(qwikrouter)/', '/')
     .replace('/src/routes/demo', '/demo')
     .replace(/\/[\w\d]+\.tsx?$/, '/');
 
-  if (!includeTheme) {
-    return newPath;
-  }
-
-  if (newPath.indexOf('?') > -1) {
-    return newPath + '&theme=' + theme;
-  }
-
-  return newPath + '?theme=' + theme;
+  return newPath;
 }
 
-export const CodeFile = component$<{ src: string }>((props) => {
+export const CodeFile = component$<{ src: string }>(() => {
   return <Slot />;
 });
diff --git a/packages/docs/src/components/header/header.tsx b/packages/docs/src/components/header/header.tsx
index 80339a95747..b1f2a9ea7ef 100644
--- a/packages/docs/src/components/header/header.tsx
+++ b/packages/docs/src/components/header/header.tsx
@@ -1,11 +1,4 @@
-import {
-  component$,
-  useContext,
-  useSignal,
-  useStyles$,
-  useVisibleTask$,
-  type PropsOf,
-} from '@qwik.dev/core';
+import { component$, useContext, useStyles$, useSignal, type PropsOf } from '@qwik.dev/core';
 import { useLocation } from '@qwik.dev/router';
 import { GlobalStore } from '../../context';
 import { DocSearch } from '../docsearch/doc-search';
@@ -16,12 +9,7 @@ import { GithubLogo } from '../svgs/github-logo';
 import { MoreIcon } from '../svgs/more-icon';
 import { QwikLogo } from '../svgs/qwik-logo';
 import { TwitterLogo } from '../svgs/twitter-logo';
-import {
-  colorSchemeChangeListener,
-  getColorPreference,
-  setPreference,
-  ThemeToggle,
-} from '../theme-toggle/theme-toggle';
+import { ThemeToggle } from '../theme-toggle/theme-toggle';
 import styles from './header.css?inline';
 
 export const SearchButton = component$<PropsOf<'button'>>(({ ...props }) => {
@@ -45,14 +33,6 @@ export const Header = component$(() => {
   const globalStore = useContext(GlobalStore);
   const pathname = useLocation().url.pathname;
 
-  useVisibleTask$(() => {
-    globalStore.theme = getColorPreference();
-    return colorSchemeChangeListener((isDark) => {
-      globalStore.theme = isDark ? 'dark' : 'light';
-      setPreference(globalStore.theme);
-    });
-  });
-
   return (
     <>
       <header
diff --git a/packages/docs/src/components/on-this-page/on-this-page-more.tsx b/packages/docs/src/components/on-this-page/on-this-page-more.tsx
index 9bee4ade3bc..624b7aaf022 100644
--- a/packages/docs/src/components/on-this-page/on-this-page-more.tsx
+++ b/packages/docs/src/components/on-this-page/on-this-page-more.tsx
@@ -6,11 +6,10 @@ import { GithubLogo } from '../svgs/github-logo';
 import { TwitterLogo } from '../svgs/twitter-logo';
 
 type OnThisPageMoreProps = {
-  theme: 'light' | 'dark' | 'auto';
   editUrl: string;
 };
 
-export const OnThisPageMore = component$<OnThisPageMoreProps>(({ theme, editUrl }) => {
+export const OnThisPageMore = component$<OnThisPageMoreProps>(({ editUrl }) => {
   const OnThisPageMore = [
     {
       href: editUrl,
@@ -45,15 +44,11 @@ export const OnThisPageMore = component$<OnThisPageMoreProps>(({ theme, editUrl
         {OnThisPageMore.map((el, index) => {
           return (
             <li
-              class={`${
-                theme === 'light'
-                  ? 'hover:bg-[var(--qwik-light-blue)]'
-                  : 'hover:bg-[var(--on-this-page-hover-bg-color)]'
-              } rounded-lg`}
+              class="hover:bg-(--on-this-page-hover-bg-color) rounded-lg"
               key={`more-items-on-this-page-${index}`}
             >
               <a class="more-item" href={el.href} rel="noopener" target="_blank">
-                {el.icon && <el.icon width={20} height={20} />}
+                <el.icon width={20} height={20} />
                 <span>{el.text}</span>
               </a>
             </li>
diff --git a/packages/docs/src/components/on-this-page/on-this-page.tsx b/packages/docs/src/components/on-this-page/on-this-page.tsx
index dec9022ed66..7f08dd9b46f 100644
--- a/packages/docs/src/components/on-this-page/on-this-page.tsx
+++ b/packages/docs/src/components/on-this-page/on-this-page.tsx
@@ -1,6 +1,5 @@
-import { $, component$, useContext, useOnDocument, useSignal, useStyles$ } from '@qwik.dev/core';
+import { $, component$, useOnDocument, useSignal, useStyles$ } from '@qwik.dev/core';
 import { useContent, useLocation } from '@qwik.dev/router';
-import { GlobalStore } from '../../context';
 import styles from './on-this-page.css?inline';
 import { OnThisPageMore } from './on-this-page-more';
 
@@ -108,7 +107,6 @@ const makeEditPageUrl = (url: string): string => {
 
 export const OnThisPage = component$(() => {
   useStyles$(styles);
-  const theme = useContext(GlobalStore);
   const { headings } = useContent();
   const contentHeadings = headings?.filter((h) => h.level <= 3) || [];
 
@@ -162,14 +160,7 @@ export const OnThisPage = component$(() => {
           <h6>On This Page</h6>
           <ul class="px-2 font-medium text-[var(--interactive-text-color)]">
             {contentHeadings.map((h) => (
-              <li
-                key={h.id}
-                class={`${
-                  theme.theme === 'light'
-                    ? 'hover:bg-[var(--qwik-light-blue)]'
-                    : 'hover:bg-[var(--on-this-page-hover-bg-color)]'
-                }`}
-              >
+              <li key={h.id} class="hover:bg-(--on-this-page-hover-bg-color)">
                 {activeId.value === h.id ? (
                   <span class="on-this-page-item">{h.text}</span>
                 ) : (
@@ -180,7 +171,7 @@ export const OnThisPage = component$(() => {
               </li>
             ))}
           </ul>
-          <OnThisPageMore theme={theme.theme} editUrl={editUrl} />
+          <OnThisPageMore editUrl={editUrl} />
         </>
       ) : null}
     </aside>
diff --git a/packages/docs/src/components/package-manager-tabs/index.tsx b/packages/docs/src/components/package-manager-tabs/index.tsx
index 25c1d7830ce..1ec6a775ca1 100644
--- a/packages/docs/src/components/package-manager-tabs/index.tsx
+++ b/packages/docs/src/components/package-manager-tabs/index.tsx
@@ -1,15 +1,13 @@
 import { Tabs } from '@qwik-ui/headless';
-import { $, Slot, component$, useContext, useSignal, type PropsOf } from '@qwik.dev/core';
-import { GlobalStore } from '~/context';
+import { $, Slot, component$, useSignal, type PropsOf } from '@qwik.dev/core';
 
 const pkgManagers = ['pnpm', 'npm', 'yarn', 'bun'] as const;
 type PkgManagers = (typeof pkgManagers)[number];
 
 export default component$(() => {
-  const globalStore = useContext(GlobalStore);
   const selectedPkgManagersSig = useSignal<PkgManagers>('pnpm');
 
-  const activeClass = `${globalStore.theme === 'light' ? 'bg-gray-300 text-black' : 'bg-slate-800 text-white'}`;
+  const activeClass = `font-bold bg-(--color-tab-active-bg) text-(--color-tab-active-text)`;
 
   return (
     <Tabs.Root
@@ -21,7 +19,7 @@ export default component$(() => {
       <Tabs.List>
         <Tabs.Tab
           tabId="pnpm"
-          class={`px-4 pt-2 rounded-md ${selectedPkgManagersSig.value === 'pnpm' ? `font-bold ${activeClass}` : ''}`}
+          class={`px-4 pt-2 rounded-md ${selectedPkgManagersSig.value === 'pnpm' ? activeClass : ''}`}
         >
           <span class="inline-flex items-center gap-x-2">
             <PnpmIcon />
@@ -30,7 +28,7 @@ export default component$(() => {
         </Tabs.Tab>
         <Tabs.Tab
           tabId="npm"
-          class={`px-4 pt-2 rounded-md ${selectedPkgManagersSig.value === 'npm' ? `font-bold ${activeClass}` : ''}`}
+          class={`px-4 pt-2 rounded-md ${selectedPkgManagersSig.value === 'npm' ? activeClass : ''}`}
         >
           <span class="inline-flex items-center gap-x-2">
             <NpmIcon />
@@ -39,7 +37,7 @@ export default component$(() => {
         </Tabs.Tab>
         <Tabs.Tab
           tabId="yarn"
-          class={`px-4 pt-2 rounded-md ${selectedPkgManagersSig.value === 'yarn' ? `font-bold ${activeClass}` : ''}`}
+          class={`px-4 pt-2 rounded-md ${selectedPkgManagersSig.value === 'yarn' ? activeClass : ''}`}
         >
           <span class="inline-flex items-center gap-x-2">
             <YarnIcon />
@@ -48,7 +46,7 @@ export default component$(() => {
         </Tabs.Tab>
         <Tabs.Tab
           tabId="bun"
-          class={`px-4 pt-2 rounded-md ${selectedPkgManagersSig.value === 'bun' ? `font-bold ${activeClass}` : ''}`}
+          class={`px-4 pt-2 rounded-md ${selectedPkgManagersSig.value === 'bun' ? activeClass : ''}`}
         >
           <span class="inline-flex items-center gap-x-2">
             <BunIcon />
diff --git a/packages/docs/src/components/router-head/theme-script.tsx b/packages/docs/src/components/router-head/theme-script.tsx
index f9db735731e..a4ce1bdd819 100644
--- a/packages/docs/src/components/router-head/theme-script.tsx
+++ b/packages/docs/src/components/router-head/theme-script.tsx
@@ -8,6 +8,6 @@ export const ThemeScript = () => {
                   localStorage.getItem('${themeStorageKey}') ??
                   (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
               );
-        } catch (err) { }`;
+        } catch (e) { }`.replaceAll(/\s+/gm, '');
   return <script dangerouslySetInnerHTML={themeScript} />;
 };
diff --git a/packages/docs/src/components/theme-toggle/theme-toggle.tsx b/packages/docs/src/components/theme-toggle/theme-toggle.tsx
index ebda4cf742c..2a23a12ace0 100644
--- a/packages/docs/src/components/theme-toggle/theme-toggle.tsx
+++ b/packages/docs/src/components/theme-toggle/theme-toggle.tsx
@@ -1,59 +1,69 @@
-import { component$, event$, useContext, useStyles$ } from '@qwik.dev/core';
-import { SunAndMoon } from './sun-and-moon';
+import {
+  component$,
+  createSignal,
+  event$,
+  isBrowser,
+  useStyles$,
+  type Signal,
+} from '@qwik.dev/core';
 import { themeStorageKey } from '../router-head/theme-script';
+import { SunAndMoon } from './sun-and-moon';
 import themeToggle from './theme-toggle.css?inline';
-import { GlobalStore } from '../../context';
-
-export type ThemePreference = 'dark' | 'light';
 
-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 setPreference = (theme: ThemePreference) => {
-  localStorage.setItem(themeStorageKey, theme);
-  reflectPreference(theme);
-};
-
-export const reflectPreference = (theme: ThemePreference) => {
-  document.firstElementChild?.setAttribute('data-theme', theme);
-};
+type ThemeName = 'dark' | 'light' | undefined;
 
-export const getColorPreference = (): ThemePreference => {
+export const getTheme = (): ThemeName => {
   let theme;
+  const matchMedia = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   try {
     theme = localStorage.getItem(themeStorageKey);
-  } catch (err) {
-    //
+    return (theme as ThemeName) || matchMedia;
+  } catch {
+    return matchMedia;
   }
-  if (theme) {
-    return theme as ThemePreference;
+};
+
+let currentThemeSignal: Signal<ThemeName>;
+export const getThemeSignal = () => {
+  if (!isBrowser) {
+    throw new Error('getThemeSignal is only available in the browser');
+  }
+  if (!currentThemeSignal) {
+    currentThemeSignal = createSignal(getTheme());
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      currentThemeSignal.value = getTheme();
+    });
+  }
+  return currentThemeSignal;
+};
+
+export const setTheme = (theme: ThemeName) => {
+  if (!theme) {
+    localStorage.removeItem(themeStorageKey);
+    theme = getTheme();
   } else {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    localStorage.setItem(themeStorageKey, theme);
+  }
+  document.firstElementChild?.setAttribute('data-theme', theme!);
+  if (currentThemeSignal) {
+    currentThemeSignal.value = theme;
   }
 };
 
 export const ThemeToggle = component$(() => {
   useStyles$(themeToggle);
-  const state = useContext(GlobalStore);
 
   const onClick$ = event$(() => {
-    state.theme = state.theme === 'light' ? 'dark' : 'light';
-    setPreference(state.theme);
+    const currentTheme = getTheme();
+    setTheme(currentTheme === 'dark' ? 'light' : 'dark');
   });
 
   return (
     <>
       <span class="lg:hidden">
-        <button onClick$={onClick$}>{state.theme === 'light' ? 'Dark' : 'Light'} theme</button>
+        <button onClick$={onClick$}>
+          <span class="theme-name" /> theme
+        </button>
       </span>
       <span class="hidden lg:block">
         <button
@@ -61,8 +71,6 @@ export const ThemeToggle = component$(() => {
           class="theme-toggle"
           id="theme-toggle"
           title="Toggles light & dark"
-          aria-label={state.theme}
-          aria-live="polite"
           onClick$={onClick$}
         >
           <SunAndMoon />
diff --git a/packages/docs/src/context.ts b/packages/docs/src/context.ts
index 85f515cd45c..a457d3bb7c6 100644
--- a/packages/docs/src/context.ts
+++ b/packages/docs/src/context.ts
@@ -1,10 +1,8 @@
 import { createContextId } from '@qwik.dev/core';
-import type { ThemePreference } from './components/theme-toggle/theme-toggle';
 
 export interface SiteStore {
   headerMenuOpen: boolean;
   sideMenuOpen: boolean;
-  theme: ThemePreference | 'auto';
 }
 
 export const GlobalStore = createContextId<SiteStore>('site-store');
diff --git a/packages/docs/src/global.css b/packages/docs/src/global.css
index 7d5a6917763..ac4b76dc186 100644
--- a/packages/docs/src/global.css
+++ b/packages/docs/src/global.css
@@ -64,6 +64,11 @@
 
 :root {
   color-scheme: light;
+  --theme-name: 'light';
+
+  --color-tab-active-bg: #046ee959;
+  --color-tab-active-text: black;
+
   --header-height: 80px;
   --aside-width: 300px;
   --container-max-width: 1400px;
@@ -124,7 +129,7 @@
 
   --made-with-love-text-color: #333333;
 
-  --on-this-page-hover-bg-color: #0093ee17;
+  --on-this-page-hover-bg-color: var(--qwik-light-blue);
 
   --media-separator-color: #dddddd;
   --media-video-shadow-color: var(--qwik-dark-blue);
@@ -134,6 +139,11 @@
 
 :root[data-theme='dark'] {
   color-scheme: dark;
+  --theme-name: 'dark';
+
+  --color-tab-active-bg: #3e3e3e;
+  --color-tab-active-text: white;
+
   --qwik-blue: #009dfd;
 
   --bg-color: #101010;
@@ -165,12 +175,19 @@
 
   --made-with-love-text-color: #c6c5cb;
 
+  --on-this-page-hover-bg-color: #0093ee17;
+
   --media-separator-color: rgba(255, 255, 255, 0.1);
   --media-video-shadow-color: var(--qwik-blue);
 
   --panel-toggle-background-color: var(--qwik-dark-blue);
 }
 
+.theme-name::before {
+  content: var(--theme-name);
+  text-transform: capitalize;
+}
+
 @media (max-width: 768px) {
   :root {
     --panel-toggle-height: 56px;
diff --git a/packages/docs/src/repl/editor.tsx b/packages/docs/src/repl/editor.tsx
index 2975216c0e6..86a7b40b643 100644
--- a/packages/docs/src/repl/editor.tsx
+++ b/packages/docs/src/repl/editor.tsx
@@ -1,24 +1,22 @@
 import {
   component$,
-  type NoSerialize,
-  type QRL,
-  useVisibleTask$,
-  useContext,
   useSignal,
   useStore,
   useTask$,
+  useVisibleTask$,
+  type NoSerialize,
+  type QRL,
 } from '@qwik.dev/core';
+import { getThemeSignal } from '../components/theme-toggle/theme-toggle';
 import type { IStandaloneCodeEditor } from './monaco';
 import {
   addQwikLibs,
   getEditorTheme,
-  type ICodeEditorViewState,
   initMonacoEditor,
   updateMonacoEditor,
+  type ICodeEditorViewState,
 } from './monaco';
 import type { ReplAppInput, ReplStore } from './types';
-import { GlobalStore } from '../context';
-
 export const Editor = component$((props: EditorProps) => {
   const hostRef = useSignal<Element>();
 
@@ -29,8 +27,6 @@ export const Editor = component$((props: EditorProps) => {
     viewStates: {},
   });
 
-  const globalStore = useContext(GlobalStore);
-
   useVisibleTask$(async () => {
     if (!store.editor) {
       await initMonacoEditor(hostRef.value, props, store, props.store);
@@ -43,12 +39,10 @@ export const Editor = component$((props: EditorProps) => {
   });
 
   useVisibleTask$(({ track }) => {
-    track(() => globalStore.theme);
-    if (globalStore.theme !== 'auto') {
-      store.editor?.updateOptions({
-        theme: getEditorTheme(globalStore.theme === 'dark'),
-      });
-    }
+    const theme = track(getThemeSignal());
+    store.editor?.updateOptions({
+      theme: getEditorTheme(theme === 'dark'),
+    });
   });
 
   useTask$(async ({ track }) => {
diff --git a/packages/docs/src/repl/monaco.tsx b/packages/docs/src/repl/monaco.tsx
index a6d82629d4c..688a7f5de22 100644
--- a/packages/docs/src/repl/monaco.tsx
+++ b/packages/docs/src/repl/monaco.tsx
@@ -1,7 +1,7 @@
 import { isServer, noSerialize } from '@qwik.dev/core';
 import type { Diagnostic } from '@qwik.dev/core/optimizer';
 import type MonacoTypes from 'monaco-editor';
-import { getColorPreference } from '../components/theme-toggle/theme-toggle';
+import { getTheme } from '../components/theme-toggle/theme-toggle';
 import { QWIK_PKG_NAME, QWIK_PKG_NAME_V1, bundled, getNpmCdnUrl } from './bundled';
 import type { EditorProps, EditorStore } from './editor';
 import type { ReplStore } from './types';
@@ -50,7 +50,7 @@ export const initMonacoEditor = async (
     lineNumbers: props.lineNumbers,
     wordWrap: props.wordWrap,
     model: null,
-    theme: getEditorTheme(getColorPreference() === 'dark'),
+    theme: getEditorTheme(getTheme() === 'dark'),
   });
 
   ts.typescriptDefaults.setEagerModelSync(true);
diff --git a/packages/docs/src/root.tsx b/packages/docs/src/root.tsx
index 2cde026e0e1..85f1643124c 100644
--- a/packages/docs/src/root.tsx
+++ b/packages/docs/src/root.tsx
@@ -44,7 +44,6 @@ export default component$(() => {
   const store = useStore<SiteStore>({
     headerMenuOpen: false,
     sideMenuOpen: false,
-    theme: 'auto',
   });
 
   useContextProvider(GlobalStore, store);