Merge pull request #7645 from QwikDev/docs-remove-theme-store

refactor(docs theme): no globalStore.theme

Author: wmertens

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 />;
 });

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

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>

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>

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

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} />;
 };

packages/docs/src/components/theme-toggle/theme-toggle.tsx

@@ -1,68 +1,76 @@
-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
           type="button"
           class="theme-toggle"
           id="theme-toggle"
           title="Toggles light & dark"
-          aria-label={state.theme}
-          aria-live="polite"
           onClick$={onClick$}
         >
           <SunAndMoon />

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');