@carrierllc/mcp 0.2.18 → 0.2.20

package/templates/storefront/src/components/landing/HeroSection.tsx

@@ -1,51 +1,84 @@
-"use client";
-
 import Link from "next/link";
-import { motion } from "framer-motion";
 import brand from "@/brand.config";
 
+const STATS = [
+  { value: "200+", label: "countries" },
+  { value: "<30s", label: "to activate" },
+  { value: "24/7", label: "human support" },
+];
+
 export function HeroSection() {
   return (
-    <section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-[var(--brand-bg)]">
-      {/* Radial glow */}
+    <section className="relative overflow-hidden">
       <div
+        aria-hidden
         className="pointer-events-none absolute inset-0"
         style={{
-          background: `radial-gradient(ellipse 80% 60% at 50% 0%, ${brand.colors.accent}22 0%, transparent 70%)`,
+          background: `radial-gradient(ellipse 70% 50% at 80% 10%, color-mix(in srgb, var(--brand-accent) 22%, transparent), transparent 70%)`,
         }}
       />
-
-      <div className="relative z-10 mx-auto max-w-4xl px-4 text-center">
-        <motion.div
-          initial={{ opacity: 0, y: 24 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, ease: "easeOut" }}
-        >
-          <p className="mb-4 inline-flex items-center gap-2 rounded-full border border-[var(--brand-accent)]/30 bg-[var(--brand-accent)]/10 px-3 py-1 text-xs font-medium text-[var(--brand-accent)]">
+      <div className="relative mx-auto grid max-w-6xl items-center gap-12 px-4 py-20 md:grid-cols-2 md:py-28">
+        <div>
+          <p className="mb-5 inline-flex rounded-full border border-sand-200 bg-sand-100/80 px-3 py-1 text-xs font-medium text-sand-700 dark:border-sand-700 dark:bg-sand-900 dark:text-sand-200">
             Global eSIM connectivity
           </p>
-          <h1 className="text-5xl md:text-7xl font-bold tracking-tight text-white mb-6 leading-none">
-            Stay connected,{" "}
-            <span style={{ color: brand.colors.accent }}>everywhere.</span>
+          <h1 className="font-display text-4xl font-semibold tracking-tight text-sand-900 sm:text-5xl md:text-6xl dark:text-sand-50">
+            Stay connected,
+            <span className="block" style={{ color: "var(--brand-accent)" }}>
+              everywhere.
+            </span>
           </h1>
-          <p className="text-lg md:text-xl text-white/60 mb-10 max-w-2xl mx-auto">
-            {brand.tagline} Instant digital SIM activation. No physical cards, no roaming fees.
+          <p className="mt-5 max-w-md text-base leading-relaxed text-sand-600 dark:text-sand-400">
+            {brand.tagline} Instant QR activation. No physical cards. No roaming surprises.
           </p>
-          <div className="flex flex-wrap gap-4 justify-center">
+          <div className="mt-8 flex flex-wrap items-center gap-3">
             <Link
               href="/shop"
-              className="rounded-full bg-[var(--brand-accent)] px-8 py-3 font-semibold text-white hover:bg-[var(--brand-accent-dark)] transition-colors"
+              className="rounded-full px-7 py-3 text-sm font-semibold text-white transition-opacity hover:opacity-90"
+              style={{ background: "var(--brand-accent)" }}
             >
               Browse plans
             </Link>
             <Link
-              href="/help"
-              className="rounded-full border border-white/20 px-8 py-3 font-semibold text-white/80 hover:bg-white/5 transition-colors"
+              href="/#how-it-works"
+              className="rounded-full border border-sand-300 bg-white px-7 py-3 text-sm font-semibold text-sand-800 transition-colors hover:border-sand-400 dark:border-sand-700 dark:bg-sand-900 dark:text-sand-100"
             >
               How it works
             </Link>
           </div>
-        </motion.div>
+          <dl className="mt-12 grid max-w-md grid-cols-3 gap-4">
+            {STATS.map((stat) => (
+              <div key={stat.label}>
+                <dt className="text-2xl font-semibold text-sand-900 dark:text-sand-50">{stat.value}</dt>
+                <dd className="text-xs text-sand-500">{stat.label}</dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+        <div className="relative hidden md:block">
+          <div className="grid grid-cols-2 gap-3">
+            {[
+              { src: "https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=640&q=70&auto=format&fit=crop", label: "Paris" },
+              { src: "https://images.unsplash.com/photo-1492571350019-22de08371fd3?w=640&q=70&auto=format&fit=crop", label: "Tokyo" },
+              { src: "https://images.unsplash.com/photo-1512453979798-5ea266f8880c?w=640&q=70&auto=format&fit=crop", label: "Dubai" },
+              { src: "https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?w=640&q=70&auto=format&fit=crop", label: "London" },
+            ].map((item) => (
+              <figure
+                key={item.label}
+                className="relative overflow-hidden rounded-2xl border border-sand-200 bg-sand-100 shadow-sm dark:border-sand-800"
+              >
+                <img
+                  src={item.src}
+                  alt={item.label}
+                  className="aspect-[4/3] w-full object-cover"
+                />
+                <figcaption className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-sand-950/70 to-transparent px-3 py-2 text-xs font-medium text-white">
+                  {item.label}
+                </figcaption>
+              </figure>
+            ))}
+          </div>
+        </div>
       </div>
     </section>
   );

package/templates/storefront/src/components/landing/HowItWorks.tsx

@@ -0,0 +1,44 @@
+const STEPS = [
+  {
+    n: "01",
+    title: "Pick a plan",
+    body: "Choose coverage for one country, a region, or the whole map. Price is on the card.",
+  },
+  {
+    n: "02",
+    title: "Pay once",
+    body: "Checkout takes a minute. You get a QR code by email as soon as payment clears.",
+  },
+  {
+    n: "03",
+    title: "Scan and land connected",
+    body: "Open Settings, add the eSIM, done. Most people are online in under 30 seconds.",
+  },
+];
+
+export function HowItWorks() {
+  return (
+    <section id="how-it-works" className="border-y border-sand-200 bg-sand-100/60 py-20 dark:border-sand-800 dark:bg-sand-900/40">
+      <div className="mx-auto max-w-6xl px-4">
+        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-sand-500">How it works</p>
+        <h2 className="mt-2 text-3xl font-semibold tracking-tight text-sand-900 dark:text-sand-50">
+          Connected before you reach the gate.
+        </h2>
+        <div className="mt-10 grid gap-6 md:grid-cols-3">
+          {STEPS.map((step) => (
+            <div
+              key={step.n}
+              className="rounded-2xl border border-sand-200 bg-white p-6 dark:border-sand-800 dark:bg-sand-950"
+            >
+              <p className="text-sm font-semibold" style={{ color: "var(--brand-accent)" }}>
+                {step.n}
+              </p>
+              <h3 className="mt-3 text-lg font-semibold text-sand-900 dark:text-sand-50">{step.title}</h3>
+              <p className="mt-2 text-sm leading-relaxed text-sand-600 dark:text-sand-400">{step.body}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/storefront/src/components/landing/PlanCard.tsx

@@ -1,61 +1,91 @@
 "use client";
 
+import Link from "next/link";
 import { motion } from "framer-motion";
 import { cn } from "@/vendor/ui/cn";
 import type { SkuTemplate } from "@/vendor/carrier/types";
 
 interface PlanCardProps {
   plan: SkuTemplate;
+  href?: string;
   onSelect?: (plan: SkuTemplate) => void;
   featured?: boolean;
 }
 
-export function PlanCard({ plan, onSelect, featured }: PlanCardProps) {
-  return (
-    <motion.div
-      whileHover={{ y: -4 }}
-      className={cn(
-        "relative rounded-2xl border p-6 flex flex-col gap-4 cursor-pointer transition-colors",
-        featured
-          ? "border-[var(--brand-accent)] bg-[var(--brand-accent)]/5"
-          : "border-white/10 bg-white/5 hover:border-white/20",
-      )}
-      onClick={() => onSelect?.(plan)}
-    >
+export function PlanCard({ plan, href, onSelect, featured }: PlanCardProps) {
+  const destination = href ?? (onSelect ? undefined : `/checkout/${plan.id}`);
+
+  function handleSelect() {
+    onSelect?.(plan);
+  }
+
+  const inner = (
+    <>
       {featured && (
-        <span className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-[var(--brand-accent)] px-3 py-0.5 text-xs font-semibold text-white">
+        <span
+          className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rounded-full px-3 py-0.5 text-xs font-semibold text-white"
+          style={{ background: "var(--brand-accent)" }}
+        >
           Most popular
         </span>
       )}
       <div>
-        <p className="font-semibold text-white">{plan.name}</p>
-        <p className="text-sm text-white/50 mt-0.5">{plan.description}</p>
+        <p className="font-semibold text-sand-900 dark:text-sand-50">{plan.name}</p>
+        <p className="mt-0.5 text-sm text-sand-500">{plan.description}</p>
       </div>
       <div className="flex items-baseline gap-1">
-        <span className="text-3xl font-bold text-white">
+        <span className="text-3xl font-bold text-sand-900 dark:text-sand-50">
           €{(plan.price_cents / 100).toFixed(2)}
         </span>
-        <span className="text-sm text-white/40">one-time</span>
+        <span className="text-sm text-sand-500">one-time</span>
       </div>
-      <ul className="space-y-1.5 text-sm text-white/70">
-        {plan.features.map((f, i) => (
-          <li key={i} className="flex items-center gap-2">
-            <span className="text-[var(--brand-accent)]">✓</span>
+      <ul className="space-y-1.5 text-sm text-sand-700 dark:text-sand-300">
+        {plan.features.map((f) => (
+          <li key={f} className="flex items-center gap-2">
+            <span style={{ color: "var(--brand-accent)" }}>✓</span>
             {f}
           </li>
         ))}
       </ul>
-      <button
+      <span
         className={cn(
-          "mt-auto rounded-full py-2 text-sm font-semibold transition-colors",
+          "mt-auto block rounded-full py-2 text-center text-sm font-semibold transition-colors",
           featured
-            ? "bg-[var(--brand-accent)] text-white hover:bg-[var(--brand-accent-dark)]"
-            : "border border-white/20 text-white hover:bg-white/10",
+            ? "text-white"
+            : "border border-sand-300 text-sand-900 hover:bg-sand-100 dark:border-sand-700 dark:text-sand-50 dark:hover:bg-sand-800",
         )}
-        onClick={() => onSelect?.(plan)}
+        style={featured ? { background: "var(--brand-accent)" } : undefined}
       >
         Select plan
-      </button>
-    </motion.div>
+      </span>
+    </>
+  );
+
+  const cardClass = cn(
+    "relative flex flex-col gap-4 rounded-2xl border p-6 pt-8 transition-colors",
+    featured
+      ? "border-[var(--brand-accent)] bg-[color-mix(in_srgb,var(--brand-accent)_6%,white)] dark:bg-[color-mix(in_srgb,var(--brand-accent)_12%,#0F0E0A)]"
+      : "border-sand-200 bg-white hover:border-sand-300 dark:border-sand-800 dark:bg-sand-900 dark:hover:border-sand-700",
+  );
+
+  if (destination && !onSelect) {
+    return (
+      <motion.div whileHover={{ y: -4 }}>
+        <Link href={destination} className={cardClass}>
+          {inner}
+        </Link>
+      </motion.div>
+    );
+  }
+
+  return (
+    <motion.button
+      type="button"
+      whileHover={{ y: -4 }}
+      className={cn(cardClass, "w-full text-left")}
+      onClick={handleSelect}
+    >
+      {inner}
+    </motion.button>
   );
 }

package/templates/storefront/src/components/nav/StorefrontNav.tsx

@@ -1,69 +1,104 @@
 "use client";
 
+import { useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { SignedIn, SignedOut, UserButton } from "@clerk/nextjs";
 import { cn } from "@/vendor/ui/cn";
 import brand from "@/brand.config";
+import { ThemeToggle } from "@/components/theme/ThemeToggle";
 
 const NAV_LINKS = [
-  { label: "Shop", href: "/shop" },
+  { label: "Plans", href: "/shop" },
+  { label: "How it works", href: "/#how-it-works" },
   { label: "Help", href: "/help" },
 ];
 
 export function StorefrontNav() {
   const pathname = usePathname();
+  const [open, setOpen] = useState(false);
 
   return (
-    <header className="fixed top-0 inset-x-0 z-50 h-16 border-b border-white/10 bg-[var(--brand-bg)]/80 backdrop-blur-md">
-      <div className="mx-auto max-w-6xl h-full px-4 flex items-center justify-between">
-        <Link href="/" className="flex items-center gap-2 font-semibold text-white">
+    <header className="fixed inset-x-0 top-0 z-50 border-b border-sand-200/80 bg-sand-50/80 backdrop-blur-md dark:border-sand-800 dark:bg-sand-950/80">
+      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-4">
+        <Link href="/" className="flex items-center gap-2 text-base font-semibold tracking-tight text-sand-900 dark:text-sand-50">
+          <img src="/brand/logo.svg" alt="" width={32} height={32} className="size-8 rounded-lg" />
           {brand.name}
         </Link>
 
-        <nav className="hidden md:flex items-center gap-6">
-          {NAV_LINKS.map((link) => (
-            <Link
-              key={link.href}
-              href={link.href}
-              className={cn(
-                "text-sm transition-colors",
-                pathname?.startsWith(link.href)
-                  ? "text-[var(--brand-accent)]"
-                  : "text-white/70 hover:text-white",
-              )}
-            >
-              {link.label}
-            </Link>
-          ))}
+        <nav className="hidden items-center gap-7 md:flex">
+          {NAV_LINKS.map((link) => {
+            const active = link.href !== "/#how-it-works" && pathname?.startsWith(link.href);
+            return (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={cn(
+                  "text-sm transition-colors",
+                  active
+                    ? "font-medium text-[var(--brand-accent)]"
+                    : "text-sand-600 hover:text-sand-900 dark:text-sand-400 dark:hover:text-sand-50",
+                )}
+              >
+                {link.label}
+              </Link>
+            );
+          })}
         </nav>
 
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-2 sm:gap-3">
+          <ThemeToggle />
           <SignedOut>
             <Link
               href="/sign-in"
-              className="text-sm text-white/70 hover:text-white transition-colors"
+              className="hidden text-sm text-sand-600 hover:text-sand-900 dark:text-sand-400 dark:hover:text-sand-50 sm:inline"
             >
               Sign in
             </Link>
             <Link
               href="/shop"
-              className="rounded-full bg-[var(--brand-accent)] px-4 py-1.5 text-sm font-medium text-white hover:bg-[var(--brand-accent-dark)] transition-colors"
+              className="rounded-full px-4 py-1.5 text-sm font-semibold text-white transition-opacity hover:opacity-90"
+              style={{ background: "var(--brand-accent)" }}
             >
-              Get eSIM
+              Get connected
             </Link>
           </SignedOut>
           <SignedIn>
             <Link
               href="/dashboard"
-              className="text-sm text-white/70 hover:text-white transition-colors"
+              className="hidden text-sm text-sand-600 hover:text-sand-900 dark:text-sand-400 dark:hover:text-sand-50 sm:inline"
             >
               Dashboard
             </Link>
             <UserButton afterSignOutUrl="/" />
           </SignedIn>
+          <button
+            type="button"
+            className="inline-flex size-9 items-center justify-center rounded-full border border-sand-200 text-sand-800 md:hidden dark:border-sand-700 dark:text-sand-100"
+            aria-label={open ? "Close menu" : "Open menu"}
+            onClick={() => setOpen((v) => !v)}
+          >
+            <span className="text-lg leading-none">{open ? "×" : "☰"}</span>
+          </button>
         </div>
       </div>
+
+      {open && (
+        <div className="border-t border-sand-200 bg-sand-50 px-4 py-4 md:hidden dark:border-sand-800 dark:bg-sand-950">
+          <nav className="flex flex-col gap-3">
+            {NAV_LINKS.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                onClick={() => setOpen(false)}
+                className="text-sm font-medium text-sand-800 dark:text-sand-100"
+              >
+                {link.label}
+              </Link>
+            ))}
+          </nav>
+        </div>
+      )}
     </header>
   );
 }

package/templates/storefront/src/components/theme/BrandStyles.tsx

@@ -0,0 +1,8 @@
+import brand from "@/brand.config";
+
+/** Inject operator accent at runtime so editing brand.config.ts actually re-skins the shop. */
+export function BrandStyles() {
+  const { accent, accentDark, accentLight } = brand.colors;
+  const css = `:root{--brand-accent:${accent};--brand-accent-dark:${accentDark};--brand-accent-light:${accentLight};}`;
+  return <style dangerouslySetInnerHTML={{ __html: css }} />;
+}

package/templates/storefront/src/components/theme/ThemeToggle.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useTheme } from "@/components/theme/theme-provider";
+
+export function ThemeToggle() {
+  const { theme, toggle } = useTheme();
+  const dark = theme === "dark";
+  return (
+    <button
+      type="button"
+      onClick={toggle}
+      aria-label={dark ? "Switch to light theme" : "Switch to dark theme"}
+      className="inline-flex size-9 items-center justify-center rounded-full border border-sand-200 text-sand-700 transition-colors hover:border-sand-400 hover:text-sand-900 dark:border-sand-700 dark:text-sand-200 dark:hover:border-sand-500 dark:hover:text-sand-50"
+    >
+      {dark ? (
+        <svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
+          <circle cx="12" cy="12" r="4" />
+          <path d="M12 3v2M12 19v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M3 12h2M19 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
+        </svg>
+      ) : (
+        <svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
+          <path d="M21 14.5A8.5 8.5 0 1 1 9.5 3 7 7 0 0 0 21 14.5z" />
+        </svg>
+      )}
+    </button>
+  );
+}

package/templates/storefront/src/components/theme/clerk-appearance.ts

@@ -1,51 +1,49 @@
-// Inline brand colors — no external package dependency
-const colors = {
-  bg: "#080C16",
-  accent: "#FF6B35",
-  accentDark: "#D9461C",
-  text: "#F5F1EA",
-  textSecondary: "#C9CCD6",
-  surface: "#111827",
-  border: "#1F2937",
+import brand from "@/brand.config";
+
+const accent = brand.colors.accent;
+const sand = {
+  paper: "#FAFAF7",
+  card: "#FFFFFF",
+  ink: "#1A1812",
+  muted: "#5C5644",
+  border: "#E8E4D8",
 };
 
-// Using a plain object; Clerk accepts this shape via the `appearance` prop.
-// Typed as `object` to avoid importing Clerk's internal Appearance type.
 export const clerkAppearance: object = {
   variables: {
-    colorPrimary: colors.accent,
-    colorBackground: colors.surface,
-    colorInputBackground: colors.bg,
-    colorText: colors.text,
-    colorTextSecondary: colors.textSecondary,
-    colorInputText: colors.text,
-    colorNeutral: colors.textSecondary,
-    borderRadius: "0.5rem",
+    colorPrimary: accent,
+    colorBackground: sand.card,
+    colorInputBackground: sand.paper,
+    colorText: sand.ink,
+    colorTextSecondary: sand.muted,
+    colorInputText: sand.ink,
+    colorNeutral: sand.muted,
+    borderRadius: "0.75rem",
     fontFamily: "var(--font-geist-sans, system-ui, sans-serif)",
   },
   elements: {
     card: {
-      backgroundColor: colors.surface,
-      border: `1px solid ${colors.border}`,
+      backgroundColor: sand.card,
+      border: `1px solid ${sand.border}`,
       boxShadow: "none",
     },
-    headerTitle: { color: colors.text },
-    headerSubtitle: { color: colors.textSecondary },
+    headerTitle: { color: sand.ink },
+    headerSubtitle: { color: sand.muted },
     socialButtonsBlockButton: {
-      backgroundColor: colors.bg,
-      border: `1px solid ${colors.border}`,
-      color: colors.text,
+      backgroundColor: sand.paper,
+      border: `1px solid ${sand.border}`,
+      color: sand.ink,
     },
-    socialButtonsBlockButtonText: { color: colors.text },
-    dividerLine: { backgroundColor: colors.border },
-    dividerText: { color: colors.textSecondary },
-    formFieldLabel: { color: colors.textSecondary },
+    socialButtonsBlockButtonText: { color: sand.ink },
+    dividerLine: { backgroundColor: sand.border },
+    dividerText: { color: sand.muted },
+    formFieldLabel: { color: sand.muted },
     formFieldInput: {
-      backgroundColor: colors.bg,
-      border: `1px solid ${colors.border}`,
-      color: colors.text,
+      backgroundColor: sand.paper,
+      border: `1px solid ${sand.border}`,
+      color: sand.ink,
     },
-    footerActionLink: { color: colors.accent },
-    identityPreviewEditButton: { color: colors.accent },
+    footerActionLink: { color: accent },
+    identityPreviewEditButton: { color: accent },
   },
 };

package/templates/storefront/src/components/theme/theme-provider.tsx

@@ -16,13 +16,11 @@ type ThemeContextValue = {
 
 const ThemeContext = React.createContext<ThemeContextValue | null>(null);
 
-function systemTheme(): Theme {
-  if (typeof window === "undefined") return "dark";
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-
 function resolve(pref: ThemePreference): Theme {
-  return pref === "system" ? systemTheme() : pref;
+  if (pref === "system" && typeof window !== "undefined") {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  return pref === "dark" ? "dark" : "light";
 }
 
 function applyToDocument(theme: Theme) {
@@ -32,46 +30,41 @@ function applyToDocument(theme: Theme) {
 }
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const [preference, setPreferenceState] = React.useState<ThemePreference>(() => {
-    if (typeof window === "undefined") return "dark";
+  const [preference, setPreferenceState] = React.useState<ThemePreference>("light");
+  const [theme, setTheme] = React.useState<Theme>("light");
+
+  React.useEffect(() => {
     try {
       const stored = window.localStorage.getItem(STORAGE_KEY);
-      if (stored === "light" || stored === "dark" || stored === "system") return stored;
-    } catch { /* private mode */ }
-    return "system";
-  });
-
-  const [theme, setTheme] = React.useState<Theme>(() => {
-    if (typeof window === "undefined") return "dark";
-    const attr = document.documentElement.getAttribute("data-theme");
-    if (attr === "light" || attr === "dark") return attr;
-    return resolve(preference);
-  });
+      if (stored === "light" || stored === "dark" || stored === "system") {
+        setPreferenceState(stored);
+        const next = resolve(stored);
+        setTheme(next);
+        applyToDocument(next);
+        return;
+      }
+    } catch {
+      /* private mode */
+    }
+    applyToDocument("light");
+  }, []);
 
   const setPreference = React.useCallback((pref: ThemePreference) => {
     setPreferenceState(pref);
     const next = resolve(pref);
     setTheme(next);
     applyToDocument(next);
-    try { window.localStorage.setItem(STORAGE_KEY, pref); } catch { /* ignore */ }
+    try {
+      window.localStorage.setItem(STORAGE_KEY, pref);
+    } catch {
+      /* ignore */
+    }
   }, []);
 
   const toggle = React.useCallback(() => {
     setPreference(theme === "dark" ? "light" : "dark");
   }, [theme, setPreference]);
 
-  React.useEffect(() => {
-    if (preference !== "system") return;
-    const mql = window.matchMedia("(prefers-color-scheme: dark)");
-    const onChange = () => {
-      const next = mql.matches ? "dark" : "light";
-      setTheme(next);
-      applyToDocument(next);
-    };
-    mql.addEventListener("change", onChange);
-    return () => mql.removeEventListener("change", onChange);
-  }, [preference]);
-
   const value = React.useMemo<ThemeContextValue>(
     () => ({ theme, preference, setPreference, toggle }),
     [theme, preference, setPreference, toggle],

package/templates/storefront/src/components/theme/theme-script.tsx

@@ -4,17 +4,14 @@ const themeScript = `
 (function () {
   try {
     var pref = localStorage.getItem("${STORAGE_KEY}");
-    var theme;
-    if (pref === "light" || pref === "dark") {
-      theme = pref;
-    } else {
-      theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-    }
+    var theme = (pref === "light" || pref === "dark")
+      ? pref
+      : "light";
     var root = document.documentElement;
     root.setAttribute("data-theme", theme);
     root.style.colorScheme = theme;
   } catch (e) {
-    document.documentElement.setAttribute("data-theme", "dark");
+    document.documentElement.setAttribute("data-theme", "light");
   }
 })();
 `;