From 4cbe1f404e2a3966582c5bf47fff18bb32beca5a Mon Sep 17 00:00:00 2001
From: Owen <owenrees.dev@gmail.com>
Date: Fri, 29 May 2026 20:50:02 +0200
Subject: [PATCH] remove theme toggle adn add link to chessboard route

---
 src/components/Header.tsx      | 14 +-----
 src/components/ThemeToggle.tsx | 81 ----------------------------------
 2 files changed, 2 insertions(+), 93 deletions(-)
 delete mode 100644 src/components/ThemeToggle.tsx

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 4b558fb..0c9e3ea 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,5 +1,4 @@
 import { Link } from '@tanstack/react-router'
-import ThemeToggle from './ThemeToggle'
 
 export default function Header() {
   return (
@@ -24,20 +23,12 @@ export default function Header() {
             Home
           </Link>
           <Link
-            to="/about"
+            to="/chessboard"
             className="nav-link"
             activeProps={{ className: 'nav-link is-active' }}
           >
-            About
+            Chessboard
           </Link>
-          <a
-            href="https://tanstack.com/start/latest/docs/framework/react/overview"
-            className="nav-link"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Docs
-          </a>
         </div>
 
         <div className="ml-auto flex items-center gap-1.5 sm:gap-2">
@@ -70,7 +61,6 @@ export default function Header() {
             </svg>
           </a>
 
-          <ThemeToggle />
         </div>
       </nav>
     </header>
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
deleted file mode 100644
index 081ebe2..0000000
--- a/src/components/ThemeToggle.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { useEffect, useState } from 'react'
-
-type ThemeMode = 'light' | 'dark' | 'auto'
-
-function getInitialMode(): ThemeMode {
-  if (typeof window === 'undefined') {
-    return 'auto'
-  }
-
-  const stored = window.localStorage.getItem('theme')
-  if (stored === 'light' || stored === 'dark' || stored === 'auto') {
-    return stored
-  }
-
-  return 'auto'
-}
-
-function applyThemeMode(mode: ThemeMode) {
-  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-  const resolved = mode === 'auto' ? (prefersDark ? 'dark' : 'light') : mode
-
-  document.documentElement.classList.remove('light', 'dark')
-  document.documentElement.classList.add(resolved)
-
-  if (mode === 'auto') {
-    document.documentElement.removeAttribute('data-theme')
-  } else {
-    document.documentElement.setAttribute('data-theme', mode)
-  }
-
-  document.documentElement.style.colorScheme = resolved
-}
-
-export default function ThemeToggle() {
-  const [mode, setMode] = useState<ThemeMode>('auto')
-
-  useEffect(() => {
-    const initialMode = getInitialMode()
-    setMode(initialMode)
-    applyThemeMode(initialMode)
-  }, [])
-
-  useEffect(() => {
-    if (mode !== 'auto') {
-      return
-    }
-
-    const media = window.matchMedia('(prefers-color-scheme: dark)')
-    const onChange = () => applyThemeMode('auto')
-
-    media.addEventListener('change', onChange)
-    return () => {
-      media.removeEventListener('change', onChange)
-    }
-  }, [mode])
-
-  function toggleMode() {
-    const nextMode: ThemeMode =
-      mode === 'light' ? 'dark' : mode === 'dark' ? 'auto' : 'light'
-    setMode(nextMode)
-    applyThemeMode(nextMode)
-    window.localStorage.setItem('theme', nextMode)
-  }
-
-  const label =
-    mode === 'auto'
-      ? 'Theme mode: auto (system). Click to switch to light mode.'
-      : `Theme mode: ${mode}. Click to switch mode.`
-
-  return (
-    <button
-      type="button"
-      onClick={toggleMode}
-      aria-label={label}
-      title={label}
-      className="rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-3 py-1.5 text-sm font-semibold text-[var(--sea-ink)] shadow-[0_8px_22px_rgba(30,90,72,0.08)] transition hover:-translate-y-0.5"
-    >
-      {mode === 'auto' ? 'Auto' : mode === 'dark' ? 'Dark' : 'Light'}
-    </button>
-  )
-}