Theme Toggle Component

The ThemeToggle component provides the light/dark switch in the docs UI.

Where it lives

• File: components/theme-toggle.tsx

What it does

• Reads the active resolved theme using useTheme() from next-themes.
• On click, toggles from light to dark (and vice versa) with setTheme(...).
• Renders different SVG icons depending on the current theme:
  • Light mode icon is shown with [html.light_&]:block
  • Dark mode icon is shown with [html.dark_&]:block

Accessibility

• Includes <span className="sr-only">Toggle theme</span> so screen readers have a clear label.

Notes

• suppressHydrationWarning is applied to avoid hydration mismatch warnings between server and client theme state.