Project Feature: Global Dark Mode Toggle

Requirement

Expand the DevDash project by adding a global Dark Mode toggle button that changes the color scheme of the entire dashboard.

Assignments (Start First)

1. Global State: In the very top-level component of your DevDash app (usually App or DashboardLayout), create a boolean state variable called isDarkMode.
2. The Toggle Button: Build a ThemeToggle button component. Place it in the Header component. Pass the isDarkMode state and setter down as props so the button can flip the value.
3. Dynamic Base Class: On the main wrapper <div> of the entire application, use template literals to append a dark-theme class if isDarkMode is true.
4. CSS Variables: (CSS Task) Ensure your CSS uses variables for background and text colors, and define what those variables look like when inside a .dark-theme container.

Lessons (Optional)

• Prop Drilling: Passing state down through multiple levels of components (like from Layout to Header to ToggleButton) is called prop drilling. For small apps, this is completely normal.

The Summary and Quizzes

1. Feature Review: Global state changes affect the entire application. By toggling a single class on the root element, you can completely reskin an application.