diff --git a/frontend/src/AppBuilder/Widgets/TreeSelect.jsx b/frontend/src/AppBuilder/Widgets/TreeSelect.jsx
index c4f99b9e08..00684c8ca9 100644
--- a/frontend/src/AppBuilder/Widgets/TreeSelect.jsx
+++ b/frontend/src/AppBuilder/Widgets/TreeSelect.jsx
@@ -19,6 +19,7 @@ export const TreeSelect = ({
   const { label } = properties;
   const { visibility, disabledState, checkboxColor, boxShadow } = styles;
   const textColor = darkMode && styles.textColor === '#000' ? '#fff' : styles.textColor;
+  const darkModeClass = darkMode ? 'theme-dark' : '';
   const [checked, setChecked] = useState(checkedData);
   const [expanded, setExpanded] = useState(expandedData);
   const data = isExpectedDataType(properties.data, 'array');
@@ -105,7 +106,7 @@ export const TreeSelect = ({
 
   return (
     <div
-      className="custom-checkbox-tree"
+      className={`custom-checkbox-tree ${darkModeClass}`}
       data-disabled={disabledState}
       style={{
         maxHeight: height,
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index 6340418b34..10412f80c1 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -6317,6 +6317,26 @@ input.hide-input-arrows {
   overflow-y: auto;
   color: #3e525b;
 
+  &.theme-dark {
+    color: #e4e4e7;
+
+    .react-checkbox-tree {
+      .rct-node {
+        .rct-text {
+          color: #e4e4e7;
+        }
+        .rct-checkbox {
+          input[type="checkbox"] {
+            filter: invert(1);
+          }
+        }
+        .rct-title {
+          color: #e4e4e7;
+        }
+      }
+    }
+  }
+
   .react-checkbox-tree label:hover {
     background: none !important;
   }