diff --git a/src/styles/custom-properties/colors.scss b/src/styles/custom-properties/colors.scss
index cfe0d0453..f3d35db73 100644
--- a/src/styles/custom-properties/colors.scss
+++ b/src/styles/custom-properties/colors.scss
@@ -1,6 +1,7 @@
 // Vikunja colors as CSS custom properties
 
 :root {
+  // Vikunja specific variables
   --grey-50: hsl(210, 20%, 98%);
   --grey-100: hsl(220, 14.3%, 95.9%);
   --grey-200: hsl(220, 13%, 91%);
@@ -16,7 +17,7 @@
   --site-background: var(--grey-100);
   --scheme-main: var(--white);
 
-  // Vikunja overrides of Bulma defaults
+  // Overrides of Bulma defaults
   // --black-bis: #121212;
   // --black-ter: #242424;
   --grey-darker: var(--grey-700);
@@ -66,17 +67,21 @@
   --primary-h: 216.5deg;
   --primary-s: 100%;
   --primary-l: 54.9%;
+  // simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
   --primary-light-l: 73%;
   --primary-a: 1;
   --primary-hsl: 216.5deg, 100%, 54.9%;
   --primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
-
-  // simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
   --primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-light-l), var(--primary-a));
 
+  // Define custom color to prevent change in dark mode
+  --switch-view-color: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a));
+
+
   @media (prefers-color-scheme: dark) {
     // Light mode colours reversed for dark mode
-    --grey-900: hsl(210, 20%, 98%);
+    --grey-900-hsl: 210, 20%, 98%;
+    --grey-900: hsl(var(--grey-900-hsl));
     --grey-800: hsl(220, 14.3%, 95.9%);
     --grey-700: hsl(220, 13%, 91%);
     --grey-600: hsl(216, 12.2%, 83.9%);
@@ -89,12 +94,19 @@
     --grey-100: hsl(var(--grey-100-hsl));
     --grey-50: hsl(220.9, 39.3%, 11%);
 
+    // Dark grey looks better than black
     --white: var(--grey-50);
     --black-l: 100%;
 
+    // Text renders better in grey than black
     --text: var(--grey-800);
     --text-invert: #000;
     --text-light: var(--grey-300);
     --text-strong: var(--grey-900);
+
+    // Elements that rely on Bulma defaults in light mode but
+    // need to be overriden in dark mode
+    --input-placeholder-color: hsla(var(--grey-900-hsl), 0.6) !important;
+
   }
 }
\ No newline at end of file
diff --git a/src/views/list/ShowList.vue b/src/views/list/ShowList.vue
index 3389c6d30..244c075ce 100644
--- a/src/views/list/ShowList.vue
+++ b/src/views/list/ShowList.vue
@@ -179,8 +179,8 @@ export default {
     }
 
     &.is-active,
-	&:hover {
-      color: var(--white);
+    &:hover {
+      color: var(--switch-view-color);
     }
 
     &.is-active {