Add theme switcher

rangle · Apr 19, 2024 · a9ef5bb · a9ef5bb
1 parent c3d3b33
commit a9ef5bb
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git 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 = ['photostop', 'saddles'];
 /** 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
@@ -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: any = [];
 
 export const useMutationObserver = () => {
   useEffect(() => {
@@ -88,7 +88,9 @@ export const useMutationObserver = () => {
           /** Cached computed styles to avoid recomputation */
           const computedStyle = getComputedStyle(element);
           const computedValues = references.reduce((acc, token) => {
-            const event = events.find((e) => computedStyle.getPropertyValue(e));
+            const event = events.find((e: any) =>
+              computedStyle.getPropertyValue(e)
+            );
             if (token === brandOrEventToken) {
               return {
                 ...acc,