[GH-ISSUE #36] bug: dark-mode with white background + white text in select menu #35

New issue

Open

opened 2026-02-26 21:30:56 +03:00 by kerem · 0 comments

kerem commented 2026-02-26 21:30:56 +03:00

Owner

Copy link

Originally created by @Basthet on GitHub (Feb 7, 2026).
Original GitHub issue: https://github.com/fspecii/ace-step-ui/issues/36

dark-mode only: several select fields in dark-mode show white text on white background. Here a quick fix:
vibe-coded - take with care

--- a/components/CreatePanel.tsx
+++ b/components/CreatePanel.tsx
@@ -900,7 +900,7 @@
                 <select
                   value={vocalLanguage}
                   onChange={(e) => setVocalLanguage(e.target.value)}
-                  className="flex-1 min-w-[180px] bg-transparent text-sm text-zinc-900 dark:text-white focus:outline-none"
+                  className="flex-1 min-w-[180px] bg-zinc-50 dark:bg-suno-card text-sm text-zinc-900 dark:text-white focus:outline-none"
                 >
                   {VOCAL_LANGUAGES.map(lang => (
                     <option key={lang.value} value={lang.value}>{lang.label}</option>
@@ -1330,7 +1330,7 @@
               <select
                 value={keyScale}
                 onChange={(e) => setKeyScale(e.target.value)}
-                className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none"
+                className="w-full bg-zinc-50 dark:bg-suno-card border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none"
               >
                 <option value="">Auto</option>
                 {KEY_SIGNATURES.filter(k => k).map(key => (
@@ -1344,7 +1344,7 @@
               <select
                 value={timeSignature}
                 onChange={(e) => setTimeSignature(e.target.value)}
-                className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none"
+                className="w-full bg-zinc-50 dark:bg-suno-card border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none"
               >
                 <option value="">Auto</option>
                 {TIME_SIGNATURES.filter(t => t).map(time => (
@@ -1547,7 +1547,7 @@
               <input
                 type="range"
                 min="4"
-                max="32"
+                max="60"
                 step="1"
                 value={inferenceSteps}
                 onChange={(e) => setInferenceSteps(Number(e.target.value))}
@@ -1690,7 +1690,7 @@
                 <select
                   value={audioFormat}
                   onChange={(e) => setAudioFormat(e.target.value as 'mp3' | 'flac')}
-                  className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none"
+                  className="w-full bg-zinc-50 dark:bg-suno-card border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none"
                 >
                   <option value="mp3">MP3 (smaller)</option>
                   <option value="flac">FLAC (lossless)</option>
@@ -1704,7 +1704,7 @@
                 <select
                   value={inferMethod}
                   onChange={(e) => setInferMethod(e.target.value as 'ode' | 'sde')}
-                  className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none"
+                  className="w-full bg-zinc-50 dark:bg-suno-card border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none"
                 >
                   <option value="ode">Deterministic (ODE)</option>
                   <option value="sde">Stochastic (SDE)</option>
@@ -1718,7 +1718,7 @@
               <select
                 value={lmBackend}
                 onChange={(e) => setLmBackend(e.target.value as 'pt' | 'vllm')}
-                className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none"
+                className="w-full bg-zinc-50 dark:bg-suno-card border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none"
               >
                 <option value="pt">PT (~1.6 GB VRAM)</option>
                 <option value="vllm">VLLM (~9.2 GB VRAM)</option>
@@ -1733,7 +1733,7 @@
               <select
                 value={lmModel}
                 onChange={(e) => { const v = e.target.value; setLmModel(v); localStorage.setItem('ace-lmModel', v); }}
-                className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none"
+                className="w-full bg-zinc-50 dark:bg-suno-card border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none"
               >
                 <option value="acestep-5Hz-lm-0.6B">0.6B (Lightest, ~0.5 GB VRAM)</option>
                 <option value="acestep-5Hz-lm-1.7B">1.7B (Balanced, ~1.5 GB VRAM)</option>
@@ -1900,7 +1900,7 @@
                 <select
                   value={taskType}
                   onChange={(e) => setTaskType(e.target.value)}
-                  className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none"
+                  className="w-full bg-zinc-50 dark:bg-suno-card border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none"
                 >
                   <option value="text2music">Text → Music</option>
                   <option value="audio2audio">Audio → Audio</option>

Originally created by @Basthet on GitHub (Feb 7, 2026). Original GitHub issue: https://github.com/fspecii/ace-step-ui/issues/36 dark-mode only: several select fields in dark-mode show white text on white background. Here a quick fix: vibe-coded - take with care ``` --- a/components/CreatePanel.tsx +++ b/components/CreatePanel.tsx @@ -900,7 +900,7 @@ <select value={vocalLanguage} onChange={(e) => setVocalLanguage(e.target.value)} - className="flex-1 min-w-[180px] bg-transparent text-sm text-zinc-900 dark:text-white focus:outline-none" + className="flex-1 min-w-[180px] bg-zinc-50 dark:bg-suno-card text-sm text-zinc-900 dark:text-white focus:outline-none" > {VOCAL_LANGUAGES.map(lang => ( <option key={lang.value} value={lang.value}>{lang.label}</option> @@ -1330,7 +1330,7 @@ <select value={keyScale} onChange={(e) => setKeyScale(e.target.value)} - className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none" + className="w-full bg-zinc-50 dark:bg-suno-card border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none" > <option value="">Auto</option> {KEY_SIGNATURES.filter(k => k).map(key => ( @@ -1344,7 +1344,7 @@ <select value={timeSignature} onChange={(e) => setTimeSignature(e.target.value)} - className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none" + className="w-full bg-zinc-50 dark:bg-suno-card border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none" > <option value="">Auto</option> {TIME_SIGNATURES.filter(t => t).map(time => ( @@ -1547,7 +1547,7 @@ <input type="range" min="4" - max="32" + max="60" step="1" value={inferenceSteps} onChange={(e) => setInferenceSteps(Number(e.target.value))} @@ -1690,7 +1690,7 @@ <select value={audioFormat} onChange={(e) => setAudioFormat(e.target.value as 'mp3' | 'flac')} - className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none" + className="w-full bg-zinc-50 dark:bg-suno-card border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none" > <option value="mp3">MP3 (smaller)</option> <option value="flac">FLAC (lossless)</option> @@ -1704,7 +1704,7 @@ <select value={inferMethod} onChange={(e) => setInferMethod(e.target.value as 'ode' | 'sde')} - className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none" + className="w-full bg-zinc-50 dark:bg-suno-card border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none" > <option value="ode">Deterministic (ODE)</option> <option value="sde">Stochastic (SDE)</option> @@ -1718,7 +1718,7 @@ <select value={lmBackend} onChange={(e) => setLmBackend(e.target.value as 'pt' | 'vllm')} - className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none" + className="w-full bg-zinc-50 dark:bg-suno-card border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none" > <option value="pt">PT (~1.6 GB VRAM)</option> <option value="vllm">VLLM (~9.2 GB VRAM)</option> @@ -1733,7 +1733,7 @@ <select value={lmModel} onChange={(e) => { const v = e.target.value; setLmModel(v); localStorage.setItem('ace-lmModel', v); }} - className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none" + className="w-full bg-zinc-50 dark:bg-suno-card border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none" > <option value="acestep-5Hz-lm-0.6B">0.6B (Lightest, ~0.5 GB VRAM)</option> <option value="acestep-5Hz-lm-1.7B">1.7B (Balanced, ~1.5 GB VRAM)</option> @@ -1900,7 +1900,7 @@ <select value={taskType} onChange={(e) => setTaskType(e.target.value)} - className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none" + className="w-full bg-zinc-50 dark:bg-suno-card border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none" > <option value="text2music">Text → Music</option> <option value="audio2audio">Audio → Audio</option> ```

kerem referenced this issue 2026-03-01 18:15:52 +03:00

[GH-ISSUE #35] simple_generate.py: error: unrecognized arguments: --lm-backend pt --lm-model acestep-5Hz-lm-0.6B #31

Sign in to join this conversation.

No Branch/Tag specified

Branches Tags

main

gradio-experimental

No results found.

Labels

Clear labels   

pull-request

Mirrored from GitHub Pull Request

No labels

pull-request

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/ace-step-ui#35

No description provided.