docs: light mode dark mode

packages/docs/src/components/header/header.tsx

@@ -18,13 +18,14 @@ import { TwitterLogo } from '../svgs/twitter-logo';
 import styles from './header.css?inline';
 import { GlobalStore } from '../../context';
 import {
-  colorSchemeChangeListener,
   getColorPreference,
   setPreference,
   ThemeToggle,
+  getEffectiveTheme,
 } 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 (
@@ -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');
+      }
     });
   });
 

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

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)]"
+    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" />

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)]"
+    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>

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)]"
+    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>

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

@@ -0,0 +1,19 @@
+import { component$ } from '@builder.io/qwik';
+
+interface BrillianceIconProps {
+  class?: string;
+}
+
+export const BrillianceIcon = component$<BrillianceIconProps>(({ class: className, ...props }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      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>
+  );
+});

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

@@ -0,0 +1,25 @@
+import { component$ } from '@builder.io/qwik';
+
+interface MoonIconProps {
+  class?: string;
+}
+
+export const MoonIcon = component$<MoonIconProps>(({ class: className, ...props }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class={className}
+      {...props}
+    >
+      <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>
+  );
+});

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

@@ -0,0 +1,25 @@
+import { component$ } from '@builder.io/qwik';
+
+interface SunIconProps {
+  class?: string;
+}
+
+export const SunIcon = component$<SunIconProps>(({ class: className, ...props }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class={className}
+      {...props}
+    >
+      <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>
+  );
+});

packages/docs/src/components/theme-toggle/load-theme.js

@@ -0,0 +1,16 @@
+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);
+}

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

@@ -0,0 +1,18 @@
+import loadThemeScript from './load-theme?compiled-string';
+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 = () => {
+  return <script dangerouslySetInnerHTML={loadThemeScript} />;
+};

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

@@ -1,33 +1,17 @@
-.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;
+.themeIcon {
+  opacity: 0;
+  transition: opacity 400ms ease-in-out;
+  width: 25px;
+  height: 25px;
 }
 
-[data-theme='dark'] .theme-toggle {
-  --icon-fill: hsl(210 10% 100%);
-  --icon-fill-hover: hsl(210 15% 70%);
+.themeIcon.auto {
+  width: 21px;
+  height: 21px;
 }
 
-.theme-toggle > svg {
-  inline-size: 100%;
-  block-size: 100%;
-  stroke-linecap: round;
+button.pref-light .themeIcon.light,
+button.pref-dark .themeIcon.dark,
+button.pref-auto .themeIcon.auto {
+  opacity: 1;
 }