test adding new theme toggle

apps/demo/app/routes/index.tsx

@@ -30,11 +30,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 +46,13 @@ export default function Index() {
     setMode(mode ^ 1);
   };
 
+  const toggleTheme = () => {
+    const themeElement = document.querySelector(`.${themes[theme]}`);
+    themeElement?.classList.remove(themes[theme]);
+    themeElement?.classList.add(themes[theme ^ 1]);
+    setTheme(theme ^ 1);
+  };
+
   return (
     <RadiusAutoLayout
       direction="vertical"
@@ -91,6 +100,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 ? DarkMode : LightMode) as IconType,
+            },
           ]}
           logos={
             <>