Merge pull request #2551 from cdr/dark-mode-favicon-b1d7

 favicon: Add dark mode support

Author: nhooyr

.gitattributes

@@ -0,0 +1 @@
+*.afdesign filter=lfs diff=lfs merge=lfs -text

ci/dev/gen_icons.sh

@@ -14,10 +14,31 @@ main() {
   # -background defaults to white but we want it transparent.
   # https://imagemagick.org/script/command-line-options.php#background
   convert -quiet -background transparent -resize 256x256 favicon.svg favicon.ico
+  # We do not generate the pwa-icon from the favicon as they are slightly different
+  # designs and sizes.
+  # See favicon.afdesign and #2401 for details on the differences.
   convert -quiet -background transparent -resize 192x192 pwa-icon.png pwa-icon-192.png
   convert -quiet -background transparent -resize 512x512 pwa-icon.png pwa-icon-512.png
 
   # We use -quiet above to avoid https://github.com/ImageMagick/ImageMagick/issues/884
+
+  # The following adds dark mode support for the favicon as favicon-dark-support.svg
+  # There is no similar capability for pwas or .ico so we can only add support to the svg.
+  favicon_dark_style="<style>
+@media (prefers-color-scheme: dark) {
+  * {
+    fill: white;
+  }
+}
+</style>"
+  # See https://stackoverflow.com/a/22901380/4283659
+  # This escapes all newlines so that sed will accept them.
+  favicon_dark_style="$(printf "%s\n" "$favicon_dark_style" | sed -e ':a' -e 'N' -e '$!ba' -e 's/\n/\\n/g')"
+  sed "$(
+    cat -n << EOF
+s%<rect id="favicon"%$favicon_dark_style<rect id="favicon"%
+EOF
+  )" favicon.svg > favicon-dark-support.svg
 }
 
 main "$@"

src/browser/favicon.afdesign

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:625d2049c38ae27df0613fa533020e889fa98affd603050f46d3748be7b90d0b
+size 38675

src/browser/media/favicon-dark-support.svg

@@ -11,7 +11,7 @@
       content="style-src 'self'; manifest-src 'self'; img-src 'self' data:; font-src 'self' data:;"
     />
     <title>{{ERROR_TITLE}} - code-server</title>
-    <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.svg" />
+    <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon-dark-support.svg" />
     <link rel="alternate icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.ico" />
     <link rel="manifest" href="{{CS_STATIC_BASE}}/src/browser/media/manifest.json" crossorigin="use-credentials" />
     <link rel="apple-touch-icon" sizes="192x192" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-192.png" />

src/browser/pages/error.html

@@ -11,7 +11,7 @@
       content="style-src 'self'; script-src 'self' 'unsafe-inline'; manifest-src 'self'; img-src 'self' data:; font-src 'self' data:;"
     />
     <title>code-server login</title>
-    <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.svg" />
+    <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon-dark-support.svg" />
     <link rel="alternate icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.ico" />
     <link rel="manifest" href="{{CS_STATIC_BASE}}/src/browser/media/manifest.json" crossorigin="use-credentials" />
     <link rel="apple-touch-icon" sizes="192x192" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-192.png" />

src/browser/pages/login.html

@@ -24,7 +24,7 @@
     <meta id="vscode-remote-nls-configuration" data-settings="{{NLS_CONFIGURATION}}" />
 
     <!-- Workbench Icon/Manifest/CSS -->
-    <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.svg" />
+    <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon-dark-support.svg" />
     <link rel="alternate icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.ico" />
     <link rel="manifest" href="{{CS_STATIC_BASE}}/src/browser/media/manifest.json" crossorigin="use-credentials" />
     <!-- PROD_ONLY