Add color picker functionality with MUI theme integration - Create themeStore with Zustand for managing primary color state - Add ThemeProvider component to wrap MUI theme with dynamic primary color - Implement ColorPicker dialog with predefined colors (including 3 purple shades) and custom color option - Add ColorPickerButton component with visual indicator of current color - Integrate color picker into both DesktopLayout and MobileLayout - Update main.tsx to include ThemeProvider wrapper - Persist theme color preference using Zustand persist middleware

client/src/components/ColorPicker.tsx

@@ -0,0 +1,151 @@
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Box,
+  Typography,
+  TextField,
+} from '@mui/material';
+import { Palette } from '@mui/icons-material';
+import { useThemeStore } from '../stores/themeStore';
+
+interface ColorPickerProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+const predefinedColors = [
+  // Purples (3 shades as requested)
+  { name: 'Deep Purple', value: '#673ab7' },
+  { name: 'Medium Purple', value: '#9c27b0' },
+  { name: 'Light Purple', value: '#e1bee7' },
+
+  // Blues
+  { name: 'Deep Blue', value: '#1976d2' },
+  { name: 'Light Blue', value: '#03dac6' },
+  { name: 'Indigo', value: '#3f51b5' },
+
+  // Greens
+  { name: 'Forest Green', value: '#2e7d32' },
+  { name: 'Mint Green', value: '#4caf50' },
+  { name: 'Teal', value: '#009688' },
+
+  // Reds/Oranges
+  { name: 'Deep Red', value: '#d32f2f' },
+  { name: 'Coral', value: '#ff5722' },
+  { name: 'Amber', value: '#ff9800' },
+
+  // Grays
+  { name: 'Charcoal', value: '#424242' },
+  { name: 'Slate', value: '#607d8b' },
+  { name: 'Warm Gray', value: '#795548' },
+];
+
+export function ColorPicker({ open, onClose }: ColorPickerProps) {
+  const { primaryColor, setPrimaryColor } = useThemeStore();
+  const [customColor, setCustomColor] = useState(primaryColor);
+
+  const handleColorSelect = (color: string) => {
+    setPrimaryColor(color);
+    onClose();
+  };
+
+  const handleCustomColorSubmit = () => {
+    if (customColor && /^#[0-9A-F]{6}$/i.test(customColor)) {
+      setPrimaryColor(customColor);
+      onClose();
+    }
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+      <DialogTitle>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <Palette />
+          <Typography>Choose Primary Color</Typography>
+        </Box>
+      </DialogTitle>
+      <DialogContent>
+        <Box sx={{ mb: 3 }}>
+          <Typography variant="h6" sx={{ mb: 2 }}>
+            Predefined Colors
+          </Typography>
+          <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 1 }}>
+            {predefinedColors.map((color) => (
+              <Box
+                key={color.value}
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  cursor: 'pointer',
+                  p: 1,
+                  borderRadius: 1,
+                  border: primaryColor === color.value ? 2 : 1,
+                  borderColor: primaryColor === color.value ? 'primary.main' : 'divider',
+                  '&:hover': {
+                    bgcolor: 'action.hover',
+                  },
+                }}
+                onClick={() => handleColorSelect(color.value)}
+              >
+                <Box
+                  sx={{
+                    width: 40,
+                    height: 40,
+                    borderRadius: '50%',
+                    bgcolor: color.value,
+                    border: 1,
+                    borderColor: 'divider',
+                    mb: 0.5,
+                  }}
+                />
+                <Typography variant="caption" sx={{ textAlign: 'center', fontSize: '0.7rem' }}>
+                  {color.name}
+                </Typography>
+              </Box>
+            ))}
+          </Box>
+        </Box>
+
+        <Box>
+          <Typography variant="h6" sx={{ mb: 2 }}>
+            Custom Color
+          </Typography>
+          <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+            <TextField
+              value={customColor}
+              onChange={(e) => setCustomColor(e.target.value)}
+              placeholder="#000000"
+              size="small"
+              sx={{ flex: 1 }}
+            />
+            <Box
+              sx={{
+                width: 40,
+                height: 40,
+                borderRadius: '50%',
+                bgcolor: customColor,
+                border: 1,
+                borderColor: 'divider',
+              }}
+            />
+            <Button
+              variant="contained"
+              onClick={handleCustomColorSubmit}
+              disabled={!customColor || !/^#[0-9A-F]{6}$/i.test(customColor)}
+            >
+              Apply
+            </Button>
+          </Box>
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

client/src/components/ColorPickerButton.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import { IconButton, Tooltip } from '@mui/material';
+import { Palette } from '@mui/icons-material';
+import { useThemeStore } from '../stores/themeStore';
+import { ColorPicker } from './ColorPicker';
+
+export function ColorPickerButton() {
+  const [open, setOpen] = useState(false);
+  const { primaryColor } = useThemeStore();
+
+  return (
+    <>
+      <Tooltip title="Change theme color">
+        <IconButton
+          onClick={() => setOpen(true)}
+          sx={{
+            position: 'relative',
+            '&::after': {
+              content: '""',
+              position: 'absolute',
+              bottom: 2,
+              right: 2,
+              width: 12,
+              height: 12,
+              borderRadius: '50%',
+              bgcolor: primaryColor,
+              border: 1,
+              borderColor: 'background.paper',
+            },
+          }}
+        >
+          <Palette />
+        </IconButton>
+      </Tooltip>
+      <ColorPicker open={open} onClose={() => setOpen(false)} />
+    </>
+  );
+}

client/src/components/ThemeProvider.tsx

@@ -0,0 +1,25 @@
+import { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import { useThemeStore } from '../stores/themeStore';
+import { ReactNode } from 'react';
+
+interface ThemeProviderProps {
+  children: ReactNode;
+}
+
+export function ThemeProvider({ children }: ThemeProviderProps) {
+  const { primaryColor } = useThemeStore();
+
+  const theme = createTheme({
+    palette: {
+      primary: {
+        main: primaryColor,
+      },
+    },
+  });
+
+  return (
+    <MuiThemeProvider theme={theme}>
+      {children}
+    </MuiThemeProvider>
+  );
+}

client/src/layouts/DesktopLayout.tsx

@@ -2,6 +2,7 @@ import { Box, Typography, IconButton, TextField, Button } from '@mui/material';
 import PrintIcon from '@mui/icons-material/Print';
 import type { GroupWithTasks, TaskWithSteps, StepWithNotes } from '../types';
 import { CreateButtons } from '../components/CreateButtons';
+import { ColorPickerButton } from '../components/ColorPickerButton';
 import { useUserSelection } from '../hooks/useUserSelection';
 
 interface DesktopLayoutProps {
@@ -45,8 +46,11 @@ export function DesktopLayout({
       <Box sx={{ width: 250, borderRight: 1, borderColor: 'divider', p: 2 }}>
         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
           <Typography variant="h6">Groups</Typography>
+          <Box sx={{ display: 'flex', gap: 1 }}>
+            <ColorPickerButton />
             <CreateButtons type="group" />
           </Box>
+        </Box>
 
         {/* Groups List */}
         {groups.map((group) => (

client/src/layouts/MobileLayout.tsx

@@ -3,6 +3,7 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import PrintIcon from '@mui/icons-material/Print';
 import type { GroupWithTasks, TaskWithSteps, StepWithNotes } from '../types';
 import { CreateButtons } from '../components/CreateButtons';
+import { ColorPickerButton } from '../components/ColorPickerButton';
 import { useUserSelection } from '../hooks/useUserSelection';
 
 function isGroupView(selectedGroup?: GroupWithTasks) {
@@ -103,8 +104,11 @@ export function MobileLayout({
           <>
             <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
               <Typography variant="h6">Groups</Typography>
+              <Box sx={{ display: 'flex', gap: 1 }}>
+                <ColorPickerButton />
                 <CreateButtons type="group" />
               </Box>
+            </Box>
 
             {/* Groups List */}
             {groupList.map((group) => (

client/src/main.tsx

@@ -10,12 +10,15 @@ if (process.env.NODE_ENV !== "production") {
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { App } from './App';
+import { ThemeProvider } from './components/ThemeProvider';
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <ApolloProvider client={client}>
+      <ThemeProvider>
         <App />
+      </ThemeProvider>
     </ApolloProvider>
   </React.StrictMode>
 );

client/src/stores/themeStore.ts

@@ -0,0 +1,21 @@
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+
+interface ThemeState {
+  primaryColor: string;
+  setPrimaryColor: (color: string) => void;
+}
+
+export const useThemeStore = create<ThemeState>()(
+  devtools(
+    persist(
+      (set) => ({
+        primaryColor: '#1976d2', // MUI default blue
+        setPrimaryColor: (color) => set({ primaryColor: color }),
+      }),
+      {
+        name: 'theme-storage',
+      }
+    )
+  )
+);