{"id":3379,"date":"2021-07-21T12:52:37","date_gmt":"2021-07-21T10:52:37","guid":{"rendered":"https:\/\/blog.tomayac.com\/2021\/07\/21\/dark-mode-web-app-manifest-app-icons\/"},"modified":"2021-07-21T12:52:37","modified_gmt":"2021-07-21T10:52:37","slug":"dark-mode-web-app-manifest-app-icons","status":"publish","type":"post","link":"https:\/\/tomayac.com\/wordpress\/2021\/07\/21\/dark-mode-web-app-manifest-app-icons\/","title":{"rendered":"Dark Mode Web App Manifest App Icons"},"content":{"rendered":"\n\t\t\t<p>I was asked if one could use SVG web app manifest app icons that are reactive to <a href=\"https:\/\/web.dev\/prefers-color-scheme\/\"><code>prefers-color-scheme<\/code><\/a>. To illustrate what this means, here is an excerpt of a manifest where I set the icon to an SVG that is reactive to the color scheme.\nYou can play with it by navigating directly to <a href=\"https:\/\/dark-mode-favicon.glitch.me\/icon.svg\">icon.svg<\/a> and toggling your operating system's color scheme setting.<\/p>\n<pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{<\/span><br \/>  <span class=\"token property\">\"icons\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">{<\/span><br \/>    <span class=\"token property\">\"src\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"https:\/\/dark-mode-favicon.glitch.me\/icon.svg\"<\/span><span class=\"token punctuation\">,<\/span><br \/>    <span class=\"token property\">\"sizes\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"144x144\"<\/span><span class=\"token punctuation\">,<\/span><br \/>    <span class=\"token property\">\"type\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"image\/svg+xml\"<\/span><br \/>  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">]<\/span><br \/><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p>The icon itself is just an SVG with embedded CSS. You may remember it from my post <a href=\"https:\/\/blog.tomayac.com\/2019\/09\/21\/prefers-color-scheme-in-svg-favicons-for-dark-mode-icons\/\"><code>prefers-color-scheme<\/code> in SVG favicons for dark mode icons<\/a>.<\/p>\n<p>(Side remark about a little gotcha: Note how I need to &quot;lie&quot; about the icon's dimensions in the web app manifest, where I say it's <code>144x144<\/code> pixels compared to the <code>width<\/code> and <code>height<\/code> in the source code.)<\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>svg<\/span> <span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>100<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>100<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">xmlns<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>http:\/\/www.w3.org\/2000\/svg<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><br \/>  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>style<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token style\"><span class=\"token language-css\"><br \/>    <span class=\"token selector\">circle<\/span> <span class=\"token punctuation\">{<\/span><br \/>      <span class=\"token property\">fill<\/span><span class=\"token punctuation\">:<\/span> yellow<span class=\"token punctuation\">;<\/span><br \/>      <span class=\"token property\">stroke<\/span><span class=\"token punctuation\">:<\/span> black<span class=\"token punctuation\">;<\/span><br \/>      <span class=\"token property\">stroke-width<\/span><span class=\"token punctuation\">:<\/span> 3px<span class=\"token punctuation\">;<\/span><br \/>    <span class=\"token punctuation\">}<\/span><br \/>    <span class=\"token atrule\"><span class=\"token rule\">@media<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token property\">prefers-color-scheme<\/span><span class=\"token punctuation\">:<\/span> dark<span class=\"token punctuation\">)<\/span><\/span> <span class=\"token punctuation\">{<\/span><br \/>      <span class=\"token selector\">circle<\/span> <span class=\"token punctuation\">{<\/span><br \/>        <span class=\"token property\">fill<\/span><span class=\"token punctuation\">:<\/span> black<span class=\"token punctuation\">;<\/span><br \/>        <span class=\"token property\">stroke<\/span><span class=\"token punctuation\">:<\/span> yellow<span class=\"token punctuation\">;<\/span><br \/>      <span class=\"token punctuation\">}<\/span><br \/>    <span class=\"token punctuation\">}<\/span><br \/>  <\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>style<\/span><span class=\"token punctuation\">><\/span><\/span><br \/>  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>circle<\/span> <span class=\"token attr-name\">cx<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>50<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">cy<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>50<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">r<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>47<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">\/><\/span><\/span><br \/><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>svg<\/span><span class=\"token punctuation\">><\/span><\/span><\/code><\/pre>\n<p>So, to close this, the answer to the above question is <em>yes<\/em>, app icons will respect your preferred color scheme, but <em>no<\/em>, app icons won't update dynamically when you change your color scheme. Instead, they will keep their initial dark or light mode look from whatever you had your system set to at install time.<\/p>\n<p><img src=\"https:\/\/blog.tomayac.com\/images\/dark-mode-app-icons.png\" alt=\"macOS Settings shows the system is set to light mode, but the app icon is still presented in dark mode, since it was installed when dark mode was enabled.\" \/><\/p>\n<p>You can test it for yourself by installing the app embedded below (<a href=\"https:\/\/general-sly-olive.glitch.me\/\">launch it in its own window<\/a>).<\/p>\n<div class=\"glitch-embed-wrap\" style=\"height: 420px; width: 100%;\">\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/general-sly-olive?path=manifest.webmanifest&previewSize=100\" title=\"general-sly-olive on Glitch\" allow=\"geolocation; microphone; camera; midi; vr; encrypted-media\" style=\"height: 100%; width: 100%; border: 0;\">\n  <\/iframe>\n<\/div>\n<p>(Credits: The app is a remix of <a href=\"https:\/\/twitter.com\/alexey_rodionov\">Alexey Rodionov<\/a>'s app <a href=\"https:\/\/fir-skirt.glitch.me\/\">fir-skirt.glitch.me<\/a>. Alexey, you guessed it, is also the one who asked me about this.)<\/p>\n\n\t\t\t<p>\n\t\t\t\t<img alt=\"Thomas Steiner\" width=\"32\" height=\"32\" src=\"https:\/\/blog.tomayac.com\/feed.php?dl=https%3A%2F%2Fblog.tomayac.com%2F2021%2F07%2F21%2Fdark-mode-web-app-manifest-app-icons%2F&dp=%2F2021%2F07%2F21%2Fdark-mode-web-app-manifest-app-icons%2F&dt=Dark%20Mode%20Web%20App%20Manifest%20App%20Icons\" alt=\"\">\n\t\t\t\t<br\/>This post appeared first on <a href=\"https:\/\/blog.tomayac.com\/2021\/07\/21\/dark-mode-web-app-manifest-app-icons\/\">https:\/\/blog.tomayac.com\/2021\/07\/21\/dark-mode-web-app-manifest-app-icons\/<\/a>.\n\t\t\t<\/p>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\t\t\tI was asked if one could use SVG web app manifest app icons that are reactive to prefers-color-scheme. To illustrate what this means, here is an excerpt of a manifest where I set the icon to an SVG that is reactive to the color scheme.<br \/>\nYou can play&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"intlwemo_wallet_address":"","footnotes":""},"categories":[],"tags":[],"class_list":["post-3379","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/comments?post=3379"}],"version-history":[{"count":1,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3379\/revisions"}],"predecessor-version":[{"id":3381,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3379\/revisions\/3381"}],"wp:attachment":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/media?parent=3379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/categories?post=3379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/tags?post=3379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}