diff --git a/src/routes/Settings/ColorInput/ColorInput.js b/src/routes/Settings/ColorInput/ColorInput.js
index 2899610c6..50bbfcc85 100644
--- a/src/routes/Settings/ColorInput/ColorInput.js
+++ b/src/routes/Settings/ColorInput/ColorInput.js
@@ -9,27 +9,41 @@ const Icon = require('stremio-icons/dom/Icon');
 const styles = require('./styles');
 
 const ColorInput = ({ className, defaultValue, onChange }) => {
-    const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
+    const colorInputRef = React.useRef(null);
+    const [colorInputVisible, showColorInput, closeColorInput] = useBinaryState(false);
     const [color, setColor] = React.useState(defaultValue);
     const [selectedColor, setSelectedColor] = React.useState(defaultValue);
-    const updateColorsAndCloseMenu = React.useCallback(() => {
+    const discardColorInput = React.useCallback((event) => {
+        if (event.type === "mousedown" && colorInputRef.current.contains(event.target)) {
+            return;
+        }
+        setColor(selectedColor);
+        closeColorInput();
+    });
+    const confirmColorInput = React.useCallback(() => {
         setSelectedColor(color);
         onChange(color);
-        closeMenu();
+        closeColorInput();
     }, [color, onChange]);
     return (
         <React.Fragment>
-            <Button className={className} title={selectedColor} onClick={toggleMenu} style={{ backgroundColor: selectedColor }}></Button>
-            {menuOpen ? <Modal className={classnames(styles['color-input-modal'])}>
-                <div className={classnames(styles['color-input-container'])}>
-                    <Button onClick={closeMenu}>
-                        <Icon className={classnames(styles['x-icon'])} icon={'ic_x'} />
-                    </Button>
-                    <h1>Choose a color:</h1>
-                    <ColorPicker className={classnames(styles['color-input'])} value={color} onChange={setColor} />
-                    <Button className={classnames(styles['button'])} onClick={updateColorsAndCloseMenu}>Select</Button>
-                </div>
-            </Modal> : null}
+            <Button className={className} title={selectedColor} onClick={showColorInput} style={{ backgroundColor: selectedColor }}></Button>
+            {
+                colorInputVisible
+                    ?
+                    <Modal className={classnames(styles['color-input-modal'])} onMouseDown={discardColorInput}>
+                        <div ref={colorInputRef} className={classnames(styles['color-input-container'])}>
+                            <Button onClick={discardColorInput}>
+                                <Icon className={classnames(styles['x-icon'])} icon={'ic_x'} />
+                            </Button>
+                            <h1>Choose a color:</h1>
+                            <ColorPicker className={classnames(styles['color-input'])} value={color} onChange={setColor} />
+                            <Button className={classnames(styles['button'])} onClick={confirmColorInput}>Select</Button>
+                        </div>
+                    </Modal>
+                    :
+                    null
+            }
         </React.Fragment>
     );
 };