favicon: Add dark mode support

Closes #2538

Works as expected on latest Firefox and Chromium.

Author: nhooyr

ci/dev/gen_icons.sh

@@ -21,6 +21,24 @@ main() {
   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/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