diff --git a/src/components/home/topNavigation.vue b/src/components/home/topNavigation.vue
index 853585c96..3634f4772 100644
--- a/src/components/home/topNavigation.vue
+++ b/src/components/home/topNavigation.vue
@@ -144,6 +144,7 @@ $vikunja-nav-logo-full-width: 164px;
 
 .logo {
 	display: none;
+	color: var(--logo-text-color);
 
 	@media screen and (min-width: $tablet) {
 		align-self: stretch;
diff --git a/src/components/misc/no-auth-wrapper.vue b/src/components/misc/no-auth-wrapper.vue
index 6b2e6a010..22832fe94 100644
--- a/src/components/misc/no-auth-wrapper.vue
+++ b/src/components/misc/no-auth-wrapper.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="no-auth-wrapper">
 		<div class="noauth-container">
-			<Logo width="400" height="117" />
+			<Logo class="logo" width="400" height="117" />
 			<div class="message is-info" v-if="motd !== ''">
 				<div class="message-header">
 					<p>{{ $t('misc.info') }}</p>
@@ -36,4 +36,8 @@ const motd = computed(() => store.state.config.motd)
 	margin: 0 auto;
 	padding: 1rem;
 }
+
+.logo {
+	color: var(--logo-text-color);
+}
 </style>
diff --git a/src/styles/custom-properties/colors.scss b/src/styles/custom-properties/colors.scss
index 8cba8dbb1..848349c6e 100644
--- a/src/styles/custom-properties/colors.scss
+++ b/src/styles/custom-properties/colors.scss
@@ -79,6 +79,8 @@
 
   // Define custom color variable to alow change in dark mode
   --card-border-color: var(--grey-200);
+  --logo-text-color: hsl(180, 1%, 15%);
+
 
 
   &.dark {
@@ -113,5 +115,6 @@
 
     // Custom color variables we need to override
     --card-border-color: hsla(var(--grey-100-hsl), 0.3);
+    --logo-text-color: var(--grey-700);
   }
 }
\ No newline at end of file