diff --git a/frontend/src/Editor/Components/NumberInput.jsx b/frontend/src/Editor/Components/NumberInput.jsx
index 1958479a6b..bfdd635651 100644
--- a/frontend/src/Editor/Components/NumberInput.jsx
+++ b/frontend/src/Editor/Components/NumberInput.jsx
@@ -6,10 +6,13 @@ export const NumberInput = function NumberInput({
   styles,
   setExposedVariable,
   component,
+  darkMode,
   fireEvent,
 }) {
   const { visibility, borderRadius } = styles;
 
+  const textColor = darkMode && ['#232e3c', '#000000ff'].includes(styles.textColor) ? '#fff' : styles.textColor;
+
   const [value, setValue] = React.useState(parseInt(properties.value));
 
   const handleChange = (e) => {
@@ -47,7 +50,7 @@ export const NumberInput = function NumberInput({
       type="number"
       className="form-control"
       placeholder={properties.placeholder}
-      style={{ height, display: visibility ? '' : 'none', borderRadius: `${borderRadius}px` }}
+      style={{ height, display: visibility ? '' : 'none', borderRadius: `${borderRadius}px`, color: textColor }}
       value={value}
       data-cy={`draggable-widget-${String(component.name).toLowerCase()}`}
     />
diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js
index 13e562278e..15c9b86c4b 100644
--- a/frontend/src/Editor/WidgetManager/widgetConfig.js
+++ b/frontend/src/Editor/WidgetManager/widgetConfig.js
@@ -1092,6 +1092,11 @@ export const widgets = [
           schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
         },
       },
+      textColor: {
+        type: 'color',
+        displayName: 'Text Color',
+        validation: { schema: { type: 'string' } },
+      },
     },
     exposedVariables: {
       value: 0,
@@ -1112,6 +1117,7 @@ export const widgets = [
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },
         borderRadius: { value: '{{0}}' },
+        textColor: { value: '#232e3c' },
       },
     },
   },