Conversation
There was a problem hiding this comment.
Pull request overview
Updates theme handling and branding assets to improve light/dark mode behavior and surface theme switching on the login screen.
Changes:
- Add a dark/light mode toggle to the login page.
- Align global CSS variables with MUI’s
data-mui-color-schemeattribute and add a theme “synchronizer” in the MUI provider. - Add favicon/app icon assets and wire them into Next.js
metadata.icons.
Reviewed changes
Copilot reviewed 4 out of 11 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/app/login/page.tsx | Adds a bottom-right theme toggle to the login page. |
| src/app/layout.tsx | Adds metadata.icons entries for favicon + Apple touch icon. |
| src/app/globals.css | Maps CSS variables to MUI’s data-mui-color-scheme attribute. |
| src/app/context/theme-provider.tsx | Adds a theme synchronization effect using useColorScheme(). |
| public/maskable-icon.png | Adds a new maskable icon asset. |
| public/logo.svg | Adds a new logo asset. |
| public/icon-192x192.png | Adds a 192×192 app icon asset. |
| public/favicon-32x32.png | Adds a 32×32 favicon asset. |
| public/favicon-16x16.png | Adds a 16×16 favicon asset. |
| public/apple-touch-icon-180x180.png | Adds an Apple touch icon asset. |
| package.json | Adds SWC-related dev dependencies. |
| package-lock.json | Lockfile updates to reflect dependency changes. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const systemPrefersDark = window.matchMedia( | ||
| "(prefers-color-scheme: dark)", | ||
| ).matches; | ||
| setMode(systemPrefersDark ? "dark" : "light"); |
There was a problem hiding this comment.
ThemeSynchronizer sets an explicit mode ("dark"/"light") when there is no stored mode, even though the provider is configured with defaultMode="system". This overrides system-following behavior for new users and won’t react to later OS theme changes. Prefer leaving mode as "system" when nothing is stored (or explicitly calling setMode("system")), and avoid overriding it based on a one-time matchMedia read.
| const systemPrefersDark = window.matchMedia( | |
| "(prefers-color-scheme: dark)", | |
| ).matches; | |
| setMode(systemPrefersDark ? "dark" : "light"); | |
| setMode("system"); |
No description provided.