feat: Dark theme switch (Without persistence)

Signed-off-by: Tom Lanser <[email protected]>

packages/toolbox-ui/src/ToolboxApp.tsx

@@ -1,9 +1,9 @@
-import type { MantineThemeOverride } from '@mantine/core'
+import type { ColorScheme, MantineThemeOverride } from '@mantine/core'
 import type { RouterProviderProps } from 'react-router-dom'
 
-import { MantineProvider } from '@mantine/core'
+import { ColorSchemeProvider, MantineProvider } from '@mantine/core'
 import { NotificationsProvider } from '@mantine/notifications'
-import React from 'react'
+import React, { useState } from 'react'
 import { RouterProvider } from 'react-router-dom'
 
 import { GlobalErrorHandler } from './components/GlobalErrorHandler'
@@ -12,11 +12,11 @@ interface ToolboxAppProps {
   router: RouterProviderProps['router']
 }
 
-const mantineTheme: MantineThemeOverride = {
-  colorScheme: 'dark',
+const toolboxTheme = (colorScheme: ColorScheme): MantineThemeOverride => ({
+  colorScheme: colorScheme,
   colors: {
     neutral: ['#333333'],
-    secondary: ['#f5f5f5'],
+    secondary: ['#557EBA'],
     background: ['#F5F5F4'],
     animoWhite: ['#F5F5F4'],
     animoCoral: ['#EA6767'],
@@ -27,16 +27,21 @@ const mantineTheme: MantineThemeOverride = {
   },
 
   fontFamily: 'Montserrat, sans-serif',
-}
+})
 
 export const ToolboxApp = ({ router }: ToolboxAppProps) => {
+  const [colorScheme, setColorScheme] = useState<'dark' | 'light'>('dark')
+  const toggleColorScheme = (value?: ColorScheme) => setColorScheme(value || colorScheme === 'dark' ? 'light' : 'dark')
+
   return (
-    <MantineProvider withGlobalStyles withNormalizeCSS theme={mantineTheme}>
-      <NotificationsProvider position="top-right">
-        <GlobalErrorHandler>
-          <RouterProvider router={router} />
-        </GlobalErrorHandler>
-      </NotificationsProvider>
-    </MantineProvider>
+    <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
+      <MantineProvider withGlobalStyles withNormalizeCSS theme={toolboxTheme(colorScheme)}>
+        <NotificationsProvider position="top-right">
+          <GlobalErrorHandler>
+            <RouterProvider router={router} />
+          </GlobalErrorHandler>
+        </NotificationsProvider>
+      </MantineProvider>
+    </ColorSchemeProvider>
   )
 }

packages/toolbox-ui/src/contexts/AgentManagerContext.tsx

@@ -14,6 +14,7 @@ export interface IAgentContext {
   currentAgentId?: string
   setCurrentAgentId: (id: string | undefined) => void
   setAgents: Dispatch<SetStateAction<IAgentContext['agents']>>
+  logout: () => void
 }
 
 const AgentManagerContext = createContext<IAgentContext>({} as IAgentContext)
@@ -32,13 +33,18 @@ export const AgentManagerProvider = ({ children }: { children?: ReactNode }) =>
   const [currentAgentId, setCurrentAgentId] = useState<string>()
   const [agents, setAgents] = useState<IAgentRecord[]>([])
 
+  const logout = () => {
+    setCurrentAgentId(undefined)
+  }
+
   return (
     <AgentManagerContext.Provider
       value={{
         setCurrentAgentId,
         currentAgentId,
         agents,
         setAgents,
+        logout,
       }}
     >
       {children}

packages/toolbox-ui/src/layout/LayoutActions.tsx

@@ -1,65 +1,14 @@
-import { createStyles } from '@mantine/core'
-import { IconLogout } from '@tabler/icons'
+import { Group } from '@mantine/core'
 import React from 'react'
 
-import { useAgentManager } from '../contexts/AgentManagerContext'
-import { useNavigation } from '../hooks/useNavigation'
-
-const useStyles = createStyles((theme, _params, getRef) => {
-  const icon = getRef('icon')
-
-  return {
-    link: {
-      ...theme.fn.focusStyles(),
-      display: 'flex',
-      alignItems: 'center',
-      textDecoration: 'none',
-      fontSize: theme.fontSizes.sm,
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[7],
-      padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
-      borderRadius: theme.radius.sm,
-      fontWeight: 500,
-      cursor: 'pointer',
-
-      '&:hover': {
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
-        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
-
-        [`& .${icon}`]: {
-          color: theme.colorScheme === 'dark' ? theme.white : theme.black,
-        },
-      },
-    },
-
-    linkIcon: {
-      ref: icon,
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
-      marginRight: theme.spacing.sm,
-    },
-  }
-})
+import { ColorSchemeSwitch } from './actions/ColorSchemeSwitch'
+import { LogoutAction } from './actions/LogoutAction'
 
 export const LayoutActions = () => {
-  const { classes } = useStyles()
-  const navigation = useNavigation()
-  const { setCurrentAgentId } = useAgentManager()
-
-  const signOut = () => {
-    navigation.navigate('/')
-
-    setCurrentAgentId(undefined)
-  }
-
   return (
-    <a
-      className={classes.link}
-      onClick={(event) => {
-        event.preventDefault()
-        signOut()
-      }}
-    >
-      <IconLogout className={classes.linkIcon} stroke={1.5} />
-      <span>Logout</span>
-    </a>
+    <Group position="apart">
+      <LogoutAction />
+      <ColorSchemeSwitch />
+    </Group>
   )
 }

packages/toolbox-ui/src/layout/actions/ColorSchemeSwitch.tsx

@@ -0,0 +1,21 @@
+import { ActionIcon, createStyles, useMantineColorScheme } from '@mantine/core'
+import { IconMoonStars, IconSun } from '@tabler/icons'
+import React from 'react'
+
+const useStyles = createStyles((theme) => ({
+  icon: {
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+    color: theme.colorScheme === 'dark' ? theme.colors.yellow[4] : theme.colors.blue[6],
+  },
+}))
+
+export const ColorSchemeSwitch = () => {
+  const { classes } = useStyles()
+  const { colorScheme, toggleColorScheme } = useMantineColorScheme()
+
+  return (
+    <ActionIcon onClick={() => toggleColorScheme()} size="lg" className={classes.icon}>
+      {colorScheme === 'dark' ? <IconSun size={18} /> : <IconMoonStars size={18} />}
+    </ActionIcon>
+  )
+}

packages/toolbox-ui/src/layout/actions/LogoutAction.tsx

@@ -0,0 +1,58 @@
+import { createStyles, UnstyledButton } from '@mantine/core'
+import { IconLogout } from '@tabler/icons'
+import React from 'react'
+
+import { useAgentManager } from '../../contexts/AgentManagerContext'
+import { useNavigation } from '../../hooks/useNavigation'
+
+const useStyles = createStyles((theme, _params, getRef) => {
+  const icon = getRef('icon')
+
+  return {
+    link: {
+      ...theme.fn.focusStyles(),
+      display: 'flex',
+      alignItems: 'center',
+      textDecoration: 'none',
+      fontSize: theme.fontSizes.sm,
+      color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[7],
+      padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
+      borderRadius: theme.radius.sm,
+      fontWeight: 500,
+      cursor: 'pointer',
+
+      '&:hover': {
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+
+        [`& .${icon}`]: {
+          color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+        },
+      },
+    },
+
+    linkIcon: {
+      ref: icon,
+      color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
+      marginRight: theme.spacing.sm,
+    },
+  }
+})
+
+export const LogoutAction = () => {
+  const { classes } = useStyles()
+  const navigation = useNavigation()
+  const { logout } = useAgentManager()
+
+  const signOut = () => {
+    navigation.navigate('/')
+    logout()
+  }
+
+  return (
+    <UnstyledButton className={classes.link} onClick={signOut}>
+      <IconLogout className={classes.linkIcon} stroke={1.5} />
+      <span>Logout</span>
+    </UnstyledButton>
+  )
+}