💡 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 <body>), 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
📌 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
<div className="bg-white text-black dark:bg-gray-900 dark:text-white">
This supports both themes.
</div>
🧩 Implementation Steps
-
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.
-
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.
-
Create Redux Theme Toggle
- In
client/src/redux/layout/layoutSlice.ts, add a new state field:
- Add an action like
toggleTheme() or setTheme("light" | "dark").
-
Connect Toggle Button to Redux
-
In the component with the toggle (e.g., header or settings menu):
import { useAppDispatch, useAppSelector } from "@/redux";
const dispatch = useAppDispatch();
const { theme } = useAppSelector((state) => state.layout);
-
Dispatch the theme change and apply it:
useEffect(() => {
document.documentElement.classList.toggle("dark", theme === "dark");
}, [theme]);
-
Confirm Styling in Selected Section
- Ensure that both light and dark styles apply correctly.
- Test the toggle to ensure classes switch and styles update.
-
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:
colors: {
background: {
light: "#ffffff",
dark: "#091021",
},
}Then in component:
<div className="bg-background-light dark:bg-background-dark">
🖼️ UI/UX Mockups (If applicable)
- A basic toggle with icons (🌞 / 🌙) or a switch component
- Optional location: top nav bar or a settings dropdown
📎 Related Issues or Dependencies
🚀 Priority & Story Points
- Priority: Medium
- Story Points: 7
💡 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<body>), 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
layoutslice in Redux and applies the correct themeuseAppDispatchanduseAppSelector📌 Technical Details
✅ Tailwind Setup
tailwind.config.jsalready usesdarkMode: ["class"]✅dark:variants alongside default styles, which will act as the light mode🧩 Implementation Steps
Pick Light Mode Color Palette
theme.extend.colorsintailwind.config.js.Apply Light Mode Styling to a Single Section
dark:variant strategy so light mode remains default.Create Redux Theme Toggle
client/src/redux/layout/layoutSlice.ts, add a new state field:toggleTheme()orsetTheme("light" | "dark").Connect Toggle Button to Redux
In the component with the toggle (e.g., header or settings menu):
Dispatch the theme change and apply it:
Confirm Styling in Selected Section
Refactor Entire App
🎨 Styling Tip
Use Tailwind's
:rootvariables in your config for scalable theming:Then in component:
🖼️ UI/UX Mockups (If applicable)
📎 Related Issues or Dependencies
🚀 Priority & Story Points