Add landing page

Improved the landing-page theme control.

  What changed:

  - Turned the control into a compact right-aligned pill instead of a wide banner.
  - Reduced the label weight/size so it doesn’t dominate the viewport.
  - Hid the secondary helper text on mobile so it stays clean.

  Files updated:

  - metbit/docs/app/globals.css:150

  Verified:

  - npm run lint passed.
  - npm run build passed.

Author: aeiwz

docs/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="public/logo/Metbit-logo-only.svg" alt="metbit" width="180" />
+  <img src="public/logo/Metbit-logo-dark-mode.svg" alt="metbit" width="180" />
 </p>
 
 # metbit documentation site

docs/app/components/MetbitMark.tsx

@@ -1,11 +1,18 @@
 import Image from 'next/image'
 
-export default function MetbitMark() {
+type MetbitMarkProps = {
+  variant?: 'full' | 'compact'
+}
+
+export default function MetbitMark({ variant = 'full' }: MetbitMarkProps) {
+  const lightSrc = variant === 'compact' ? '/logo/Metbit-logo-only.svg' : '/logo/Metbit-logo-light-mode.svg'
+  const darkSrc = variant === 'compact' ? '/logo/Metbit-logo-only.svg' : '/logo/Metbit-logo-dark-mode.svg'
+
   return (
     <span className="metbitLogo" aria-hidden="true">
       <Image
         className="metbitLogoImage metbitLogoLight"
-        src="/logo/Metbit-logo-dark-mode.svg"
+        src={lightSrc}
         alt=""
         aria-hidden="true"
         fill
@@ -14,7 +21,7 @@ export default function MetbitMark() {
       />
       <Image
         className="metbitLogoImage metbitLogoDark"
-        src="/logo/Metbit-logo-dark-mode.svg"
+        src={darkSrc}
         alt=""
         aria-hidden="true"
         fill

docs/app/components/ThemeToggle.tsx

@@ -1,17 +1,50 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useSyncExternalStore } from 'react'
 import { FiSun, FiMonitor, FiMoon } from 'react-icons/fi'
 
 type Mode = 'light' | 'dark' | 'system'
+type ThemeSnapshot = 'light' | 'dark' | 'system-light' | 'system-dark'
 
 function getStoredMode(): Mode {
-  if (typeof window === 'undefined') return 'system'
   const stored = localStorage.getItem('theme')
-  if (stored === 'light' || stored === 'dark' || stored === 'system') {
-    return stored
+  return stored === 'light' || stored === 'dark' || stored === 'system' ? stored : 'system'
+}
+
+function getThemeSnapshot(): ThemeSnapshot {
+  if (typeof window === 'undefined') return 'system-light'
+  const stored = getStoredMode()
+  if (stored === 'system') {
+    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+    return isDark ? 'system-dark' : 'system-light'
   }
-  return 'system'
+  return stored
+}
+
+function subscribe(onStoreChange: () => void) {
+  if (typeof window === 'undefined') return () => {}
+
+  const mq = window.matchMedia('(prefers-color-scheme: dark)')
+  const onThemeChange = () => onStoreChange()
+
+  window.addEventListener('storage', onThemeChange)
+  window.addEventListener('themechange', onThemeChange)
+  mq.addEventListener?.('change', onThemeChange)
+
+  return () => {
+    window.removeEventListener('storage', onThemeChange)
+    window.removeEventListener('themechange', onThemeChange)
+    mq.removeEventListener?.('change', onThemeChange)
+  }
+}
+
+function snapshotToMode(snapshot: ThemeSnapshot): Mode {
+  return snapshot === 'light' || snapshot === 'dark' ? snapshot : 'system'
+}
+
+function snapshotToAppliedTheme(snapshot: ThemeSnapshot): Exclude<Mode, 'system'> {
+  if (snapshot === 'light' || snapshot === 'dark') return snapshot
+  return snapshot === 'system-dark' ? 'dark' : 'light'
 }
 
 function applyTheme(mode: Mode) {
@@ -26,24 +59,21 @@ function applyTheme(mode: Mode) {
 }
 
 export default function ThemeToggle() {
-  const [mode, setMode] = useState<Mode>(getStoredMode)
+  const snapshot = useSyncExternalStore<ThemeSnapshot>(
+    subscribe,
+    getThemeSnapshot,
+    () => 'system-light',
+  )
+  const mode = snapshotToMode(snapshot)
 
   useEffect(() => {
-    const current = getStoredMode()
-    applyTheme(current)
-
-    const mq = window.matchMedia('(prefers-color-scheme: dark)')
-    const onChange = () => {
-      if (getStoredMode() === 'system') applyTheme('system')
-    }
-    mq.addEventListener?.('change', onChange)
-    return () => mq.removeEventListener?.('change', onChange)
-  }, [])
+    applyTheme(snapshotToAppliedTheme(snapshot))
+  }, [snapshot])
 
   const choose = (m: Mode) => {
     localStorage.setItem('theme', m)
-    setMode(m)
     applyTheme(m)
+    window.dispatchEvent(new Event('themechange'))
   }
 
   return (

docs/app/components/VersionedDocsShell.tsx

@@ -59,7 +59,7 @@ export default function VersionedDocsShell({
       <header className="docsTopbar">
         <Link
           className="docsBrand"
-          href={`/docs/${encodeURIComponent(release.tag)}`}
+          href="/"
           aria-label="metbit documentation home"
         >
           <MetbitMark />