From 52cf6b7c5daff23ee524d6d8d9e58712bab400bf Mon Sep 17 00:00:00 2001 From: Stephanie Zeng <stephanie.zeng@rangle.io> Date: Fri, 19 Apr 2024 11:32:59 -0400 Subject: [PATCH] Add theme switcher --- apps/demo/app/routes/index.tsx | 22 +++++++++++++++++++++- apps/demo/app/utils/demo.utils.ts | 2 +- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/apps/demo/app/routes/index.tsx b/apps/demo/app/routes/index.tsx index 5104938f..52c79d64 100644 --- a/apps/demo/app/routes/index.tsx +++ b/apps/demo/app/routes/index.tsx @@ -16,7 +16,8 @@ import { Instagram, Youtube, LightMode, - DarkMode, + ArrowLeft, + DarkMode } from '@rangle/radius-foundations'; import { radiusTokens } from '@rangle/radius-foundations'; import { @@ -30,11 +31,13 @@ import { useIsScrolled } from '../../hooks/use-is-scrolled'; type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>; const modes = ['dark-mode', 'light-mode']; +const themes = ['saddles', 'photostop']; /** This should be integrated into a Page layout component, currently a WIP in design */ const pageMaxWidth = 1280; export default function Index() { const [mode, setMode] = useState(1); + const [theme, setTheme] = useState(1); const isScrolled = useIsScrolled(); const toggleMode = () => { @@ -44,6 +47,14 @@ export default function Index() { setMode(mode ^ 1); }; + const toggleTheme = () => { + const themeElement = document.querySelector(`.${themes[theme]}`); + themeElement?.classList.remove('saddles-halloween'); + themeElement?.classList.remove(themes[theme]); + themeElement?.classList.add(themes[theme ^ 1]); + setTheme(theme ^ 1); + }; + return ( <RadiusAutoLayout direction="vertical" @@ -91,6 +102,15 @@ export default function Index() { onClick: toggleMode, icon: (mode ? DarkMode : LightMode) as IconType, }, + { + 'aria-label': theme + ? 'Switch to New Theme' + : 'Switch to Default Theme', + title: theme ? 'Switch to New Theme' : 'Switch to Default Theme', + as: 'button', + onClick: toggleTheme, + icon: (theme ? ArrowLeft : ArrowRight) as IconType, + }, ]} logos={ <> diff --git a/apps/demo/app/utils/demo.utils.ts b/apps/demo/app/utils/demo.utils.ts index f3b6c46f..9b9c6a33 100644 --- a/apps/demo/app/utils/demo.utils.ts +++ b/apps/demo/app/utils/demo.utils.ts @@ -9,7 +9,7 @@ const voidCallback = () => {}; */ const brandOrEventToken = '{--brandOrEvent}'; /** Event tokens to look for to identify if an event is active */ -const events = ['--halloweenevent']; +const events = ['']; export const useMutationObserver = () => { useEffect(() => {