diff --git a/packages/eez-studio-shared/color.ts b/packages/eez-studio-shared/color.ts
index a69c9ae4..ef2810fb 100644
--- a/packages/eez-studio-shared/color.ts
+++ b/packages/eez-studio-shared/color.ts
@@ -72,6 +72,10 @@ export function isDark(color: string) {
     return tinycolor(color).isDark();
 }
 
+export function isLight(color: string) {
+    return tinycolor(color).isLight();
+}
+
 export function isValid(color: string) {
     return tinycolor(color).isValid();
 }
diff --git a/packages/project-editor/ui-components/PropertyGrid/ThemedColorInput.tsx b/packages/project-editor/ui-components/PropertyGrid/ThemedColorInput.tsx
index 3c4da1be..4746634c 100644
--- a/packages/project-editor/ui-components/PropertyGrid/ThemedColorInput.tsx
+++ b/packages/project-editor/ui-components/PropertyGrid/ThemedColorInput.tsx
@@ -3,7 +3,7 @@ import ReactDOM from "react-dom";
 import { observer } from "mobx-react";
 import { SketchPicker } from "react-color";
 
-import { isDark, isValid } from "eez-studio-shared/color";
+import { isDark, isLight, isValid } from "eez-studio-shared/color";
 
 import { getProperty } from "project-editor/core/object";
 import { getEezStudioDataFromDragEvent } from "project-editor/store";
@@ -197,7 +197,11 @@ export const ThemedColorInput = observer(
                         ref={this.props.inputRef}
                         className="form-control"
                         style={{
-                            color: isDark(tinycolor(color).toHexString())
+                            color: settingsController.isDarkTheme
+                                ? isLight(tinycolor(color).toHexString())
+                                    ? "#000"
+                                    : undefined
+                                : isDark(tinycolor(color).toHexString())
                                 ? "#fff"
                                 : undefined,
                             backgroundColor: tinycolor(color).toHexString()