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(() => {