From dcfd0965889e2c6a92d617c6c05c15aec4d3646b Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 12 Nov 2025 21:07:01 +0100
Subject: [PATCH] feat: allow setting dark custom logo

Resolves https://github.com/go-vikunja/vikunja/issues/1799
---
 config-raw.json                       |  5 +++++
 frontend/src/components/home/Logo.vue | 23 ++++++++++++++++++-----
 frontend/src/main.ts                  |  1 +
 pkg/config/config.go                  |  1 +
 pkg/routes/static.go                  |  2 ++
 5 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/config-raw.json b/config-raw.json
index e3ecc9a49..68b8767c3 100644
--- a/config-raw.json
+++ b/config-raw.json
@@ -123,6 +123,11 @@
                     "default_value": "",
                     "comment": "Allow using a custom logo via external URL."
                 },
+                {
+                    "key": "customlogourldark",
+                    "default_value": "",
+                    "comment": "Allow using a custom logo for dark mode via external URL. If not set, the regular logo will be used for both light and dark modes."
+                },
                 {
                     "key": "enablepublicteams",
                     "default_value": "false",
diff --git a/frontend/src/components/home/Logo.vue b/frontend/src/components/home/Logo.vue
index d0b28f42d..f49bced86 100644
--- a/frontend/src/components/home/Logo.vue
+++ b/frontend/src/components/home/Logo.vue
@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import { useNow } from '@vueuse/core'
 import { useAuthStore } from '@/stores/auth'
+import { useColorScheme } from '@/composables/useColorScheme'
 
 import LogoFull from '@/assets/logo-full.svg?component'
 import LogoFullPride from '@/assets/logo-full-pride.svg?component'
@@ -12,12 +13,24 @@ const now = useNow({
 })
 
 const authStore = useAuthStore()
-const Logo = computed(() => window.ALLOW_ICON_CHANGES 
-	&& authStore.settings.frontendSettings.allowIconChanges 
-	&& now.value.getMonth() === 5 
-	? LogoFullPride 
+const { isDark } = useColorScheme()
+
+const Logo = computed(() => window.ALLOW_ICON_CHANGES
+	&& authStore.settings.frontendSettings.allowIconChanges
+	&& now.value.getMonth() === 5
+	? LogoFullPride
 	: LogoFull)
-const CustomLogo = computed(() => window.CUSTOM_LOGO_URL)
+
+const CustomLogo = computed(() => {
+	const lightLogo = window.CUSTOM_LOGO_URL
+	const darkLogo = window.CUSTOM_LOGO_URL_DARK
+
+	if (!lightLogo && !darkLogo) return ''
+	if (!darkLogo) return lightLogo
+	if (!lightLogo) return darkLogo
+
+	return isDark.value ? darkLogo : lightLogo
+})
 </script>
 
 <template>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 24da87d91..c420ed575 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -21,6 +21,7 @@ declare global {
 		SENTRY_DSN?: string;
 		ALLOW_ICON_CHANGES: boolean;
 		CUSTOM_LOGO_URL?: string;
+		CUSTOM_LOGO_URL_DARK?: string;
 	}
 }
 
diff --git a/pkg/config/config.go b/pkg/config/config.go
index 315844ed9..89645a21d 100644
--- a/pkg/config/config.go
+++ b/pkg/config/config.go
@@ -65,6 +65,7 @@ const (
 	ServiceMaxAvatarSize                  Key = `service.maxavatarsize`
 	ServiceAllowIconChanges               Key = `service.allowiconchanges`
 	ServiceCustomLogoURL                  Key = `service.customlogourl`
+	ServiceCustomLogoURLDark              Key = `service.customlogourldark`
 	ServiceEnablePublicTeams              Key = `service.enablepublicteams`
 	ServiceBcryptRounds                   Key = `service.bcryptrounds`
 	ServiceEnableOpenIDTeamUserOnlySearch Key = `service.enableopenidteamusersearch`
diff --git a/pkg/routes/static.go b/pkg/routes/static.go
index 241f18584..cd55cd2eb 100644
--- a/pkg/routes/static.go
+++ b/pkg/routes/static.go
@@ -50,6 +50,7 @@ const (
 	window.SENTRY_DSN = '{{ .SENTRY_DSN }}'
 	window.ALLOW_ICON_CHANGES = {{ .ALLOW_ICON_CHANGES }}
 	window.CUSTOM_LOGO_URL = '{{ .CUSTOM_LOGO_URL }}'
+	window.CUSTOM_LOGO_URL_DARK = '{{ .CUSTOM_LOGO_URL_DARK }}'
 </script>`
 )
 
@@ -96,6 +97,7 @@ func serveIndexFile(c echo.Context, assetFs http.FileSystem) (err error) {
 			data["ALLOW_ICON_CHANGES"] = "true"
 		}
 		data["CUSTOM_LOGO_URL"] = config.ServiceCustomLogoURL.GetString()
+		data["CUSTOM_LOGO_URL_DARK"] = config.ServiceCustomLogoURLDark.GetString()
 
 		err = tmpl.Execute(&tplOutput, data)
 		if err != nil {