docs: add dark light switcher for patternhub (#4261)

Author: nmerget

showcases/patternhub/components/default-page.tsx

@@ -1,11 +1,18 @@
 import { useRouter } from 'next/router';
 import dynamic from 'next/dynamic';
-import { Fragment, type PropsWithChildren, useEffect, useState } from 'react';
+import {
+	Fragment,
+	type PropsWithChildren,
+	useCallback,
+	useEffect,
+	useState
+} from 'react';
 import hljs from 'highlight.js';
 import Link from 'next/link';
 import {
 	DBBrand,
-	DBButton,
+	DBSwitch,
+	DBTooltip,
 	DBHeader,
 	DBPage,
 	DBSection,
@@ -20,6 +27,9 @@ import {
 import Navigation from './navigation';
 import VersionSwitcher from './version-switcher';
 
+const preferDark = '(prefers-color-scheme: dark)';
+const colorModeKey = 'db-ux-mode';
+
 const DefaultPage = ({
 	children,
 	noNavigation
@@ -38,6 +48,25 @@ const DefaultPage = ({
 	const [breadcrumb, setBreadcrumb] = useState<NavigationItem[]>();
 	const router = useRouter();
 
+	const [mode, setMode] = useState<boolean>(
+		localStorage.getItem(colorModeKey) === null
+			? globalThis.matchMedia?.(preferDark).matches
+			: localStorage.getItem(colorModeKey) === 'dark'
+	);
+
+	const setColorMode = useCallback((dark: boolean) => {
+		localStorage.setItem(colorModeKey, dark ? 'dark' : 'light');
+		setMode(dark);
+	}, []);
+
+	useEffect(() => {
+		globalThis
+			.matchMedia(preferDark)
+			.addEventListener('change', (event) => {
+				setColorMode(event.matches);
+			});
+	}, []);
+
 	useEffect(() => {
 		hljs.configure({
 			languages: [
@@ -106,6 +135,7 @@ const DefaultPage = ({
 			)}
 			{router.isReady && !fullscreen && (
 				<DBPage
+					data-mode={mode ? 'dark' : 'light'}
 					fadeIn
 					variant="fixed"
 					header={
@@ -118,12 +148,20 @@ const DefaultPage = ({
 								</DBBrand>
 							}
 							primaryAction={
-								<DBButton
-									icon="magnifying_glass"
-									variant="ghost"
-									noText>
-									Search
-								</DBButton>
+								<DBSwitch
+									checked={mode}
+									visualAid
+									icon="sun"
+									iconAfter="moon"
+									showLabel={false}
+									onChange={() => {
+										setColorMode(!mode);
+									}}>
+									<DBTooltip>
+										Switch color scheme (light/dark)
+									</DBTooltip>
+									Switch color scheme (light/dark)
+								</DBSwitch>
 							}
 							secondaryAction={<VersionSwitcher />}>
 							<Navigation />

showcases/patternhub/styles/globals.scss

@@ -633,3 +633,9 @@ h6 {
 		}
 	}
 }
+
+.db-switch {
+	> .db-tooltip {
+		min-inline-size: variables.$db-sizing-2xl;
+	}
+}