diff --git a/src/styles/custom-properties/colors.scss b/src/styles/custom-properties/colors.scss
index f34d47d56..8f36dc837 100644
--- a/src/styles/custom-properties/colors.scss
+++ b/src/styles/custom-properties/colors.scss
@@ -57,12 +57,9 @@
   --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: var(--primary-h), var(--primary-s), var(--primary-l);
   --primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
-  --primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-light-l), var(--primary-a));
 
 
   // Define custom color variable to prevent change in dark mode
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 6b0b2ca6e..5f56df682 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -892,12 +892,12 @@ $flash-background-duration: 750ms;
 
   .checklist-summary {
     margin-left: .25rem;
-  }	
+  }
 }
 
 .task-view-container {
   padding-bottom: 1rem;
-	
+
   @media screen and (max-width: $desktop) {
 	padding-bottom: 0;
   }
@@ -920,6 +920,11 @@ $flash-background-duration: 750ms;
   }
 }
 
+.task-view-container {
+  // simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
+  --primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
+}
+
 .flash-background-enter-from,
 .flash-background-enter-active  {
   animation: flash-background $flash-background-duration ease 1;