Adds dark theme support to the website with a toggle in the app bar that cycles through System/Light/Dark modes, defaulting to system preference. Theme state is managed using Zustand for optimal performance and simplicity. All components and pages now have comprehensive dark mode support with proper Tailwind CSS classes.

Changes

• Tailwind configuration: Added darkMode: 'class' to enable manual theme control
• Zustand store: Lightweight state management for theme with localStorage persistence
• ThemeToggle component: Cycling button (System → Light → Dark) with appropriate icons (Monitor/Sun/Moon)
• Layout integration: Theme toggle positioned in app bar between navigation and GitHub link
• FOUC prevention: Inline script in HTML head applies theme before React hydration
• Component dark mode support: Added comprehensive dark mode Tailwind classes across all components and pages
• Theme-aware syntax highlighting: Code blocks dynamically switch between light and dark color schemes

Implementation

Theme management uses Zustand instead of React Context for better performance and simpler API:

type Theme = "light" | "dark" | "system"

// Zustand store
export const useTheme = create<ThemeStore>((set) => ({
    theme: (localStorage.getItem("theme") as Theme) || "system",
    setTheme: (theme: Theme) => {
        localStorage.setItem("theme", theme)
        set({ theme })
    },
}))

// System mode respects OS preference
if (theme === "system") {
  const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches
  root.classList.add(isDark ? "dark" : "light")
}

Benefits of Zustand:

• No provider wrapper needed - cleaner component tree
• Better performance through selective subscriptions
• Less boilerplate code (~20 lines removed)
• Smaller bundle size (~1KB)

Theme preference persists to localStorage and survives page reloads.

Dark Mode Enhancements

Components Updated:

• Home.tsx: Feature icons and links with dark mode color variants (dark:text-blue-400, dark:text-violet-400, dark:text-green-400)
• Markdown.tsx: Dynamic syntax highlighting that switches between atomOneDark (dark) and docco (light) themes
• Components.tsx: Code blocks with theme-aware backgrounds and borders
• All existing components: Already included dark mode classes (Card, Button, Tabs, etc.)

All pages (Home, Components, Docs) now provide a cohesive dark mode experience with proper contrast and accessibility.

Screenshots

Light theme:

Dark theme (Home):

Dark theme (Components):

Dark theme (Docs):

• Fixes Website: support dark theme #74

• Fixes Website: support dark theme #74

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.