From 8a31766a0e71acf3a17b727d5f7eac7d30bc4383 Mon Sep 17 00:00:00 2001
From: aliabid94 <aabid94@gmail.com>
Date: Fri, 28 Apr 2023 07:53:44 -0700
Subject: [PATCH] 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                | 2 +-
 gradio/themes/soft.py       | 2 +-
 js/form/src/Dropdown.svelte | 3 +++
 js/form/src/Number.svelte   | 5 +++++
 js/form/src/Range.svelte    | 5 +++++
 js/form/src/Textbox.svelte  | 6 ++++++
 6 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 73dc096caa..7637ba47a5 100644
--- a/CHANGELOG.md
+++ b/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:
 
diff --git a/gradio/themes/soft.py b/gradio/themes/soft.py
index 9f06ab1ee1..897a4c803c 100644
--- a/gradio/themes/soft.py
+++ b/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",
diff --git a/js/form/src/Dropdown.svelte b/js/form/src/Dropdown.svelte
index 6cfce840a3..f2844280b2 100644
--- a/js/form/src/Dropdown.svelte
+++ b/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;
 	}
 
diff --git a/js/form/src/Number.svelte b/js/form/src/Number.svelte
index 82ed81da0a..1b55a5811b 100644
--- a/js/form/src/Number.svelte
+++ b/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);
diff --git a/js/form/src/Range.svelte b/js/form/src/Range.svelte
index 35617345ce..24dd53c3ca 100644
--- a/js/form/src/Range.svelte
+++ b/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);
diff --git a/js/form/src/Textbox.svelte b/js/form/src/Textbox.svelte
index 511ee324f6..b50cb260d8 100644
--- a/js/form/src/Textbox.svelte
+++ b/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 {