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

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

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

three apple app icons showing color variations. the first is a white music note on a red gradient. the second is a red music note on a black background. the third is a grayscale gradient music note on a black background

我希望为 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 尚未推出）受支持的功能，而我刚刚错过了文档？

    

	




html

mobile-safari

apple-touch-icon

web-clips


1个回答




    
    
    

        

            

                

                    
0
投票

                    
                

            

        

        
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
 将使用适当的图像路径进行更新。
    

	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.