feature: sk-react-toolkit holds the server helpers, web components and Vite font plugin shared by manage-ui and sql-query-webui.

web/ThemeMenu.tsx

@@ -0,0 +1,26 @@
+import DarkMode from '@mui/icons-material/DarkMode'
+import LightMode from '@mui/icons-material/LightMode'
+import SettingsBrightness from '@mui/icons-material/SettingsBrightness'
+import { IconButton, Tooltip, useColorScheme } from '@mui/material'
+import type { ReactNode } from 'react'
+
+type Mode = 'light' | 'dark' | 'system'
+
+const NEXT: Record<Mode, Mode> = { light: 'dark', dark: 'system', system: 'light' }
+
+const ICONS: Record<Mode, ReactNode> = { light: <LightMode />, dark: <DarkMode />, system: <SettingsBrightness /> }
+
+/** An icon button cycling light, dark and system theme. MUI stores the choice; mode is undefined on the first render. */
+export default function ThemeMenu() {
+  const { mode, setMode } = useColorScheme()
+  if (!mode) {
+    return null
+  }
+  return (
+    <Tooltip title={`Theme: ${mode}. Switch to ${NEXT[mode]}.`}>
+      <IconButton aria-label={`theme ${mode}, switch to ${NEXT[mode]}`} onClick={() => setMode(NEXT[mode])}>
+        {ICONS[mode]}
+      </IconButton>
+    </Tooltip>
+  )
+}