diff --git a/src/hooks.client.ts b/src/hooks.client.ts
index 57e805ee9..aa476c394 100644
--- a/src/hooks.client.ts
+++ b/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 }) => {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 39a4b3db9..29d8a760e 100644
--- a/src/routes/+layout.svelte
+++ b/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';
@@ -174,6 +198,9 @@
+
+
+
{#if isCloud}
{#each preloadFontsCloud as font}
diff --git a/static/logos/imagine-dark.svg b/static/logos/imagine-dark.svg
new file mode 100644
index 000000000..f243c0f50
--- /dev/null
+++ b/static/logos/imagine-dark.svg
@@ -0,0 +1,3 @@
+