diff --git a/docs/app/actions/theme.ts b/docs/app/actions/theme.ts new file mode 100644 index 00000000..be847e7e --- /dev/null +++ b/docs/app/actions/theme.ts @@ -0,0 +1,15 @@ +'use server' + +import type { ColorModes } from '@cerberus-design/react' +import type { ThemeName } from '@/styled-system/themes' +import { getCookie } from './cookies' + +export async function getCachedTheme() { + const themeName = (await getCookie('theme')) as ThemeName + const colorModeName = (await getCookie('colorMode')) as ColorModes | undefined + return { + themeName, + colorModeName, + cached: Boolean(themeName && colorModeName), + } +} diff --git a/docs/app/api/route.ts b/docs/app/api/route.ts new file mode 100644 index 00000000..08f29aa6 --- /dev/null +++ b/docs/app/api/route.ts @@ -0,0 +1,15 @@ +import { getCachedTheme } from '../actions/theme' +import { setCookie } from '../actions/cookies' + +export async function GET() { + const { themeName, colorModeName, cached } = await getCachedTheme() + + if (!cached) { + await setCookie('theme', themeName) + await setCookie('colorMode', colorModeName) + } + + return new Response( + JSON.stringify({ themeName, colorModeName, success: true }), + ) +} diff --git a/docs/app/components/ModeToggle.tsx b/docs/app/components/ModeToggle.tsx index 18312ea9..469f5f0b 100644 --- a/docs/app/components/ModeToggle.tsx +++ b/docs/app/components/ModeToggle.tsx @@ -13,10 +13,13 @@ export function ModeToggle() { return mode === 'light' ? 'Switch to dark mode' : 'Switch to light mode' }, [mode]) - const handleUpdateMode = useCallback((e: MouseEvent) => { - const currentMode = e.currentTarget.value - updateMode(currentMode === 'light' ? 'dark' : 'light') - }, []) + const handleUpdateMode = useCallback( + (e: MouseEvent) => { + const currentMode = e.currentTarget.value + updateMode(currentMode === 'light' ? 'dark' : 'light') + }, + [updateMode], + ) return (