Skip to content

fix(useTheme): Safari ≤13 compatibility — fall back to addListener/removeListener#2916

Draft
Copilot wants to merge 2 commits intomasterfrom
copilot/fix-use-theme-safari-compatibility
Draft

fix(useTheme): Safari ≤13 compatibility — fall back to addListener/removeListener#2916
Copilot wants to merge 2 commits intomasterfrom
copilot/fix-use-theme-safari-compatibility

Conversation

Copy link
Copy Markdown

Copilot AI commented Mar 28, 2026

Safari 13.1.2 and earlier don't implement MediaQueryList.addEventListener, causing a TypeError: e.addEventListener is not a function crash in useTheme.

变更内容

  • useTheme/index.ts: In useCurrentTheme, guard addEventListener/removeEventListener calls with existence checks and fall back to the deprecated addListener/removeListener API supported by older Safari:
if (matchMedia?.addEventListener) {
  matchMedia.addEventListener('change', onThemeChange);
} else if (matchMedia?.addListener) {
  matchMedia.addListener(onThemeChange);
}
// cleanup mirrors the same pattern with removeEventListener → removeListener
  • useTheme/__tests__/index.spec.ts: Added test that mocks matchMedia without addEventListener/removeEventListener and asserts addListener/removeListener are invoked instead.

[English Template / 英文模板]

🤔 这个变动的性质是?

  • 新特性提交
  • 日常 bug 修复
  • 站点、文档改进
  • 演示代码改进
  • TypeScript 定义更新
  • 包体积优化
  • 性能优化
  • 功能增强
  • 国际化改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他改动(是关于什么的改动?)

🔗 相关 Issue

Safari 13.1.2 下 useTheme 报错:TypeError: e.addEventListener is not a functionMediaQueryList 不支持 addEventListener)。

💡 需求背景和解决方案

问题:Safari ≤13 的 MediaQueryList 未实现标准的 addEventListener/removeEventListener,只支持已废弃的 addListener/removeListener,直接调用导致运行时崩溃。

方案:在订阅/取消订阅系统主题变化时,优先使用标准 API,检测不存在时降级为旧版 API,无需引入任何额外依赖。

📝 更新日志

语言 更新描述
🇺🇸 英文 useTheme: Fixed crash on Safari ≤13 by falling back to deprecated addListener/removeListener when addEventListener is unavailable on MediaQueryList.
🇨🇳 中文 useTheme:修复在 Safari ≤13 中因 MediaQueryList 不支持 addEventListener 导致的运行时报错,降级使用 addListener/removeListener

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

📍 Connect Copilot coding agent with Jira, Azure Boards or Linear to delegate work to Copilot in one click without leaving your project management tool.

Copilot AI linked an issue Mar 28, 2026 that may be closed by this pull request
@CLAassistant
Copy link
Copy Markdown

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

Copilot AI changed the title [WIP] Fix useTheme compatibility issue with Safari 13.1.2 fix(useTheme): Safari ≤13 compatibility — fall back to addListener/removeListener Mar 28, 2026
Copilot AI requested a review from crazylxr March 28, 2026 15:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

useTheme safari(13.1.2)兼容性问题

3 participants