colour changes made by Copilot

frontend/src/melodies/MelodySettings.jsx

@@ -23,8 +23,11 @@ export default function MelodySettings() {
   const [success, setSuccess] = useState("");
 
   const [langToAdd, setLangToAdd] = useState("");
-  const [colorToAdd, setColorToAdd] = useState("#FF0000");
-  const [colorHexInput, setColorHexInput] = useState("#FF0000");
+  const cssColorDefault = (typeof window !== "undefined" && window.getComputedStyle)
+    ? getComputedStyle(document.documentElement).getPropertyValue("--color-default").trim()
+    : "var(--color-default)";
+  const [colorToAdd, setColorToAdd] = useState(cssColorDefault);
+  const [colorHexInput, setColorHexInput] = useState(cssColorDefault);
   const [durationToAdd, setDurationToAdd] = useState("");
 
   useEffect(() => {
@@ -231,7 +234,7 @@ export default function MelodySettings() {
               type="text"
               value={colorHexInput}
               onChange={(e) => { setColorHexInput(e.target.value); if (/^#[0-9A-Fa-f]{6}$/.test(e.target.value)) setColorToAdd(e.target.value); }}
-              placeholder="#FF0000"
+              placeholder="#RRGGBB"
               className="w-28 px-3 py-2 rounded-md text-sm font-mono border"
             />
             <button type="button" onClick={addColor} disabled={saving} className={btnPrimary} style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}>Add</button>