Amend audio waveform colour (#7207)

* change waveform color option types * tweak waveform color setting * snake case tweak * add changeset * tweak BE test * tweak component BE test --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
gradio-app · Jan 29, 2024 · e3217b4 · e3217b4
1 parent efacc7d
commit e3217b4
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 8 deletions.
diff --git a/.changeset/seven-trains-return.md b/.changeset/seven-trains-return.md
@@ -0,0 +1,6 @@
+---
+"@gradio/audio": patch
+"gradio": patch
+---
+
+fix:Amend audio waveform colour
diff --git a/gradio/components/audio.py b/gradio/components/audio.py
@@ -33,8 +33,8 @@ class WaveformOptions:
         sample_rate: The output sample rate (in Hz) of the audio after editing. Defaults to 44100.
     """
 
-    waveform_color: str = "#9ca3af"
-    waveform_progress_color: str = "#f97316"
+    waveform_color: str | None = None
+    waveform_progress_color: str | None = None
     show_recording_waveform: bool = True
     show_controls: bool = False
     skip_length: int | float = 5

diff --git a/js/audio/Index.svelte b/js/audio/Index.svelte
@@ -91,10 +91,14 @@
 
 	let waveform_settings: Record<string, any>;
 
+	let color_accent = getComputedStyle(
+		document.documentElement
+	).getPropertyValue("--color-accent");
+
 	$: waveform_settings = {
 		height: 50,
 		waveColor: waveform_options.waveform_color || "#9ca3af",
-		progressColor: waveform_options.waveform_progress_color || "#f97316",
+		progressColor: waveform_options.waveform_progress_color || color_accent,
 		barWidth: 2,
 		barGap: 3,
 		cursorWidth: 2,
@@ -109,7 +113,7 @@
 	};
 
 	const trim_region_settings = {
-		color: waveform_options.trim_region_color || "hsla(15, 85%, 40%, 0.4)",
+		color: waveform_options.trim_region_color,
 		drag: true,
 		resize: true
 	};

diff --git a/test/test_components.py b/test/test_components.py
@@ -842,8 +842,8 @@ def test_component_functions(self, gradio_temp_dir):
                 "show_controls": False,
                 "show_recording_waveform": True,
                 "skip_length": 5,
-                "waveform_color": "#9ca3af",
-                "waveform_progress_color": "#f97316",
+                "waveform_color": None,
+                "waveform_progress_color": None,
             },
             "_selectable": False,
         }
@@ -894,8 +894,8 @@ def test_component_functions(self, gradio_temp_dir):
                 "show_controls": False,
                 "show_recording_waveform": True,
                 "skip_length": 5,
-                "waveform_color": "#9ca3af",
-                "waveform_progress_color": "#f97316",
+                "waveform_color": None,
+                "waveform_progress_color": None,
             },
             "_selectable": False,
         }