Add light/dark mode switcher with theme persistence

[Copilot]

Overview

Implemented a comprehensive light/dark mode switcher for the CyberSafe application, allowing users to toggle between light and dark themes with persistent preference storage.

Features

• Theme Toggle Button: Located in the sidebar header with intuitive sun/moon icons
• Persistent Storage: Theme preference is saved to localStorage and restored on app reload
• Smooth Transitions: Seamless theme switching using Material-UI's theme system
• Complete Coverage: Works across all pages (Dashboard, Hashing, File Scan, YARA Scanner)
• Responsive Design: All UI components adapt correctly to both themes

Technical Implementation

Core Changes

• Dynamic Theme Factory: Modified cozyTheme.js to create themes based on mode parameter
• Theme Context: Added useTheme.jsx hook for centralized theme state management
• Theme Switcher Component: Created reusable ThemeSwitcher.jsx with Material-UI icons
• CSS Custom Properties: Updated App.css to use CSS variables for theme-aware styling

Key Features

// Dynamic theme creation
export const createCozyTheme = (mode = "dark") => createTheme({
  palette: { mode, /* ... */ }
});

// Theme context with persistence
const [themeMode, setThemeMode] = useState(() => {
  const savedTheme = localStorage.getItem("cyberSafeTheme");
  return savedTheme || "dark";
});

Screenshots

Dark Theme (Default)

Light Theme

Theme Switcher in Action

Testing

• ✅ Theme switching works seamlessly between light and dark modes
• ✅ Theme preference persists across browser sessions
• ✅ All UI components (sidebar, main content, forms) adapt correctly
• ✅ No breaking changes to existing functionality
• ✅ Backwards compatibility maintained with existing styled components

Usage

Users can click the theme toggle button in the sidebar header to switch between light and dark modes. The preference is automatically saved and restored when the application is reloaded.

Files Modified

• frontend/src/theme/cozyTheme.js - Dynamic theme factory
• frontend/src/hooks/useTheme.jsx - Theme context and state management
• frontend/src/components/ThemeSwitcher.jsx - Theme toggle component
• frontend/src/components/Sidebar.jsx - Added theme switcher to sidebar
• frontend/src/App.jsx - Integrated theme provider
• frontend/src/App.css - CSS custom properties for theme support

Closes #[issue_number] - Add light/dark mode switcher

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.