diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss
index 6a42f5fa..c8b8cbd7 100644
--- a/app/src/scss/_variables.scss
+++ b/app/src/scss/_variables.scss
@@ -95,6 +95,18 @@ $list-group-item-padding-x: 1rem;
 // Hard coded for scss compilation to pass
 $b-toast-background-opacity: 100%;
 
+// fixes for svg icon color not working with css variables
+@function get-checkbox-icon-checked($color) {
+  @return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");
+}
+
+@function get-checkbox-icon-indeterminate($color) {
+  @return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#{$color}' d='M0 2h4'/></svg>");
+}
+
+$custom-checkbox-indicator-icon-checked: get-checkbox-icon-checked('%23fff');
+$custom-checkbox-indicator-icon-indeterminate: get-checkbox-icon-indeterminate('%23fff');
+
 // Import default variables after the above setup to compute all other variables.
 @import '~bootstrap/scss/functions.scss';
 @import '_functions-override.scss';
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index e223f54c..e26e8b24 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -96,11 +96,6 @@
       }
     }
   }
-
-  // FIX svg fill not working with CSS variables
-  .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
-    background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='white' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>"));
-  }
 }
 
 [dark-theme="true"] {
@@ -135,8 +130,14 @@
   }
 
   // FIX svg fill not working with CSS variables
-  .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
-    background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#202020' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>"));
+  .custom-checkbox .custom-control-input {
+    &:checked ~ .custom-control-label::after {
+      background-image: escape-svg(get-checkbox-icon-checked('#202020'));
+    }
+
+    &:indeterminate ~ .custom-control-label::after {
+      background-image: escape-svg(get-checkbox-icon-indeterminate('#202020'));
+    }
   }
 }