Add light/dark theme toggle and enhance user experience - #175
Conversation
feat. add light/dark theme toggle
Refactor header styles and improve responsiveness for better UX
Enhance share functionality with metadata, expiry options, and updates
Shorten subject labels to keep prefix before hyphen
Update PWA icons and manifest links in index.html
Fix privacy page stylesheet and enhance login captcha support
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the PWA configuration by adding the 'mobile-web-app-capable' meta tag to the HTML and updating the theme and background colors in the web manifest to a dark theme. Feedback suggests further enhancing theme support by adding media-query-based 'theme-color' meta tags and correcting the manifest colors to match the application's CSS variables for a seamless splash screen transition.
| <link rel="icon" type="image/x-icon" href="/favicon.ico?v=20260402"> | ||
| <link rel="icon" type="image/png" href="/favicon-96x96.png?v=20260402" sizes="96x96" /> | ||
| <link rel="icon" type="image/svg+xml" href="/favicon.svg?v=20260402" /> | ||
| <meta name="mobile-web-app-capable" content="yes" /> |
There was a problem hiding this comment.
To fully support the theme toggle and enhance the user experience, consider adding theme-color meta tags with media queries. This allows the browser's UI (such as the address bar) to match the application's theme automatically based on the user's system preference, providing a more integrated feel.
| <meta name="mobile-web-app-capable" content="yes" /> | |
| <meta name="mobile-web-app-capable" content="yes" /> | |
| <meta name="theme-color" content="#111318" media="(prefers-color-scheme: dark)" /> | |
| <meta name="theme-color" content="#f8f9ff" media="(prefers-color-scheme: light)" /> |
| "theme_color": "#1A1D24", | ||
| "background_color": "#1A1D24", |
There was a problem hiding this comment.
The theme_color and background_color values in the manifest should match the application's primary background color to ensure a seamless transition during the splash screen display. Based on the CSS variables in frontend/styles/tokens.css, the dark theme background color is defined as #111318. Using #1A1D24 here creates a slight visual mismatch during the initial load.
"theme_color": "#111318",
"background_color": "#111318",
There was a problem hiding this comment.
Pull request overview
Updates PWA-related metadata to better align the installed app experience with the site’s dark theme and improve mobile web app behavior.
Changes:
- Set
theme_colorandbackground_colorinsite.webmanifestto a dark color. - Add
mobile-web-app-capablemeta tag to the main HTML entrypoint.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| public/site.webmanifest | Updates PWA theme/background colors to a dark palette. |
| public/index.html | Adds mobile web app capability meta tag; continues to reference the manifest via a versioned URL. |
Comments suppressed due to low confidence (1)
public/index.html:51
/site.webmanifestwas updated in this PR, but the cache-busting query string on the manifest link is unchanged (?v=20260402). Since.webmanifestresponses are cacheable (max-age set in the static route), clients may keep the old manifest/theme colors for up to a day. Consider bumping the version parameter (or aligning it with your build hash) whenever the manifest changes.
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=20260402" />
<meta name="apple-mobile-web-app-title" content="成績分析" />
<link rel="manifest" href="/site.webmanifest?v=20260402" />
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
No description provided.