diff --git a/src/styles/components/task.scss b/src/styles/components/task.scss
index abc959064..e4704f208 100644
--- a/src/styles/components/task.scss
+++ b/src/styles/components/task.scss
@@ -136,13 +136,13 @@
 
       &:not(:disabled) {
         &:hover, &:active {
-          background: $input-background-color;
+          background: var(--input-background-color) !important;
           border-color: $input-border-color;
           cursor: text;
         }
 
         &:focus {
-          background: $input-background-color;
+          background: var(--input-background-color) !important;
           border-color: $input-focus-border-color;
         }
       }
diff --git a/src/styles/theme/form.scss b/src/styles/theme/form.scss
index 320f56bd8..29cde3fdf 100644
--- a/src/styles/theme/form.scss
+++ b/src/styles/theme/form.scss
@@ -129,8 +129,8 @@
   padding: .3rem;
 
   &:focus {
-    background: $input-background-color;
-    border-color: $input-focus-border-color;
+    background: var(--input-background-color) !important;
+    border-color: $input-focus-border-color !important;
   }
 
   &.disabled {
diff --git a/src/styles/variables/colors.scss b/src/styles/variables/colors.scss
index 93671b41a..86d42fbce 100644
--- a/src/styles/variables/colors.scss
+++ b/src/styles/variables/colors.scss
@@ -16,6 +16,7 @@
   --black: hsl(0, 0%, 4%);
 
   --light-background: var(--grey-100);
+	--input-background-color: var(--white);
 }
 
 $grey-50: #F9FAFB;
@@ -62,5 +63,7 @@ $grey-lightest: $grey-100;
 
     --white: hsl(0, 0%, 4%);
     --black: hsl(0, 0%, 100%);
+
+    --input-background-color: var(--black);
   }
 }