Skip to content

Add theme switching with light, dark, and auto modes#15

Merged
unknowIfGuestInDream merged 4 commits intomasterfrom
copilot/optimize-ui-theme-switching
Jan 29, 2026
Merged

Add theme switching with light, dark, and auto modes#15
unknowIfGuestInDream merged 4 commits intomasterfrom
copilot/optimize-ui-theme-switching

Conversation

Copy link
Contributor

Copilot AI commented Jan 29, 2026

Summary

This PR adds theme switching support to the Patch Reader browser extension (UI优化 - 支持主题切换,默认跟浏览器主题设置一致).

Features

  • Theme Toggle UI: Added light/dark/auto toggle buttons in the header with emoji icons (☀️/🌙/💻) and text labels
  • CSS Variables: Converted all hardcoded colors to CSS variables for consistent theming
  • Dark Theme: Full dark theme support including diff2html component styling
  • Auto Theme Detection: The "Auto" mode follows the browser's prefers-color-scheme setting (default)
  • Theme Persistence: User's theme preference is saved to localStorage
  • i18n Support: Added translations for theme labels in English, Chinese (浅色/深色/自动), and Japanese (ライト/ダーク/自動)
  • Accessibility: Added ARIA attributes for screen reader support
  • Flash Prevention: Early theme detection script prevents flash of wrong theme on page load

Screenshots

Light Theme

Light Theme

Dark Theme

Dark Theme

Dark Theme with Diff Content

Dark Theme with Diff

Checklist

  • Add theme switching UI (light/dark/auto toggle buttons) in header
  • Create CSS variables and dark theme styles
  • Add JavaScript logic to detect browser theme preference (prefers-color-scheme)
  • Add JavaScript logic to toggle themes and persist user preference
  • Add i18n translations for theme labels in all locales (en, zh, ja)
  • Build and manually verify the changes work correctly
  • Take screenshots of UI changes
  • Run code review and address feedback
  • Run CodeQL security check (no vulnerabilities found)
  • Bump version to 1.0.2
Original prompt

This section details on the original issue you should resolve

<issue_title>UI优化</issue_title>
<issue_description>支持主题切换,默认跟浏览器主题设置一致</issue_description>

Comments on the Issue (you are @copilot in this section)


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Co-authored-by: unknowIfGuestInDream <57802425+unknowIfGuestInDream@users.noreply.github.com>
…usage

Co-authored-by: unknowIfGuestInDream <57802425+unknowIfGuestInDream@users.noreply.github.com>
Copilot AI changed the title [WIP] Add theme switching support for UI optimization Add theme switching with light, dark, and auto modes Jan 29, 2026
@unknowIfGuestInDream unknowIfGuestInDream marked this pull request as ready for review January 29, 2026 11:34
@unknowIfGuestInDream
Copy link
Contributor

@copilot 版本升级到1.0.2

Co-authored-by: unknowIfGuestInDream <57802425+unknowIfGuestInDream@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Jan 29, 2026

@copilot 版本升级到1.0.2

Done in 86748d9. Updated version to 1.0.2 in package.json, src/chrome/manifest.json, and src/edge/manifest.json.

@unknowIfGuestInDream unknowIfGuestInDream merged commit 689725b into master Jan 29, 2026
2 checks passed
@unknowIfGuestInDream unknowIfGuestInDream deleted the copilot/optimize-ui-theme-switching branch January 29, 2026 11:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

UI优化

2 participants