diff --git a/src/components/input/button.vue b/src/components/input/button.vue
index 256f6350a..831ef11a7 100644
--- a/src/components/input/button.vue
+++ b/src/components/input/button.vue
@@ -82,11 +82,11 @@ export default {
   font-size: 0.85rem;
   font-weight: bold;
   height: $button-height;
-  box-shadow: $shadow-sm;
+  box-shadow: var(--shadow-sm);
 
   &.is-hovered,
   &:hover {
-    box-shadow: $shadow-md;
+    box-shadow: var(--shadow-md);
   }
 
   &.fullheight {
@@ -99,7 +99,7 @@ export default {
   &:active,
   &:focus,
   &:focus:not(:active) {
-    box-shadow: $shadow-xs !important;
+    box-shadow: var(--shadow-xs) !important;
   }
 
   &.is-primary.is-outlined:hover {
diff --git a/src/components/list/partials/list-card.vue b/src/components/list/partials/list-card.vue
index 09a1e71e3..ed727a100 100644
--- a/src/components/list/partials/list-card.vue
+++ b/src/components/list/partials/list-card.vue
@@ -90,7 +90,7 @@ export default {
   margin: 0 $list-spacing $list-spacing 0;
   padding: 1rem;
   border-radius: $radius;
-  box-shadow: $shadow-sm;
+  box-shadow: var(--shadow-sm);
   transition: box-shadow $transition;
 
   display: flex;
@@ -98,13 +98,13 @@ export default {
   flex-wrap: wrap;
 
   &:hover {
-    box-shadow: $shadow-md;
+    box-shadow: var(--shadow-md);
   }
 
   &:active,
   &:focus,
   &:focus:not(:active) {
-    box-shadow: $shadow-xs !important;
+    box-shadow: var(--shadow-xs) !important;
   }
 
   @media screen and (min-width: $widescreen) {
diff --git a/src/components/misc/card.vue b/src/components/misc/card.vue
index bf6cc501d..ede3f0350 100644
--- a/src/components/misc/card.vue
+++ b/src/components/misc/card.vue
@@ -61,7 +61,7 @@ export default {
   border-radius: $radius;
   margin-bottom: 1rem;
   border: 1px solid var(--grey-200);
-  box-shadow: $shadow-sm;
+  box-shadow: var(--shadow-sm);
 }
 
 .card-header {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 51442b517..73dedd8f6 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -162,7 +162,7 @@ export default {
 		max-width: calc(100vw - 2rem);
 		padding: .75rem .25rem;
 		border-radius: $radius;
-		box-shadow: $shadow-sm;
+		box-shadow: var(--shadow-sm);
 		font-size: .85rem;
 
 		@media screen and (max-width: $tablet) {
diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index bad2430a1..3def47f66 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@@ -339,14 +339,14 @@ export default {
         width: 100%;
         font-size: 5rem;
         height: auto;
-        text-shadow: $shadow-md;
+        text-shadow: var(--shadow-md);
         animation: bounce 2s infinite;
       }
 
       .hint {
         margin: .5rem auto 2rem;
         border-radius: 2px;
-        box-shadow: $shadow-md;
+        box-shadow: var(--shadow-md);
         background: var(--primary);
         padding: 1rem;
         color: var(--white);
diff --git a/src/components/tasks/partials/defer-task.vue b/src/components/tasks/partials/defer-task.vue
index 54d25b392..b4692f746 100644
--- a/src/components/tasks/partials/defer-task.vue
+++ b/src/components/tasks/partials/defer-task.vue
@@ -148,7 +148,7 @@ $defer-task-max-width: 350px + 100px;
 	color: var(--text);
 	cursor: default;
 	z-index: 10;
-	box-shadow: $shadow-lg;
+	box-shadow: var(--shadow-lg);
 
 	@media screen and (max-width: ($defer-task-max-width)) {
 		left: .5rem;
diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index af00fe235..49241eb4c 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -123,7 +123,7 @@ $task-background: var(--white);
 	-webkit-touch-callout: none; // iOS Safari
 	user-select: none;
 	cursor: pointer;
-	box-shadow: $shadow-xs;
+	box-shadow: var(--shadow-xs);
 	display: block;
 	border: 3px solid transparent;
 
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index 0f5aeff47..0b2293979 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -149,7 +149,7 @@ button.table {
 }
 
 .dropdown-menu  .dropdown-content {
-	box-shadow: $shadow-md;
+	box-shadow: var(--shadow-md);
 }
 
 .is-strikethrough {
@@ -166,5 +166,5 @@ button.table {
 
 .box {
   border: 1px solid var(--grey-200);
-  box-shadow: $shadow-sm;
+  box-shadow: var(--shadow-sm);
 }
\ No newline at end of file
diff --git a/src/styles/variables/colors.scss b/src/styles/variables/colors.scss
index cab71e07b..85e1a96b1 100644
--- a/src/styles/variables/colors.scss
+++ b/src/styles/variables/colors.scss
@@ -73,7 +73,7 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    /* Light mode colours in reverse order for dark mode */
+    /* Light mode colours reversed for dark mode */
     --grey-900: hsl(210, 20%, 98%);
     --grey-800: hsl(220, 14.3%, 95.9%);
     --grey-700: hsl(220, 13%, 91%);
@@ -81,9 +81,11 @@
     --grey-500-hsl: 217.9, 10.6%, 64.9%;
     --grey-500: hsla(var(--grey-500-hsl), 1);
     --grey-400: hsl(220, 8.9%, 46.1%);
-    --grey-300: hsl(215, 13.8%, 34.1%);
+    --grey-300-hsl: 215, 13.8%, 34.1%;
+    --grey-300: hsla(var(--grey-300-hsl), 1);
     --grey-200: hsl(216.9, 19.1%, 26.7%);
-    --grey-100: hsl(215, 27.9%, 16.9%);
+    --grey-100-hsl: 215, 27.9%, 16.9%;
+    --grey-100: hsla(var(--grey-100-hsl), 1);
     --grey-50: hsl(220.9, 39.3%, 11%);
 
     --white-l: 4% !important;
diff --git a/src/styles/variables/shadows.scss b/src/styles/variables/shadows.scss
index fdbf4b237..9e4e7b456 100644
--- a/src/styles/variables/shadows.scss
+++ b/src/styles/variables/shadows.scss
@@ -1,9 +1,26 @@
-$shadow-xs: 0 1px 3px hsla(var(--grey-500-hsl),.12),
-            0 1px 2px hsla(var(--grey-500-hsl), .24);
-$shadow-sm: 0 3px 6px hsla(var(--grey-500-hsl), .12),
-            0 2px 4px hsla(var(--grey-500-hsl), .10);
-$shadow-md: 0 10px 20px hsla(var(--grey-500-hsl), .12),
-            0 3px 6px hsla(var(--grey-500-hsl), .08);
-$shadow-lg: 0 15px 25px hsla(var(--grey-500-hsl), .12),
-            0 5px 10px hsla(var(--grey-500-hsl), .05);
-$shadow-xl: 0 20px 40px hsla(var(--grey-500-hsl), .2);
+:root {
+  --shadow-xs: 0 1px 3px hsla(var(--grey-500-hsl),.12),
+               0 1px 2px hsla(var(--grey-500-hsl), .24);
+  --shadow-sm: 0 3px 6px hsla(var(--grey-500-hsl), .12),
+               0 2px 4px hsla(var(--grey-500-hsl), .10);
+  --shadow-md: 0 10px 20px hsla(var(--grey-500-hsl), .12),
+               0 3px 6px hsla(var(--grey-500-hsl), .08);
+  --shadow-lg: 0 15px 25px hsla(var(--grey-500-hsl), .12),
+               0 5px 10px hsla(var(--grey-500-hsl), .05);
+// unused  --shadow-xl: 0 20px 40px hsla(var(--grey-500-hsl), .2);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Even darker shadows for dark mode */
+    --shadow-xs: 0 1px 3px hsla(var(--grey-100-hsl),.12),
+               0 1px 2px hsla(var(--grey-100-hsl), .24);
+    --shadow-sm: 0 3px 6px hsla(var(--grey-100-hsl), .12),
+               0 2px 4px hsla(var(--grey-100-hsl), .10);
+    --shadow-md: 0 10px 20px hsla(var(--grey-100-hsl), .12),
+               0 3px 6px hsla(var(--grey-100-hsl), .08);
+    --shadow-lg: 0 15px 25px hsla(var(--grey-100-hsl), .12),
+               0 5px 10px hsla(var(--grey-100-hsl), .05);
+// unused   --shadow-xl: 0 20px 40px hsla(var(--grey-100-hsl), .2);
+  }
+}
diff --git a/src/views/list/ShowList.vue b/src/views/list/ShowList.vue
index 5834f6b26..3389c6d30 100644
--- a/src/views/list/ShowList.vue
+++ b/src/views/list/ShowList.vue
@@ -162,7 +162,7 @@ export default {
   display: inline-flex;
   border-radius: $radius;
   font-size: .75rem;
-  box-shadow: $shadow-sm;
+  box-shadow: var(--shadow-sm);
   height: $switch-view-height;
   margin-bottom: 1rem;
   padding: .5rem;
@@ -186,7 +186,7 @@ export default {
     &.is-active {
       background: var(--primary);
       font-weight: bold;
-      box-shadow: $shadow-xs;
+      box-shadow: var(--shadow-xs);
     }
 
     &:hover {