@taruvi/navkit 0.0.10 → 0.0.11

package/.claude/settings.local.json

@@ -1,7 +1,10 @@
 {
   "permissions": {
     "allow": [
-      "Bash(npm run dev:*)"
+      "Bash(npm run dev:*)",
+      "WebSearch",
+      "Bash(npm run build:*)",
+      "Bash(npm install:*)"
     ],
     "deny": [],
     "ask": []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taruvi/navkit",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "main": "src/App.tsx",
   "type": "module",
   "scripts": {
@@ -16,22 +16,35 @@
     "@fortawesome/free-regular-svg-icons": ">=6 <7",
     "@fortawesome/free-solid-svg-icons": ">=6 <7",
     "@fortawesome/react-fontawesome": ">=0.2 <1",
+    "@mui/icons-material": ">=5 <8",
+    "@mui/material": ">=5 <8",
     "@taruvi/sdk": ">=1 <2",
-    "react": ">=18 <20",
-    "@mui/material": ">=5 <8"
+    "react": ">=18 <20"
   },
   "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@eslint/js": "^9.36.0",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-regular-svg-icons": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/react-fontawesome": "^3.1.1",
+    "@mui/material": "^7.3.6",
+    "@taruvi/sdk": "^1.1.7",
     "@types/node": "^24.6.0",
     "@types/react": "^19.1.16",
     "@vitejs/plugin-react": "^5.0.4",
+    "axios": "^1.13.2",
     "babel-plugin-react-compiler": "^19.1.0-rc.3",
     "eslint": "^9.36.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.22",
     "globals": "^16.4.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.45.0",
-    "vite": "^7.1.7"
+    "vite": "^7.1.7",
+    "@mui/icons-material": "^7.3.6"
   }
-}
+}

package/src/App.styles.ts

@@ -1,4 +1,5 @@
-import { colours, dimensions } from './styles/variables'
+import { colours, dimensions, getColors } from './styles/variables'
+import type { ThemeMode } from './styles/variables'
 
 export const appStyles = {
   appBar: {
@@ -63,3 +64,72 @@ export const appStyles = {
     zIndex: 10,
   },
 }
+
+export const getAppStyles = (mode: ThemeMode) => {
+  const colors = getColors(mode)
+  return {
+    appBar: {
+      height: dimensions.navHeight,
+    },
+    toolbar: {
+      backgroundColor: colors.bg.white,
+    },
+    leftSection: {
+      display: 'flex',
+      flexGrow: 1,
+      alignItems: 'center',
+      justifyContent: 'start',
+      gap: '10px',
+    },
+    logo: {
+      maxHeight: '40px',
+      cursor: 'pointer',
+    },
+    defaultLogo: {
+      maxHeight: '22px',
+      cursor: 'pointer',
+    },
+    rightSection: {
+      display: 'flex',
+      gap: '10px',
+      alignItems: 'center',
+    },
+    modal: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    chatCard: {
+      width: '90vw',
+      maxWidth: '1200px',
+      height: '80vh',
+      outline: 'none',
+      overflow: 'hidden',
+      position: 'relative' as const,
+      backgroundColor: colors.bg.white,
+    },
+    chatHeader: {
+      position: 'absolute' as const,
+      top: 0,
+      right: 0,
+      zIndex: 1400,
+      padding: '8px',
+    },
+    chatOpenButton: {
+      backgroundColor: colors.bg.white,
+      '&:hover': {
+        backgroundColor: colors.bg.light,
+      },
+    },
+    iconStyle: {
+      cursor: 'pointer',
+      fontSize: '20px',
+      color: colors.text.secondary,
+    },
+    backdrop: {
+      position: "absolute" as const,
+      inset: 0,
+      zIndex: 10,
+    },
+  }
+}

package/src/App.tsx

@@ -5,13 +5,14 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { useState } from "react"
 import { AppLauncher, Profile, ProfileMenu, Shortcuts, ShortcutsMenu, MattermostChat } from "./components"
 import { Box, Modal, Card } from "@mui/material"
-import { appStyles } from "./App.styles"
+import { getAppStyles } from "./App.styles"
 import { NavkitProvider, useNavigation } from "./NavkitContext"
 import defaultLogo from "./assets/taruvi-logo.png"
 import type { Client } from "@taruvi/sdk"
 
 const NavkitContent = () => {
-  const { isUserAuthenticated, siteSettings, userData, appsList, jwtToken } = useNavigation()
+  const { isUserAuthenticated, siteSettings, userData, appsList, jwtToken, themeMode } = useNavigation()
+  const styles = getAppStyles(themeMode)
   const [showAppLauncher, setShowAppLauncher] = useState<boolean>(false)
   const [showProfileMenu, setShowProfileMenu] = useState<boolean>(false)
   const [showShortcutsMenu, setShowShortcutsMenu] = useState<boolean>(false)
@@ -21,7 +22,7 @@ const NavkitContent = () => {
     <>
       {(showAppLauncher || showProfileMenu || showShortcutsMenu) && (
         <div
-          style={appStyles.backdrop}
+          style={styles.backdrop}
           onClick={() => {
             setShowAppLauncher(false)
             setShowProfileMenu(false)
@@ -29,21 +30,21 @@ const NavkitContent = () => {
           }}
         />
       )}
-      <AppBar position="static" sx={appStyles.appBar}>
-        <Toolbar sx={appStyles.toolbar}>
-          <Box component={"div"} sx={appStyles.leftSection}>
+      <AppBar position="static" sx={styles.appBar}>
+        <Toolbar sx={styles.toolbar}>
+          <Box component={"div"} sx={styles.leftSection}>
             {isUserAuthenticated && appsList.length > 0 &&
               <IconButton onClick={() => setShowAppLauncher(!showAppLauncher)}>
-                <FontAwesomeIcon icon={["fas", "th"]} style={appStyles.iconStyle} />
+                <FontAwesomeIcon icon={["fas", "th"]} style={styles.iconStyle} />
               </IconButton>
             }
             <img
-              style={(siteSettings?.logo && siteSettings.logo !== '') ? appStyles.logo : appStyles.defaultLogo}
+              style={(siteSettings?.logo && siteSettings.logo !== '') ? styles.logo : styles.defaultLogo}
               src={(siteSettings?.logo && siteSettings.logo !== '') ? siteSettings.logo : defaultLogo}
               onClick={() => window.location.href = siteSettings.frontendUrl || '/desk'}
             />
           </Box>
-          <Box component={'div'} sx={appStyles.rightSection}>
+          <Box component={'div'} sx={styles.rightSection}>
             <Shortcuts
               showChat={setShowChat}
               onMenuToggle={() => setShowShortcutsMenu(!showShortcutsMenu)}
@@ -77,13 +78,13 @@ const NavkitContent = () => {
         <Modal
           open={showChat}
           onClose={() => setShowChat(false)}
-          sx={appStyles.modal}
+          sx={styles.modal}
         >
-          <Card sx={appStyles.chatCard}>
-            <Box sx={appStyles.chatHeader}>
+          <Card sx={styles.chatCard}>
+            <Box sx={styles.chatHeader}>
               <IconButton
                 onClick={() => window.open(siteSettings.mattermostUrl, '_blank')}
-                sx={appStyles.chatOpenButton}
+                sx={styles.chatOpenButton}
               >
                 <FontAwesomeIcon icon={["fas", "external-link-alt"]} style={{ fontSize: '10px' }} />
               </IconButton>
@@ -101,9 +102,14 @@ const NavkitContent = () => {
   )
 }
 
-const Navkit = ({ client }: { client: Client }) => {
+interface NavkitProps {
+  client: Client
+  getTheme?: (theme: 'light' | 'dark') => void
+}
+
+const Navkit = ({ client, getTheme }: NavkitProps) => {
   return (
-    <NavkitProvider client={client}>
+    <NavkitProvider client={client} onThemeChange={getTheme}>
       <NavkitContent />
     </NavkitProvider>
   )

package/src/NavkitContext.tsx

@@ -1,13 +1,25 @@
 import { createContext, startTransition, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import type { AppData, NavigationContextType, NavkitProviderProps, SiteSettings, UserData } from './types'
+import type { ThemeMode } from './styles/variables'
 import { User, Settings, Auth } from "@taruvi/sdk"
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
 import { far } from '@fortawesome/free-regular-svg-icons'
 
+const THEME_STORAGE_KEY = 'navkit-theme-mode'
+
+const getInitialTheme = (): ThemeMode => {
+  if (typeof window !== 'undefined') {
+    const stored = localStorage.getItem(THEME_STORAGE_KEY)
+    if (stored === 'dark' || stored === 'light') return stored
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) return 'dark'
+  }
+  return 'light'
+}
+
 export const NavigationContext = createContext<NavigationContextType | undefined>(undefined)
 
-export const NavkitProvider = ({ children, client }: NavkitProviderProps) => {
+export const NavkitProvider = ({ children, client, onThemeChange }: NavkitProviderProps) => {
   const auth = new Auth(client)
 
   const user = useRef<any>(null)
@@ -25,6 +37,15 @@ export const NavkitProvider = ({ children, client }: NavkitProviderProps) => {
   const [userData, setUserData] = useState<UserData | null>(null)
   const [jwtToken, setJwtToken] = useState<string>('')
   const [isUserAuthenticated, setIsUserAuthenticated] = useState<boolean>(false)
+  const [themeMode, setThemeMode] = useState<ThemeMode>(getInitialTheme)
+
+  const toggleTheme = useCallback(() => {
+    setThemeMode(prev => {
+      const newMode = prev === 'light' ? 'dark' : 'light'
+      localStorage.setItem(THEME_STORAGE_KEY, newMode)
+      return newMode
+    })
+  }, [])
 
   const checkIfDesk = async () => {
     const fetchedSettings = await settings?.current?.get?.()
@@ -119,8 +140,13 @@ export const NavkitProvider = ({ children, client }: NavkitProviderProps) => {
     }
   }, [getData])
 
+  // Notify parent app of theme changes
+  useEffect(() => {
+    onThemeChange?.(themeMode)
+  }, [themeMode, onThemeChange])
+
   return (
-    <NavigationContext.Provider value={{ navigateToUrl, isDesk, appsList, userData, siteSettings: siteSettings.current, jwtToken, isUserAuthenticated, client, auth }}>
+    <NavigationContext.Provider value={{ navigateToUrl, isDesk, appsList, userData, siteSettings: siteSettings.current, jwtToken, isUserAuthenticated, client, auth, themeMode, toggleTheme }}>
       {children}
     </NavigationContext.Provider>
   )

package/src/components/AppLauncher/AppLauncher.styles.ts

@@ -1,4 +1,5 @@
-import { colours, spacing, shadows, borderRadius, typography, zIndex, dimensions } from '../../styles/variables'
+import { colours, spacing, shadows, borderRadius, typography, zIndex, dimensions, getColors } from '../../styles/variables'
+import type { ThemeMode } from '../../styles/variables'
 
 export const appLauncherStyles = {
   container: {
@@ -57,3 +58,64 @@ export const appLauncherStyles = {
     letterSpacing: typography.letterSpacing.default,
   },
 }
+
+export const getAppLauncherStyles = (mode: ThemeMode) => {
+  const colors = getColors(mode)
+  return {
+    container: {
+      position: 'absolute' as const,
+      top: 60,
+      left: { xs: '2.5vw', sm: '10vw', md: '15vw', lg: 40 },
+      width: { xs: '95vw', sm: '80vw', md: '70vw', lg: '560px' },
+      maxWidth: '800px',
+      maxHeight: { xs: 'calc(100vh - 80px)', md: '335px' },
+      borderRadius: borderRadius.default,
+      boxShadow: shadows.dropdown,
+      p: spacing.lg,
+      backgroundColor: colors.bg.white,
+      zIndex: zIndex.overlay,
+    },
+    scrollContainer: {
+      mt: spacing.md,
+      maxHeight: { xs: '300px', md: '220px' },
+      overflowY: 'auto' as const,
+    },
+    appItem: {
+      display: 'flex',
+      flexDirection: 'column' as const,
+      alignItems: 'center',
+      justifyContent: 'center',
+      p: spacing.xs,
+      borderRadius: borderRadius.default,
+      cursor: 'pointer',
+      transition: 'all 0.2s ease',
+      '&:hover': {
+        backgroundColor: colors.bg.light,
+      },
+    },
+    iconContainer: {
+      width: 48,
+      height: 48,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: borderRadius.default,
+      border: `1px solid ${colors.border.light}`,
+      mb: spacing.sm,
+    },
+    iconStyle: {
+      fontSize: dimensions.iconSize.md,
+      color: colors.text.secondary,
+    },
+    appName: {
+      fontWeight: typography.weights.regular,
+      color: colors.text.secondary,
+      fontSize: typography.sizes.xs,
+      textAlign: 'center' as const,
+      lineHeight: 1.3,
+      maxWidth: '100%',
+      wordWrap: 'break-word' as const,
+      letterSpacing: typography.letterSpacing.default,
+    },
+  }
+}

package/src/components/AppLauncher/AppLauncher.tsx

@@ -5,11 +5,12 @@ import { Card, Box, Grid, Typography } from "@mui/material"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import type { IconName } from "@fortawesome/fontawesome-svg-core"
 import { useNavigation } from "../../NavkitContext"
-import { appLauncherStyles } from "./AppLauncher.styles"
+import { getAppLauncherStyles } from "./AppLauncher.styles"
 
 
 const AppLauncher = () => {
-    const { navigateToUrl, appsList } = useNavigation()
+    const { navigateToUrl, appsList, themeMode } = useNavigation()
+    const styles = getAppLauncherStyles(themeMode)
     const [filteredApps, setFilteredApps] = useState<AppData[]>(appsList || [])
 
     const handleAppClick = (app: AppData) => {
@@ -25,29 +26,29 @@ const AppLauncher = () => {
     }, [appsList])
 
     return (
-        <Card sx={appLauncherStyles.container}>
+        <Card sx={styles.container}>
             <Search appsList={appsList} onSearchChange={handleSearchChange} />
             {filteredApps && filteredApps.length > 0 && (
-                <Box sx={appLauncherStyles.scrollContainer}>
+                <Box sx={styles.scrollContainer}>
                     <Grid container spacing={1}>
                         {filteredApps.map((app) => {
                             return (
                                 <Grid item xs={3} key={app.id}>
                                     <Box
-                                        sx={appLauncherStyles.appItem}
+                                        sx={styles.appItem}
                                         onClick={() => handleAppClick(app)}
                                     >
                                         <Box
-                                            sx={appLauncherStyles.iconContainer}
+                                            sx={styles.iconContainer}
                                         >
                                             <FontAwesomeIcon
                                                 icon={["fas", app.icon.replace('fa-', '') as IconName]}
-                                                style={appLauncherStyles.iconStyle}
+                                                style={styles.iconStyle}
                                             />
                                         </Box>
                                         <Typography
                                             variant="body2"
-                                            sx={appLauncherStyles.appName}
+                                            sx={styles.appName}
                                         >
                                             {app.appname}
                                         </Typography>

package/src/components/Profile/Profile.styles.ts

@@ -1,4 +1,5 @@
-import { colours, spacing, shadows, borderRadius, typography, zIndex, dimensions } from '../../styles/variables'
+import { colours, spacing, shadows, borderRadius, typography, zIndex, dimensions, getColors } from '../../styles/variables'
+import type { ThemeMode } from '../../styles/variables'
 
 export const profileStyles = {
   container: {
@@ -57,3 +58,64 @@ export const profileStyles = {
     color: colours.text.secondary,
   },
 }
+
+export const getProfileStyles = (mode: ThemeMode) => {
+  const colors = getColors(mode)
+  return {
+    container: {
+      position: 'relative' as const,
+    },
+    trigger: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: spacing.sm,
+      ml: spacing.md,
+      cursor: 'pointer',
+    },
+    avatar: {
+      width: dimensions.avatarSize,
+      height: dimensions.avatarSize,
+      bgcolor: colors.bg.avatar,
+      color: colors.text.primary,
+      fontWeight: typography.weights.semibold,
+      fontSize: typography.sizes.sm,
+    },
+    name: {
+      color: colors.text.primary,
+      fontSize: typography.sizes.sm,
+      fontWeight: typography.weights.regular,
+      letterSpacing: typography.letterSpacing.default,
+      display: { xs: 'none', md: 'block' },
+    },
+    menu: {
+      position: 'absolute' as const,
+      top: 60,
+      right: 0,
+      width: 200,
+      borderRadius: borderRadius.default,
+      boxShadow: shadows.dropdown,
+      backgroundColor: colors.bg.white,
+      zIndex: zIndex.overlay,
+      py: 1,
+    },
+    menuItem: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: spacing.md,
+      px: spacing.md,
+      py: spacing.sm,
+      '&:hover': {
+        backgroundColor: colors.bg.light,
+      },
+    },
+    menuItemText: {
+      color: colors.text.secondary,
+      fontSize: typography.sizes.sm,
+      fontWeight: typography.weights.regular,
+    },
+    iconStyle: {
+      fontSize: dimensions.iconSize.sm,
+      color: colors.text.secondary,
+    },
+  }
+}

package/src/components/Profile/Profile.tsx

@@ -1,5 +1,6 @@
 import { Box, Avatar, Typography } from '@mui/material'
-import { profileStyles } from './Profile.styles'
+import { getProfileStyles } from './Profile.styles'
+import { useNavigation } from '../../NavkitContext'
 import nopfp from "../../assets/nopfp.png"
 
 interface UserData {
@@ -18,15 +19,17 @@ interface ProfileProps {
 
 const Profile = (props: ProfileProps) => {
     const { userData, onClick } = props
+    const { themeMode } = useNavigation()
+    const styles = getProfileStyles(themeMode)
 
     return (
-        <Box sx={profileStyles.trigger} onClick={onClick}>
+        <Box sx={styles.trigger} onClick={onClick}>
             <Avatar
                 src={userData.pfp || nopfp}
-                sx={profileStyles.avatar}
+                sx={styles.avatar}
             >
             </Avatar>
-            <Typography sx={profileStyles.name}>
+            <Typography sx={styles.name}>
                 {userData.first_name} {userData.last_name}
             </Typography>
         </Box>

package/src/components/Profile/ProfileMenu.tsx

@@ -1,10 +1,11 @@
 import { Card, MenuItem, Typography } from '@mui/material'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { profileStyles } from './Profile.styles'
+import { getProfileStyles } from './Profile.styles'
 import { useNavigation } from '../../NavkitContext'
 
 const ProfileMenu = () => {
-    const { navigateToUrl, auth } = useNavigation()
+    const { navigateToUrl, auth, themeMode } = useNavigation()
+    const styles = getProfileStyles(themeMode)
 
     const handlePreferences = () => {
         navigateToUrl('preferences', true)
@@ -15,23 +16,23 @@ const ProfileMenu = () => {
     }
 
     return (
-        <Card sx={profileStyles.menu}>
-            <MenuItem onClick={handlePreferences} sx={profileStyles.menuItem}>
+        <Card sx={styles.menu}>
+            <MenuItem onClick={handlePreferences} sx={styles.menuItem}>
                 <FontAwesomeIcon
                     icon={["fas", "gear"]}
-                    style={profileStyles.iconStyle}
+                    style={styles.iconStyle}
                 />
-                <Typography sx={profileStyles.menuItemText}>
+                <Typography sx={styles.menuItemText}>
                     Preferences
                 </Typography>
             </MenuItem>
 
-            <MenuItem onClick={handleLogout} sx={profileStyles.menuItem}>
+            <MenuItem onClick={handleLogout} sx={styles.menuItem}>
                 <FontAwesomeIcon
                     icon={["fas", "right-from-bracket"]}
-                    style={profileStyles.iconStyle}
+                    style={styles.iconStyle}
                 />
-                <Typography sx={profileStyles.menuItemText}>
+                <Typography sx={styles.menuItemText}>
                     Logout
                 </Typography>
             </MenuItem>

package/src/components/Search/Search.styles.ts

@@ -1,3 +1,6 @@
+import { getColors } from '../../styles/variables'
+import type { ThemeMode } from '../../styles/variables'
+
 export const searchStyles = {
   textField: {
     '& .MuiOutlinedInput-root': {
@@ -5,3 +8,31 @@ export const searchStyles = {
     },
   },
 }
+
+export const getSearchStyles = (mode: ThemeMode) => {
+  const colors = getColors(mode)
+  return {
+    textField: {
+      '& .MuiOutlinedInput-root': {
+        height: '40px',
+        backgroundColor: colors.bg.light,
+        '& fieldset': {
+          borderColor: colors.border.light,
+        },
+        '&:hover fieldset': {
+          borderColor: colors.text.tertiary,
+        },
+      },
+      '& .MuiOutlinedInput-input': {
+        color: colors.text.primary,
+      },
+      '& .MuiInputBase-input::placeholder': {
+        color: colors.text.tertiary,
+        opacity: 1,
+      },
+    },
+    iconStyle: {
+      color: colors.text.tertiary,
+    },
+  }
+}

package/src/components/Search/Search.tsx

@@ -1,7 +1,8 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { TextField, InputAdornment } from '@mui/material'
 import { useState } from 'react'
-import { searchStyles } from './Search.styles'
+import { getSearchStyles } from './Search.styles'
+import { useNavigation } from '../../NavkitContext'
 import type { AppData } from '../../types'
 
 interface SearchProps {
@@ -11,6 +12,8 @@ interface SearchProps {
 
 const Search = ({ appsList, onSearchChange }: SearchProps) => {
   const [searchTerm, setSearchTerm] = useState('')
+  const { themeMode } = useNavigation()
+  const styles = getSearchStyles(themeMode)
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value
@@ -36,11 +39,11 @@ const Search = ({ appsList, onSearchChange }: SearchProps) => {
       variant="outlined"
       value={searchTerm}
       onChange={handleSearchChange}
-      sx={searchStyles.textField}
+      sx={styles.textField}
       InputProps={{
         startAdornment: (
           <InputAdornment position="start">
-            <FontAwesomeIcon icon={["fas", "magnifying-glass"]} style={{ color: '#9e9e9e' }} />
+            <FontAwesomeIcon icon={["fas", "magnifying-glass"]} style={styles.iconStyle} />
           </InputAdornment>
         ),
       }}

package/src/components/Shortucts/Shortcuts.styles.ts

@@ -1,4 +1,5 @@
-import { colours, spacing, dimensions } from '../../styles/variables'
+import { colours, spacing, dimensions, getColors } from '../../styles/variables'
+import type { ThemeMode } from '../../styles/variables'
 
 export const shortcutsStyles = {
   desktopContainer: {
@@ -27,3 +28,19 @@ export const shortcutsStyles = {
     color: colours.text.secondary,
   },
 }
+
+export const getThemeToggleStyles = (mode: ThemeMode) => {
+  const colors = getColors(mode)
+  return {
+    button: {
+      color: colors.text.secondary,
+      '&:hover': {
+        backgroundColor: colors.bg.light,
+      },
+    },
+    icon: {
+      fontSize: dimensions.iconSize.lg,
+      color: colors.text.secondary,
+    },
+  }
+}

package/src/components/Shortucts/Shortcuts.tsx

@@ -1,7 +1,9 @@
 import type { AppData } from '../../types'
 import { Box, Link, IconButton } from '@mui/material'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { shortcutsStyles } from './Shortcuts.styles'
+import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined'
+import LightModeOutlined from '@mui/icons-material/LightModeOutlined'
+import { shortcutsStyles, getThemeToggleStyles } from './Shortcuts.styles'
 import { useNavigation } from '../../NavkitContext'
 
 interface ShortcutsProps {
@@ -13,18 +15,16 @@ interface ShortcutsProps {
 const Shortcuts = (props: ShortcutsProps) => {
 
     const { showChat, onMenuToggle, triggerRef } = props
-    const { navigateToUrl, siteSettings, isUserAuthenticated } = useNavigation()
+    const { navigateToUrl, siteSettings, isUserAuthenticated, themeMode, toggleTheme } = useNavigation()
     const shortcuts = siteSettings.shortcuts
+    const themeToggleStyles = getThemeToggleStyles(themeMode)
 
     const handleShortcutClick = (shortcut: AppData) => {
         if (shortcut.url) {
             navigateToUrl(shortcut.url, false)
         }
     }
-    if ((!shortcuts || shortcuts.length === 0) && !siteSettings.showChat) {
-        return null
-    }
-
+    
     return (
         <>
             {/* Desktop view - inline shortcuts */}
@@ -52,6 +52,13 @@ const Shortcuts = (props: ShortcutsProps) => {
                     />
                 </Link>
                 }
+                <IconButton onClick={toggleTheme} sx={themeToggleStyles.button}>
+                    {themeMode === 'dark' ? (
+                        <LightModeOutlined sx={themeToggleStyles.icon} />
+                    ) : (
+                        <DarkModeOutlined sx={themeToggleStyles.icon} />
+                    )}
+                </IconButton>
             </Box>
 
             {/* Mobile view - trigger button */}

package/src/components/Shortucts/ShortcutsMenu.styles.ts

@@ -1,4 +1,5 @@
-import { colours, spacing, shadows, borderRadius, typography, zIndex, dimensions } from '../../styles/variables'
+import { colours, spacing, shadows, borderRadius, typography, zIndex, dimensions, getColors } from '../../styles/variables'
+import type { ThemeMode } from '../../styles/variables'
 
 export const shortcutsMenuStyles = {
   menu: {
@@ -32,3 +33,43 @@ export const shortcutsMenuStyles = {
     color: colours.text.secondary,
   },
 }
+
+export const getShortcutsMenuStyles = (mode: ThemeMode) => {
+  const colors = getColors(mode)
+  return {
+    menu: {
+      position: 'absolute' as const,
+      top: 60,
+      right: 0,
+      width: 200,
+      borderRadius: borderRadius.default,
+      boxShadow: shadows.dropdown,
+      backgroundColor: colors.bg.white,
+      zIndex: zIndex.overlay,
+      py: 1,
+    },
+    menuItem: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: spacing.md,
+      px: spacing.md,
+      py: spacing.sm,
+      '&:hover': {
+        backgroundColor: colors.bg.light,
+      },
+    },
+    menuItemText: {
+      color: colors.text.secondary,
+      fontSize: typography.sizes.sm,
+      fontWeight: typography.weights.regular,
+    },
+    iconStyle: {
+      fontSize: dimensions.iconSize.sm,
+      color: colors.text.secondary,
+    },
+    themeIcon: {
+      fontSize: dimensions.iconSize.sm,
+      color: colors.text.secondary,
+    },
+  }
+}

package/src/components/Shortucts/ShortcutsMenu.tsx

@@ -1,7 +1,9 @@
 import { Card, MenuItem, Typography } from '@mui/material'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined'
+import LightModeOutlined from '@mui/icons-material/LightModeOutlined'
 import type { AppData } from '../../types'
-import { shortcutsMenuStyles } from './ShortcutsMenu.styles'
+import { getShortcutsMenuStyles } from './ShortcutsMenu.styles'
 import { useNavigation } from '../../NavkitContext'
 
 interface ShortcutsMenuProps {
@@ -10,8 +12,9 @@ interface ShortcutsMenuProps {
 
 const ShortcutsMenu = (props: ShortcutsMenuProps) => {
     const { showChat } = props
-    const { navigateToUrl, siteSettings, isUserAuthenticated } = useNavigation()
+    const { navigateToUrl, siteSettings, isUserAuthenticated, themeMode, toggleTheme } = useNavigation()
     const shortcuts = siteSettings.shortcuts
+    const themedStyles = getShortcutsMenuStyles(themeMode)
 
     const handleShortcutClick = (shortcut: AppData) => {
         if (shortcut.url) {
@@ -19,23 +22,19 @@ const ShortcutsMenu = (props: ShortcutsMenuProps) => {
         }
     }
 
-    if ((!shortcuts || shortcuts.length === 0) && !siteSettings.showChat) {
-        return null
-    }
-
     return (
-        <Card sx={shortcutsMenuStyles.menu}>
+        <Card sx={themedStyles.menu}>
             {siteSettings.showChat && isUserAuthenticated && (
                 <MenuItem
                     key="chat"
                     onClick={() => showChat(true)}
-                    sx={shortcutsMenuStyles.menuItem}
+                    sx={themedStyles.menuItem}
                 >
                     <FontAwesomeIcon
                         icon={["far", "comment"] as any}
-                        style={shortcutsMenuStyles.iconStyle}
+                        style={themedStyles.iconStyle}
                     />
-                    <Typography sx={shortcutsMenuStyles.menuItemText}>
+                    <Typography sx={themedStyles.menuItemText}>
                         Chat
                     </Typography>
                 </MenuItem>
@@ -44,17 +43,31 @@ const ShortcutsMenu = (props: ShortcutsMenuProps) => {
                 <MenuItem
                     key={shortcut.id}
                     onClick={() => handleShortcutClick(shortcut)}
-                    sx={shortcutsMenuStyles.menuItem}
+                    sx={themedStyles.menuItem}
                 >
                     <FontAwesomeIcon
                         icon={["far", shortcut.icon] as any}
-                        style={shortcutsMenuStyles.iconStyle}
+                        style={themedStyles.iconStyle}
                     />
-                    <Typography sx={shortcutsMenuStyles.menuItemText}>
+                    <Typography sx={themedStyles.menuItemText}>
                         {shortcut.appname}
                     </Typography>
                 </MenuItem>
             ))}
+            <MenuItem
+                key="theme-toggle"
+                onClick={toggleTheme}
+                sx={themedStyles.menuItem}
+            >
+                {themeMode === 'dark' ? (
+                    <LightModeOutlined sx={themedStyles.themeIcon} />
+                ) : (
+                    <DarkModeOutlined sx={themedStyles.themeIcon} />
+                )}
+                <Typography sx={themedStyles.menuItemText}>
+                    {themeMode === 'dark' ? 'Light Mode' : 'Dark Mode'}
+                </Typography>
+            </MenuItem>
         </Card>
     )
 }

package/src/styles/variables.ts

@@ -1,6 +1,8 @@
 // Design Tokens - Centralized design values for consistent theming
 
-export const colours = {
+export type ThemeMode = 'light' | 'dark'
+
+export const lightColors = {
   text: {
     primary: '#333333',
     secondary: '#424242',
@@ -16,6 +18,27 @@ export const colours = {
   },
 }
 
+export const darkColors = {
+  text: {
+    primary: '#f5f5f5',
+    secondary: '#e0e0e0',
+    tertiary: '#9e9e9e',
+  },
+  bg: {
+    white: '#1e1e1e',
+    light: '#2d2d2d',
+    avatar: '#424242',
+  },
+  border: {
+    light: '#424242',
+  },
+}
+
+export const getColors = (mode: ThemeMode) => mode === 'dark' ? darkColors : lightColors
+
+// Default colors (light mode) for backwards compatibility
+export const colours = lightColors
+
 export const spacing = {
   xs: '10px',
   sm: 1.5,

package/src/types.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react"
 import type { Client, Auth } from "@taruvi/sdk"
+import type { ThemeMode } from "./styles/variables"
 
 export interface AppData {
     appname: string,
@@ -33,9 +34,12 @@ export interface NavigationContextType {
   isUserAuthenticated: boolean
   client: Client
   auth: Auth
+  themeMode: ThemeMode
+  toggleTheme: () => void
 }
 
 export interface NavkitProviderProps {
   children: ReactNode
   client: Client
+  onThemeChange?: (theme: ThemeMode) => void
 }