feat: allow setting dark custom logo

Resolves https://github.com/go-vikunja/vikunja/issues/1799

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",

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>

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;
 	}
 }
 

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`

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 {