[Light Mode Toggle]: Create a Light Mode Toggle

## **💡 User Story**

_As a student user, I want the ability to switch between light and dark modes so that I can customize the interface for readability and comfort in different lighting conditions._

## **📖 Description**

The current version of the web app defaults to **dark mode** (via `class="dark"` on ``), and Tailwind CSS is already configured for class-based dark mode switching. This ticket will add **light mode support**, along with a toggle to switch between themes.

The theme toggle will be implemented in the **Redux slice at `Client/src/redux/layout/layoutSlice.ts`**, allowing global access to theme state across the app. The approach will follow a gradual enhancement strategy, starting with a small section of the app before applying the light theme globally.

## **✅ Acceptance Criteria**

- [ ] ✅ Light mode color palette is selected and approved by the team
- [ ] ✅ Light mode styles are implemented in one section (e.g., sidebar or flowchart container)
- [ ] ✅ A toggle button allows switching between light and dark modes
- [ ] ✅ Toggle updates the `layout` slice in Redux and applies the correct theme
- [ ] ✅ Redux state is correctly used with `useAppDispatch` and `useAppSelector`
- [ ] ✅ The rest of the app is refactored to respect both dark and light mode classes
- [ ] ✅ Styling changes do **not** break existing dark mode behavior

## **📌 Technical Details**

### ✅ Tailwind Setup

- `tailwind.config.js` already uses `darkMode: ["class"]` ✅
- Ensure all future components use `dark:` variants **alongside** default styles, which will act as the light mode
```tsx

```

### 🧩 Implementation Steps

1. **Pick Light Mode Color Palette**
- Choose light mode background, text, border, and accent colors.
- Add them under `theme.extend.colors` in `tailwind.config.js`.
- Confirm color choices with another developer or designer.

2. **Apply Light Mode Styling to a Single Section**
- Start with an isolated section like the sidebar or flowchart container.
- Use the `dark:` variant strategy so light mode remains default.

3. **Create Redux Theme Toggle**
- In `client/src/redux/layout/layoutSlice.ts`, add a new state field:
```ts
theme: "light" | "dark"
```
- Add an action like `toggleTheme()` or `setTheme("light" | "dark")`.

4. **Connect Toggle Button to Redux**
- In the component with the toggle (e.g., header or settings menu):
```tsx
import { useAppDispatch, useAppSelector } from "@/redux";

const dispatch = useAppDispatch();
const { theme } = useAppSelector((state) => state.layout);
```

- Dispatch the theme change and apply it:
```tsx
useEffect(() => {
document.documentElement.classList.toggle("dark", theme === "dark");
}, [theme]);
```

5. **Confirm Styling in Selected Section**
- Ensure that both light and dark styles apply correctly.
- Test the toggle to ensure classes switch and styles update.

6. **Refactor Entire App**
- Audit all components and ensure every major element supports both modes.
- Update global background colors, text, button styles, etc.
- Prioritize areas like chat interface, course search, flowchart planner, etc.

### 🎨 Styling Tip
Use Tailwind's `:root` variables in your config for scalable theming:
```js
colors: {
background: {
light: "#ffffff",
dark: "#091021",
},
}
```

Then in component:
```tsx