feat(ui): Dark mode favicon (#19558)

src/sentry/static/sentry/app/bootstrap.tsx

@@ -29,6 +29,8 @@ import plugins from 'app/plugins';
 import routes from 'app/routes';
 import {normalizeTransactionName} from 'app/utils/apm';
 
+import {setupFavicon} from './favicon';
+
 if (process.env.NODE_ENV === 'development') {
   import(
     /* webpackChunkName: "SilenceReactUnsafeWarnings" */ /* webpackMode: "eager" */ 'app/utils/silence-react-unsafe-warnings'
@@ -139,6 +141,10 @@ const render = (Component: React.ComponentType) => {
   }
 };
 
+if (process.env.NODE_ENV === 'production') {
+  setupFavicon();
+}
+
 // The password strength component is very heavyweight as it includes the
 // zxcvbn, a relatively byte-heavy password strength estimation library. Load
 // it on demand.

src/sentry/static/sentry/app/favicon.tsx

@@ -0,0 +1,27 @@
+function changeFavicon(theme: 'dark' | 'light'): void {
+  const n = document.querySelector<HTMLLinkElement>('[rel="icon"][type="image/png"]');
+  if (!n) {
+    return;
+  }
+
+  const path = n.href.split('/sentry/')[0];
+  n.href = `${path}/sentry/images/${theme === 'dark' ? 'favicon-dark' : 'favicon'}.png`;
+}
+
+function prefersDark(): boolean {
+  return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
+function updateFavicon(): void {
+  changeFavicon(prefersDark() ? 'dark' : 'light');
+}
+
+export function setupFavicon(): void {
+  // Set favicon to dark on load
+  if (prefersDark()) {
+    changeFavicon('dark');
+  }
+
+  // Watch for changes in preferred color scheme
+  window.matchMedia('(prefers-color-scheme: dark)').addListener(updateFavicon);
+}

src/sentry/templates/sentry/layout.html

@@ -15,9 +15,8 @@
   <meta name="robots" content="NONE,NOARCHIVE">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <link href="{% absolute_asset_url "sentry" "images/favicon.ico" %}" rel="shortcut icon" type="image/png"/>
+  <link rel="icon" type="image/png" href="{% absolute_asset_url "sentry" "images/favicon.png" %}">
 
-  <link rel="icon" href="{% absolute_asset_url "sentry" "images/logos/apple-touch-icon.png" %}">
   <link rel="apple-touch-icon" href="{% absolute_asset_url "sentry" "images/logos/apple-touch-icon.png" %}">
   <link rel="apple-touch-icon" sizes="76x76" href="{% absolute_asset_url "sentry" "images/logos/apple-touch-icon-76x76.png" %}">
   <link rel="apple-touch-icon" sizes="120x120" href="{% absolute_asset_url "sentry" "images/logos/apple-touch-icon-120x120.png" %}">

src/sentry/web/frontend/generic.py

@@ -13,7 +13,7 @@ FOREVER_CACHE = "max-age=315360000"
 NEVER_CACHE = "max-age=0, no-cache, no-store, must-revalidate"
 
 
-def dev_favicon(request):
+def dev_favicon(request, extension):
     document_root, path = resolve("sentry/images/favicon_dev.png")
     return static.serve(request, path, document_root=document_root)
 

src/sentry/web/urls.py

@@ -64,7 +64,7 @@ if getattr(settings, "DEBUG_VIEWS", settings.DEBUG):
 if settings.DEBUG:
     urlpatterns += [
         url(
-            r"^_static/[^/]+/[^/]+/images/favicon\.ico$",
+            r"^_static/[^/]+/[^/]+/images/favicon\.(ico|png)$",
             generic.dev_favicon,
             name="sentry-dev-favicon",
         )