Add theme toggle and update MineGeo branding

components/Brand.tsx

@@ -8,10 +8,16 @@ export function Brand() {
   const { settings } = useSiteSettings();
   return (
     <Link href="/" className="brand" aria-label={t("MineGeo home")}>
-      <span className="brand-cube">
-        <span />
+      <img
+        className="brand-mark"
+        src="/images/minegeo-mark.webp"
+        width={42}
+        height={46}
+        alt=""
+      />
+      <span className="brand-wordmark">
+        Mine<span>Geo</span>
       </span>
-      Mine<span>Geo</span>
       {settings.betaBadgeEnabled && <sup>BETA</sup>}
     </Link>
   );

components/Shell.tsx

@@ -7,6 +7,7 @@ import { user } from "@/lib/supabase";
 import { Brand } from "./Brand";
 import { SiteNav } from "./SiteNav";
 import { ReportBugButton } from "./ReportBugButton";
+import { ThemeToggle } from "./ThemeToggle";
 export async function Header() {
   const { t } = await getI18n();
   const account = await user();
@@ -16,6 +17,7 @@ export async function Header() {
         <Brand />
         <SiteNav />
         <div className="header-actions">
+          <ThemeToggle />
           <ReportBugButton />
           <Link
             href={account ? "/dashboard" : "/log-in"}
@@ -37,6 +39,7 @@ export async function Footer() {
         <p>{t("A familiar world. A whole new perspective.")}</p>
       </div>
       <div>
+        <ThemeToggle />
         <LanguageSwitcher />
         <Link href="/downloads">{t("Tools & downloads")}</Link>
         <Link href="/leaderboard">{t("Leaderboard")}</Link>

components/ThemeToggle.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+import { Moon, Sun } from "lucide-react";
+import { useI18n } from "./I18nProvider";
+import { themeStorageKey, type Theme } from "@/shared/theme";
+
+function currentTheme(): Theme {
+  return document.documentElement.dataset.theme === "light" ? "light" : "dark";
+}
+
+function subscribe(onChange: () => void) {
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-theme"],
+  });
+  function syncStorage(event: StorageEvent) {
+    if (event.key === themeStorageKey || event.key === null) {
+      document.documentElement.dataset.theme =
+        event.newValue === "light" ? "light" : "dark";
+    }
+  }
+  window.addEventListener("storage", syncStorage);
+  return () => {
+    observer.disconnect();
+    window.removeEventListener("storage", syncStorage);
+  };
+}
+
+export function ThemeToggle() {
+  const { t } = useI18n();
+  const theme = useSyncExternalStore(subscribe, currentTheme, () => "dark");
+  const label = t(
+    theme === "light" ? "Turn on dark mode" : "Turn on light mode",
+  );
+  function toggle() {
+    const next = currentTheme() === "light" ? "dark" : "light";
+    document.documentElement.dataset.theme = next;
+    try {
+      localStorage.setItem(themeStorageKey, next);
+    } catch {
+      // Switching still works for this visit if browser storage is unavailable.
+    }
+  }
+  return (
+    <button
+      type="button"
+      className="theme-toggle"
+      onClick={toggle}
+      aria-label={label}
+      title={label}
+      aria-pressed={theme === "light"}
+    >
+      <Sun className="theme-sun" size={19} aria-hidden="true" />
+      <Moon className="theme-moon" size={19} aria-hidden="true" />
+    </button>
+  );
+}