Fix faded textbox on iOS / Safari (#3993)

* change

* changes

* changes

* changes

* changes

* formatting

* fix

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
Co-authored-by: Freddy Boulton <alfonsoboulton@gmail.com>

CHANGELOG.md

@@ -7,7 +7,7 @@ No changes to highlight.
 
 ## Bug Fixes:
 
-No changes to highlight.
+- Fix faded coloring of output textboxes in iOS / Safari by [@aliabid94](https://github.com/aliabid94) in [PR 3993](https://github.com/gradio-app/gradio/pull/3993)
 
 ## Documentation Changes:
 

gradio/themes/soft.py

@@ -67,7 +67,7 @@ class Soft(Base):
             block_title_background_fill="*block_label_background_fill",
             block_title_text_weight="600",
             block_title_text_color="*primary_500",
-            block_title_text_color_dark="*white",
+            block_title_text_color_dark="white",
             block_label_margin="*spacing_md",
             # Inputs
             input_background_fill="white",

js/form/src/Dropdown.svelte

@@ -314,6 +314,9 @@
 	}
 
 	input:disabled {
+		-webkit-text-fill-color: var(--body-text-color);
+		-webkit-opacity: 1;
+		opacity: 1;
 		cursor: not-allowed;
 	}
 

js/form/src/Number.svelte

@@ -63,6 +63,11 @@
 		font-size: var(--input-text-size);
 		line-height: var(--line-sm);
 	}
+	input:disabled {
+		-webkit-text-fill-color: var(--body-text-color);
+		-webkit-opacity: 1;
+		opacity: 1;
+	}
 
 	input:focus {
 		box-shadow: var(--input-shadow-focus);

js/form/src/Range.svelte

@@ -86,6 +86,11 @@
 		line-height: var(--line-sm);
 		text-align: center;
 	}
+	input:disabled {
+		-webkit-text-fill-color: var(--body-text-color);
+		-webkit-opacity: 1;
+		opacity: 1;
+	}
 
 	input[type="number"]:focus {
 		box-shadow: var(--input-shadow-focus);

js/form/src/Textbox.svelte

@@ -221,6 +221,12 @@
 		font-size: var(--input-text-size);
 		line-height: var(--line-sm);
 	}
+	input:disabled,
+	textarea:disabled {
+		-webkit-text-fill-color: var(--body-text-color);
+		-webkit-opacity: 1;
+		opacity: 1;
+	}
 
 	input:focus,
 	textarea:focus {