Add theme toggle functionality and update styles for dark mode

Author: NickScherbakov

src/components/Hero.tsx

@@ -1,4 +1,5 @@
 import { Sparkle, ArrowRight, Code } from '@phosphor-icons/react'
+import { ModeToggle } from "@/components/mode-toggle"
 
 export function Hero() {
   const handleScroll = (e: React.MouseEvent<HTMLAnchorElement>, targetId: string) => {
@@ -16,6 +17,9 @@ export function Hero() {
 
   return (
     <div className="relative border-b border-border bg-gradient-to-b from-muted/30 to-background">
+      <div className="absolute top-6 right-6">
+        <ModeToggle />
+      </div>
       <div className="max-w-3xl mx-auto px-6 py-16 md:py-24">
         <div className="space-y-8">
           <div className="flex items-center gap-4">

src/components/mode-toggle.tsx

@@ -0,0 +1,36 @@
+import { Moon, Sun } from "@phosphor-icons/react"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { useTheme } from "@/components/theme-provider"
+
+export function ModeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

src/components/theme-provider.tsx

@@ -0,0 +1,74 @@
+import { createContext, useContext, useEffect, useState } from "react"
+
+type Theme = "dark" | "light" | "system"
+
+type ThemeProviderProps = {
+  children: React.ReactNode
+  defaultTheme?: Theme
+  storageKey?: string
+}
+
+type ThemeProviderState = {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}
+
+const initialState: ThemeProviderState = {
+  theme: "system",
+  setTheme: () => null,
+}
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "vite-ui-theme",
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  )
+
+  useEffect(() => {
+    const root = window.document.documentElement
+
+    root.classList.remove("light", "dark")
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light"
+
+      root.classList.add(systemTheme)
+      root.setAttribute("data-appearance", systemTheme)
+      return
+    }
+
+    root.classList.add(theme)
+    root.setAttribute("data-appearance", theme)
+  }, [theme])
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme)
+      setTheme(theme)
+    },
+  }
+
+  return (
+    <ThemeProviderContext.Provider value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  )
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext)
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider")
+
+  return context
+}

src/index.css

@@ -48,9 +48,67 @@
   --input: oklch(0.90 0.005 270);
   --ring: oklch(0.52 0.18 275);
 
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+
   --radius: 0.5rem;
 }
 
+[data-appearance="dark"] {
+  --background: oklch(0.14 0.005 275);
+  --foreground: oklch(0.98 0.003 270);
+
+  --card: oklch(0.14 0.005 275);
+  --card-foreground: oklch(0.98 0.003 270);
+  
+  --popover: oklch(0.14 0.005 275);
+  --popover-foreground: oklch(0.98 0.003 270);
+
+  --primary: oklch(0.52 0.18 275);
+  --primary-foreground: oklch(0.99 0 0);
+
+  --secondary: oklch(0.25 0.02 270);
+  --secondary-foreground: oklch(0.98 0.003 270);
+
+  --muted: oklch(0.20 0.005 270);
+  --muted-foreground: oklch(0.65 0.02 275);
+
+  --accent: oklch(0.62 0.20 245);
+  --accent-foreground: oklch(0.99 0 0);
+
+  --destructive: oklch(0.55 0.22 27);
+  --destructive-foreground: oklch(0.99 0 0);
+
+  --border: oklch(0.25 0.005 270);
+  --input: oklch(0.25 0.005 270);
+  --ring: oklch(0.52 0.18 275);
+
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
 @theme {
   --color-background: var(--background);
   --color-foreground: var(--foreground);

src/main.css

@@ -31,6 +31,7 @@
 /*
   ---break---
 */
+/*
 :root {
   --radius: 0.625rem;
   --background: oklch(1 0 0);
@@ -65,10 +66,12 @@
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
 }
+*/
 
 /*
   ---break---
 */
+/*
 .dark {
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
@@ -102,6 +105,7 @@
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
 }
+*/
 
 /*
   ---break---

src/main.tsx

@@ -4,11 +4,14 @@ import "@github/spark/spark"
 
 import App from './App.tsx'
 import { ErrorFallback } from './ErrorFallback.tsx'
+import { ThemeProvider } from "@/components/theme-provider"
 
 import "./main.css"
 
 createRoot(document.getElementById('root')!).render(
   <ErrorBoundary FallbackComponent={ErrorFallback}>
-    <App />
+    <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
+      <App />
+    </ThemeProvider>
    </ErrorBoundary>
 )