Move favicon change to layout, and switch based on dark/light theme of browser

src/hooks.client.ts

@@ -11,22 +11,6 @@ Sentry.init({
     replaysOnErrorSampleRate: 0
 });
 
-function setFavicon() {
-    const favicon = isStudio ? 'imagine-icon.svg' : 'appwrite-icon.svg';
-    const maskIcon = isStudio ? 'imagine-icon.png' : 'appwrite-icon.png';
-    const link = document.createElement('link');
-    link.rel = 'icon';
-    link.href = '/console/logos/' + favicon;
-    link.type = 'image/svg+xml';
-    document.head.appendChild(link);
-
-    const maskLink = document.createElement('link');
-    maskLink.rel = 'mask-icon';
-    link.href = '/console/logos/' + maskIcon;
-    link.type = 'image/png';
-    document.head.appendChild(maskLink);
-}
-
 function setLoader() {
     if (document.getElementsByTagName('body').length > 0) {
         const color = isStudio
@@ -45,7 +29,6 @@ function setLoader() {
 }
 
 setLoader();
-setFavicon();
 
 export const handleError: HandleClientError = Sentry.handleErrorWithSentry(
     async ({ error, message, status }) => {

src/routes/+layout.svelte

@@ -7,7 +7,7 @@
     import { Notifications, Progress } from '$lib/layout';
     import { app, type AppStore } from '$lib/stores/app';
     import { isCloud } from '$lib/system';
-    import { onMount } from 'svelte';
+    import { onDestroy, onMount } from 'svelte';
     import { requestedMigration } from './store';
     import { parseIfString } from '$lib/helpers/object';
     import { sdk } from '$lib/stores/sdk';
@@ -35,6 +35,8 @@
         }
     }
 
+    let browserTheme = 'light';
+
     onMount(async () => {
         updateViewport();
         // handle sources
@@ -110,6 +112,21 @@
                 feedback.toggleFeedback();
             }
         });
+
+        //check for the browser theme, which is separate from the console theme
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        browserTheme = mediaQuery.matches ? 'dark' : 'light';
+
+        // Listen for changes in the preferred color scheme
+        const handler = (e) => {
+            browserTheme = e.matches ? 'dark' : 'light';
+        };
+
+        mediaQuery.addEventListener('change', handler);
+
+        onDestroy(() => {
+            mediaQuery.removeEventListener('change', handler);
+        });
     });
 
     afterNavigate((navigation) => {
@@ -117,7 +134,6 @@
             trackPageView(navigation.to.route.id);
         }
     });
-
     $: {
         if (browser) {
             const isCloudClass = isCloud ? 'is-cloud' : '';
@@ -163,6 +179,14 @@
         'https://fonts.appwrite.io/aeonik-fono/AeonikFono-Medium.woff2',
         'https://fonts.appwrite.io/aeonik-fono/AeonikFono-Bold.woff2'
     ];
+
+    $: favicon = isStudio
+        ? browserTheme === 'dark'
+            ? 'imagine-dark.svg'
+            : 'imagine-icon.svg'
+        : 'appwrite-icon.svg';
+
+    const maskIcon = isStudio ? 'imagine-icon.png' : 'appwrite-icon.png';
 </script>
 
 <svelte:window on:resize={updateViewport} on:load={updateViewport} />
@@ -174,6 +198,9 @@
     <link rel="preload" as="style" type="text/css" href={`${base}/fonts/main.css`} />
     <link rel="stylesheet" href={`${base}/fonts/main.css`} />
 
+    <link rel="icon" type="image/svg+xml" href={`/console/logos/${favicon}`} />
+    <link rel="mask-icon" type="image/png" href={`/console/logos/${maskIcon}`} />
+
     {#if isCloud}
         {#each preloadFontsCloud as font}
             <link rel="preload" href={font} as="font" type="font/woff2" crossorigin="anonymous" />