diff --git a/client/src/components/App/index.css b/client/src/components/App/index.css
index 4be3044ac8e..e11400b91dd 100644
--- a/client/src/components/App/index.css
+++ b/client/src/components/App/index.css
@@ -33,6 +33,8 @@
     --alert-message-color: #24426c;
     --alert-message-border: #cbdbf2;
     --alert-message-bg: #dae5f5;
+    --checkbox-bg: #e2e2e2;
+    --radio-bg: #ffffff;
 }
 
 [data-theme="dark"] {
@@ -65,6 +67,8 @@
     --alert-message-color: #e6e6e6;
     --alert-message-border: #363648;
     --alert-message-bg: #363648;
+    --checkbox-bg: #a4a4a4;
+    --radio-bg: #a4a4a4;
 }
 
 body {
diff --git a/client/src/components/ui/Checkbox.css b/client/src/components/ui/Checkbox.css
index 2a556fb0faf..111f0af0bb5 100644
--- a/client/src/components/ui/Checkbox.css
+++ b/client/src/components/ui/Checkbox.css
@@ -48,7 +48,7 @@
     height: 20px;
     min-width: 20px;
     margin-right: 10px;
-    background-color: #e2e2e2;
+    background-color: var(--checkbox-bg);
     background-repeat: no-repeat;
     background-position: center center;
     background-size: 12px 10px;
diff --git a/client/src/components/ui/Tabler.css b/client/src/components/ui/Tabler.css
index dcb9002a1a0..e145aaf530e 100644
--- a/client/src/components/ui/Tabler.css
+++ b/client/src/components/ui/Tabler.css
@@ -14317,7 +14317,7 @@ textarea[cols] {
 
 .custom-control-label:before {
     border: 1px solid rgba(0, 40, 100, 0.12);
-    background-color: #fff;
+    background-color: var(--radio-bg);
     background-size: 0.5rem;
 }