有没有办法提供苹果触摸图标的浅色、深色和有色变体

Question

iOS 18 引入了新的应用程序图标颜色变体。除了基本图标（浅色模式）之外，开发人员还可以提供深色模式图标和有色选项（请参阅更新的人机界面指南）。

我希望为 Web Clip 提供相同的选项，即通过“共享”>“添加到主屏幕”添加到主屏幕的网站。这些通常使用 <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180"> 之类的东西来设置。 Apple 的文档缺乏，尤其是在网络方面，我能找到的唯一相关文章是

这篇

，它似乎自 2016 年以来就没有更新过。我的一个想法是在

media

标签上使用

<link>

属性，因为已经支持不同尺寸的多个

apple-touch-icons

，但这没有效果（我假设图标在添加时下载一次）到你的主屏幕，所以它不会抓取每个版本......或者它是但它也不会抓取

media

属性）：

<link
    rel="apple-touch-icon"
    href="/apple-touch-icon-light.png"
    sizes="180x180"
    media="screen and (prefers-color-scheme: light)"
>
<link
    rel="apple-touch-icon"
    href="/apple-touch-icon-dark.png"
    sizes="180x180"
    media="screen and (prefers-color-scheme: dark)"
>

您是否了解这是否是（或将是，因为 iOS 18 尚未推出）受支持的功能，而我刚刚错过了文档？

Answer 1

https://stackoverflow.com/a/57760135/6557588

: 的（未经测试的）JavaScript 解决方案 ... <head> ... <link rel="apple-touch-icon" id="apple-touch-icon" href="/apple-touch-icon-light.png"/> ... </head> ...

<script>
    const usesDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches || false;
    const icon = document.getElementById('apple-touch-icon');

    function switchIcon(usesDarkMode) {
        if (usesDarkMode) { 
            icon.href = '/apple-touch-icon-dark.png';
        } else {
            icon.href = '/apple-touch-icon-light.png';
        }
    }

    window.matchMedia('(prefers-color-scheme: dark)').addEventListener("change", (e) => switchIcon(e.matches));
    switchIcon(usesDarkMode);
</script>

根据 Safari 配置文件的暗模式首选项，

apple-touch-icon

href

将使用适当的图像路径进行更新。

有没有办法提供苹果触摸图标的浅色、深色和有色变体

问题描述投票：0回答：1

1个回答

最新问题

有没有办法提供苹果触摸图标的浅色、深色和有色变体

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1