为PWA的浅色/深色主题设置不同图标失败求助

你之前尝试用media属性给apple-touch-icon指定不同配色方案的方法无效，是因为iOS Safari不支持为apple-touch-icon标签添加媒体查询，这是平台的限制。以下是几种可行的解决方法：

方法一：通过Web App Manifest配置（推荐） #

现代浏览器（包括iOS 15.4+）支持在manifest.json的图标配置中添加media字段，直接关联配色方案：

{
  "icons": [
    {
      "src": "ico_light.png",
      "sizes": "300x300",
      "type": "image/png",
      "media": "(prefers-color-scheme: light)"
    },
    {
      "src": "300x300.png",
      "sizes": "300x300",
      "type": "image/png",
      "media": "(prefers-color-scheme: dark)"
    }
  ]
}

注意要确保你的PWA已正确注册manifest文件，浏览器会自动根据系统配色方案加载对应图标。

方法二：JavaScript动态切换图标（兼容旧版iOS） #

针对不支持manifestmedia属性的旧iOS版本，可以用JS检测系统配色方案并动态修改apple-touch-icon的链接：

function updateAppleTouchIcon() {
  const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
  const targetHref = isDarkMode ? '300x300.png' : 'ico_light.png';
  let iconLink = document.querySelector('link[rel="apple-touch-icon"]');
  
  if (!iconLink) {
    iconLink = document.createElement('link');
    iconLink.rel = 'apple-touch-icon';
    document.head.appendChild(iconLink);
  }
  
  iconLink.href = targetHref;
}

// 页面加载时执行初始化
updateAppleTouchIcon();
// 监听系统配色方案变化，实时更新
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateAppleTouchIcon);

需要注意：iOS会缓存主屏幕图标，用户首次添加后切换配色，可能需要重新添加到主屏幕才能看到新图标。

方法三：使用SVG图标内置配色逻辑 #

制作一个SVG格式的图标，内部通过CSS媒体查询自动切换颜色，这样一个图标就能适配两种模式：

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
  <style>
    .icon-fill {
      fill: #000; /* 浅色模式填充色 */
    }
    @media (prefers-color-scheme: dark) {
      .icon-fill {
        fill: #fff; /* 深色模式填充色 */
      }
    }
  </style>
  <!-- 替换成你的图标路径 -->
  <path class="icon-fill" d="M150 0C67.16 0 0 67.16 0 150s67.16 150 150 150 150-67.16 150-150S232.84 0 150 0z"/>
</svg>

然后在HTML中引用该SVG作为touch图标：

<link rel="apple-touch-icon" href="icon.svg">

这种方式无需额外JS或复杂配置，iOS 11.3及以上版本支持SVG格式的touch图标。

内容的提问来源于stack exchange，提问作者domiferrar