QwikDev · wmertens · Apr 22, 2025
@@ -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 />;
 });
@@ -1,4 +1,4 @@
-import { component$, useContext, useStyles$, useVisibleTask$ } from '@qwik.dev/core';
+import { component$, useContext, useStyles$ } from '@qwik.dev/core';
 import { useLocation } from '@qwik.dev/router';
 import { GlobalStore } from '../../context';
 import { DocSearch } from '../docsearch/doc-search';
@@ -8,27 +8,14 @@ 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 Header = component$(() => {
   useStyles$(styles);
   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

@@ -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 { AlertIcon } from '../svgs/alert-icon';
 import { ChatIcon } from '../svgs/chat-icon';
 import { EditIcon } from '../svgs/edit-icon';
@@ -86,7 +85,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) || [];
 
@@ -170,14 +168,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>
                 ) : (
@@ -196,11 +187,7 @@ export const OnThisPage = component$(() => {
         {OnThisPageMore.map((el, index) => {
           return (
             <li
-              class={`${
-                theme.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">

@@ -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 />

@@ -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} />;
 };
@@ -1,68 +1,79 @@
-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);
-};
+type ThemeName = 'dark' | 'light' | undefined;
 
-export const reflectPreference = (theme: ThemePreference) => {
-  document.firstElementChild?.setAttribute('data-theme', theme);
-};
-
-export const getColorPreference = (): ThemePreference => {
+export const getTheme = (): ThemeName => {
   let theme;
   try {
     theme = localStorage.getItem(themeStorageKey);
-  } catch (err) {
+  } catch {
     //
   }
   if (theme) {
-    return theme as ThemePreference;
+    return theme as ThemeName;
   } else {
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   }
 };
 
+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 {
+    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
           type="button"
           class="theme-toggle"
           id="theme-toggle"
           title="Toggles light & dark"
-          aria-label={state.theme}
-          aria-live="polite"
           onClick$={onClick$}
         >
           <SunAndMoon />

@@ -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');
@@ -59,6 +59,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;
@@ -119,7 +124,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);
@@ -129,6 +134,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;
@@ -160,12 +170,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;