From 6e60ced477ac82c9730578e207f1416f89d86a28 Mon Sep 17 00:00:00 2001
From: Jens Mohrmann <mail@jensmohrmann.de>
Date: Sun, 13 Sep 2026 18:52:27 +0200
Subject: [PATCH] Dark mode contrast, tuner display and misc UI fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- color-scheme per theme so native controls (selects, checkboxes, number
  inputs, sliders) render dark-native instead of black-on-black.
- Themed .control-select text color; new .control-input class replaces
  hardcoded white-on-black inline input styles.
- Tuner widget stays mounted when enabled: idle state (dimmed, needle parked,
  '—') instead of appearing/disappearing. Fully theme-var based (was
  hardcoded white — invisible in light mode).
- Remove CSS transitions on per-frame values (tuner needle, level meter):
  transitions interrupted 60x/sec are left stuck by WebKit/Safari; the
  display EMA from the detection loop replaces them.
- VexFlow notation: resolve CSS var() to concrete colors (SVG attributes
  can't resolve var(), silently fell back to black) and override VexFlow's
  hardcoded #444 ledger-line default; re-render on theme changes
  (useLayoutEffect so children read the updated attribute in time).
- Themed switch toggles (were hardcoded #ddd / white — glowed in dark mode).
- Fixed-height pitch readout so the layout stops jumping when a note starts
  or stops sounding.
- Split SettingsContext into context/Provider/hook files (fast-refresh);
  memoized provider functions; typed webkitAudioContext; prefer-const;
  removed 'as any' casts. ESLint now passes clean.
---
 src/App.css                      | 30 ++++++++++--
 src/components/Controls.tsx      | 26 ++++------
 src/components/PianoKeys.tsx     |  2 +-
 src/components/SheetMusic.tsx    | 51 ++++++++++++++++----
 src/components/TuningMeter.css   | 81 ++++++++++++++++++++------------
 src/components/TuningMeter.tsx   | 48 ++++++++++---------
 src/context/SettingsContext.tsx  | 36 --------------
 src/context/SettingsProvider.tsx | 27 +++++++++++
 src/context/settings-context.ts  | 10 ++++
 src/context/useSettings.ts       | 10 ++++
 src/main.tsx                     |  2 +-
 src/music/NoteUtils.ts           |  4 +-
 src/styles/variables.css         |  6 +++
 13 files changed, 212 insertions(+), 121 deletions(-)
 delete mode 100644 src/context/SettingsContext.tsx
 create mode 100644 src/context/SettingsProvider.tsx
 create mode 100644 src/context/settings-context.ts
 create mode 100644 src/context/useSettings.ts

diff --git a/src/App.css b/src/App.css
index cf606ad..aa0ce02 100644
--- a/src/App.css
+++ b/src/App.css
@@ -203,7 +203,18 @@ button {
 .pitch-readout {
   display: flex;
   flex-direction: column;
+  justify-content: center;
   min-width: 100px;
+  /* Fixed height: the note display (3rem note + Hz line ≈ 70px) and the
+     "Listening..." placeholder differ in height — without a reserved height
+     everything below this element jumps up and down whenever a note
+     starts or stops sounding. */
+  height: 70px;
+}
+
+.pitch-readout .placeholder {
+  font-size: 0.9rem;
+  color: var(--color-text-muted);
 }
 
 .detected-note {
@@ -285,10 +296,18 @@ button {
 .control-select {
   padding: var(--spacing-sm);
   border-radius: var(--radius-sm);
-  border: 1px solid #ddd;
+  border: 1px solid color-mix(in srgb, var(--color-text-main) 20%, transparent);
   font-family: inherit;
   font-size: 0.9rem;
-  background-color: var(--color-bg);
+  background-color: var(--color-surface);
+  color: var(--color-text-main);
+}
+
+.control-input {
+  color: var(--color-text-main);
+  background-color: var(--color-surface);
+  border: 1px solid color-mix(in srgb, var(--color-text-main) 20%, transparent);
+  border-radius: var(--radius-sm);
 }
 
 .control-button {
@@ -330,7 +349,9 @@ button {
   width: 44px;
   height: 24px;
   border-radius: 99px;
-  background-color: #ddd;
+  /* Themed track: dark in dark mode, gray in light mode
+     (was hardcoded #ddd — glowed in dark mode) */
+  background-color: color-mix(in srgb, var(--color-text-main) 25%, transparent);
   position: relative;
   cursor: pointer;
   transition: background-color 0.2s;
@@ -347,7 +368,8 @@ button {
 .switch-thumb {
   width: 18px;
   height: 18px;
-  background-color: white;
+  /* Themed: contrasts with both the off-track and the active track */
+  background-color: var(--color-surface);
   border-radius: 50%;
   position: absolute;
   left: 3px;
diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx
index f28d5a4..229f9b7 100644
--- a/src/components/Controls.tsx
+++ b/src/components/Controls.tsx
@@ -4,7 +4,7 @@ import { INSTRUMENT_DEFINITIONS } from '../music/InstrumentConfigs';
 import { getTempoMarking } from '../music/TempoMarkings';
 import { TuningMeter } from './TuningMeter';
 
-import { useSettings } from '../context/SettingsContext';
+import { useSettings } from '../context/useSettings';
 import { type Difficulty, type RhythmSettings } from '../types/SettingsTypes';
 
 
@@ -167,7 +167,7 @@ export const Controls: React.FC<ControlsProps> = ({ currentPitch }) => {
                                     value={settings.customMinFret ?? 0}
                                     onChange={(e) => onUpdateSettings({ ...settings, customMinFret: parseInt(e.target.value) || 0 })}
                                     className="control-input"
-                                    style={{ width: '100%', padding: '4px', borderRadius: '4px', border: '1px solid rgba(255,255,255,0.2)', background: 'rgba(0,0,0,0.2)', color: 'white' }}
+                                    style={{ width: '100%', padding: '4px' }}
                                 />
                             </div>
                             <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: '4px' }}>
@@ -179,7 +179,7 @@ export const Controls: React.FC<ControlsProps> = ({ currentPitch }) => {
                                     value={settings.customMaxFret ?? 12}
                                     onChange={(e) => onUpdateSettings({ ...settings, customMaxFret: parseInt(e.target.value) || 0 })}
                                     className="control-input"
-                                    style={{ width: '100%', padding: '4px', borderRadius: '4px', border: '1px solid rgba(255,255,255,0.2)', background: 'rgba(0,0,0,0.2)', color: 'white' }}
+                                    style={{ width: '100%', padding: '4px' }}
                                 />
                             </div>
                         </div>
@@ -204,14 +204,12 @@ export const Controls: React.FC<ControlsProps> = ({ currentPitch }) => {
                             <div className="switch-thumb" />
                         </button>
                     </div>
-                    {settings.showTuningMeter && currentPitch && (
-                        <div style={{ paddingTop: '8px', borderTop: '1px solid rgba(255,255,255,0.1)' }}>
-                            <TuningMeter cents={currentPitch.cents} noteName={currentPitch.note} />
-                        </div>
-                    )}
-                    {settings.showTuningMeter && !currentPitch && (
-                        <div style={{ paddingTop: '8px', borderTop: '1px solid rgba(255,255,255,0.1)', fontSize: '11px', opacity: 0.5, textAlign: 'center' }}>
-                            Listening...
+                    {settings.showTuningMeter && (
+                        <div style={{ paddingTop: '8px', borderTop: '1px solid color-mix(in srgb, var(--color-text-main) 10%, transparent)' }}>
+                            <TuningMeter
+                                cents={currentPitch ? currentPitch.cents : null}
+                                noteName={currentPitch ? currentPitch.note : null}
+                            />
                         </div>
                     )}
                 </div>
@@ -266,11 +264,7 @@ export const Controls: React.FC<ControlsProps> = ({ currentPitch }) => {
                                             style={{
                                                 width: '48px',
                                                 textAlign: 'center',
-                                                padding: '2px',
-                                                borderRadius: '4px',
-                                                border: '1px solid rgba(255,255,255,0.2)',
-                                                background: 'rgba(0,0,0,0.2)',
-                                                color: 'white'
+                                                padding: '2px'
                                             }}
                                         />
                                         <button
diff --git a/src/components/PianoKeys.tsx b/src/components/PianoKeys.tsx
index 1e20916..0b1b883 100644
--- a/src/components/PianoKeys.tsx
+++ b/src/components/PianoKeys.tsx
@@ -145,7 +145,7 @@ export function PianoKeys({
         // Sort specifically so black keys are last (on top in SVG z-order)
         return rects.sort((a, b) => (a.isBlack === b.isBlack) ? 0 : a.isBlack ? 1 : -1);
 
-    }, [keys, whiteKeyWidth, viewMode]);
+    }, [keys, whiteKeyWidth]);
 
 
     return (
diff --git a/src/components/SheetMusic.tsx b/src/components/SheetMusic.tsx
index 37090a8..925cb2a 100644
--- a/src/components/SheetMusic.tsx
+++ b/src/components/SheetMusic.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Renderer, Stave, StaveNote, Accidental, Voice, Formatter, StaveConnector, GhostNote, Annotation } from 'vexflow';
 import { getNoteInKey } from '../music/NoteUtils';
 
@@ -13,6 +13,7 @@ interface SheetMusicProps {
     keySignature?: string;
     hideTargetNote?: boolean;
     hoverMidi?: number | null;
+    theme?: 'light' | 'dark' | 'auto';
 }
 
 export const SheetMusic: React.FC<SheetMusicProps> = ({
@@ -24,10 +25,23 @@ export const SheetMusic: React.FC<SheetMusicProps> = ({
     transpose = 12, // Default to +1 octave (Guitar Notation)
     keySignature = 'C',
     hideTargetNote = false,
-    hoverMidi = null
+    hoverMidi = null,
+    theme = 'auto'
 }) => {
     const containerRef = useRef<HTMLDivElement>(null);
 
+    // SVG presentation attributes cannot resolve CSS var() (VexFlow writes
+    // colors as `fill="..."` attributes), so the actual color is read from
+    // getComputedStyle at draw time. Re-render when the theme changes —
+    // including system scheme flips while theme === 'auto'.
+    const [schemeVersion, setSchemeVersion] = useState(0);
+    useEffect(() => {
+        const mq = window.matchMedia('(prefers-color-scheme: dark)');
+        const onChange = () => setSchemeVersion(v => v + 1);
+        mq.addEventListener('change', onChange);
+        return () => mq.removeEventListener('change', onChange);
+    }, []);
+
     useEffect(() => {
         if (!containerRef.current) return;
 
@@ -38,9 +52,24 @@ export const SheetMusic: React.FC<SheetMusicProps> = ({
         renderer.resize(width, height);
         const context = renderer.getContext();
 
-        // IMPORTANT: Set global styles for the context to ensure everything draws with correct color
-        context.setFillStyle("var(--color-text-main)");
-        context.setStrokeStyle("var(--color-text-main)");
+        // IMPORTANT: resolve the theme color to a concrete value — SVG
+        // attributes don't support var(). Without this the notation falls
+        // back to black, which is unreadable in dark mode.
+        const resolvedColor =
+            getComputedStyle(document.documentElement)
+                .getPropertyValue('--color-text-main')
+                .trim() || '#333333';
+
+        // Set global styles for the context to ensure everything draws with correct color
+        context.setFillStyle(resolvedColor);
+        context.setStrokeStyle(resolvedColor);
+
+        // VexFlow hardcodes ledger lines ("the extra lines" above/below the
+        // staff) to a dark gray default that is unreadable in dark mode.
+        // getDefaultLedgerLineStyle() merges this default OVER the stave style,
+        // so it must be overridden explicitly on every stave we create.
+        const ledgerStyle = { strokeStyle: resolvedColor, lineWidth: 2 };
+        const applyLedgerStyle = (stave: Stave) => stave.setDefaultLedgerLineStyle(ledgerStyle);
 
         // --- Helper: Decide which clef a note belongs to in Grand Staff ---
         const getGrandStaffClef = (midi: number): 'treble' | 'bass' => {
@@ -72,11 +101,13 @@ export const SheetMusic: React.FC<SheetMusicProps> = ({
         if (clef === 'grand') {
             // Measure 1: Treble
             const m1Treble = new Stave(startX, trebleY, measureWidth);
+            applyLedgerStyle(m1Treble);
             m1Treble.addClef('treble').addKeySignature(keySignature);
             m1Treble.setContext(context).draw();
 
             // Measure 1: Bass
             const m1Bass = new Stave(startX, bassY, measureWidth);
+            applyLedgerStyle(m1Bass);
             m1Bass.addClef('bass').addKeySignature(keySignature);
             m1Bass.setContext(context).draw();
 
@@ -99,6 +130,7 @@ export const SheetMusic: React.FC<SheetMusicProps> = ({
             if (numMeasures === 2) {
                 // Measure 2: Treble
                 const m2Treble = new Stave(startX + measureWidth, trebleY, measureWidth);
+                applyLedgerStyle(m2Treble);
                 // No clef/key sig repeated typically for just next measure in same system, 
                 // UNLESS it's a new system. Here it's same system.
                 // But VexFlow might require setting context context.
@@ -106,6 +138,7 @@ export const SheetMusic: React.FC<SheetMusicProps> = ({
 
                 // Measure 2: Bass
                 const m2Bass = new Stave(startX + measureWidth, bassY, measureWidth);
+                applyLedgerStyle(m2Bass);
                 m2Bass.setContext(context).draw();
 
                 stavesMeasure2 = { treble: m2Treble, bass: m2Bass };
@@ -126,6 +159,7 @@ export const SheetMusic: React.FC<SheetMusicProps> = ({
             // Single Stave
             const staveY = isCompact ? 10 : 30;
             const m1Stave = new Stave(startX, staveY, measureWidth);
+            applyLedgerStyle(m1Stave);
             m1Stave.addClef(clef).addKeySignature(keySignature);
             m1Stave.setContext(context).draw();
 
@@ -133,6 +167,7 @@ export const SheetMusic: React.FC<SheetMusicProps> = ({
 
             if (numMeasures === 2) {
                 const m2Stave = new Stave(startX + measureWidth, staveY, measureWidth);
+                applyLedgerStyle(m2Stave);
                 m2Stave.setContext(context).draw();
                 stavesMeasure2 = { [clef]: m2Stave };
             }
@@ -157,7 +192,7 @@ export const SheetMusic: React.FC<SheetMusicProps> = ({
             });
 
             // Set styles
-            staveNote.setStyle({ fillStyle: "var(--color-text-main)", strokeStyle: "var(--color-text-main)" });
+            staveNote.setStyle({ fillStyle: resolvedColor, strokeStyle: resolvedColor });
 
             if (data.accidental) {
                 const accidental = new Accidental(data.accidental);
@@ -166,7 +201,7 @@ export const SheetMusic: React.FC<SheetMusicProps> = ({
 
             if (type === 'played') {
                 // Always use default style (text color), no green/red distinction
-                staveNote.setStyle({ fillStyle: "var(--color-text-main)", strokeStyle: "var(--color-text-main)" });
+                staveNote.setStyle({ fillStyle: resolvedColor, strokeStyle: resolvedColor });
             }
 
             return { note: staveNote, clef: noteClef };
@@ -235,7 +270,7 @@ export const SheetMusic: React.FC<SheetMusicProps> = ({
         });
 
 
-    }, [targetMidi, playedMidi, hoverMidi, clef, width, height, transpose, keySignature, hideTargetNote]);
+    }, [targetMidi, playedMidi, hoverMidi, clef, width, height, transpose, keySignature, hideTargetNote, theme, schemeVersion]);
 
     return <div ref={containerRef} className="sheet-music-container" />;
 };
diff --git a/src/components/TuningMeter.css b/src/components/TuningMeter.css
index 5370b70..8cffece 100644
--- a/src/components/TuningMeter.css
+++ b/src/components/TuningMeter.css
@@ -1,21 +1,31 @@
+/* Theme-aware colors: the tuner renders on a translucent surface in both
+   themes, so all tints derive from --color-text-main instead of hardcoding
+   white (unreadable in light mode) or black (unreadable in dark mode). */
+
 .tuning-meter-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 260px;
-    background: rgba(0, 0, 0, 0.4);
+    background: color-mix(in srgb, var(--color-text-main) 6%, transparent);
     padding: 12px;
     border-radius: 12px;
     backdrop-filter: blur(4px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid color-mix(in srgb, var(--color-text-main) 10%, transparent);
     margin-top: 10px;
+    transition: opacity 0.2s ease;
+}
+
+/* No-signal state: widget stays visible but clearly idle */
+.tuning-meter-container.inactive {
+    opacity: 0.45;
 }
 
 .meter-scale {
     position: relative;
     width: 100%;
     height: 24px;
-    background: rgba(255, 255, 255, 0.1);
+    background: color-mix(in srgb, var(--color-text-main) 10%, transparent);
     border-radius: 12px;
     margin-bottom: 8px;
     overflow: hidden;
@@ -25,7 +35,7 @@
     position: absolute;
     top: 4px;
     font-size: 10px;
-    color: rgba(255, 255, 255, 0.5);
+    color: var(--color-text-muted);
     transform: translateX(-50%);
 }
 
@@ -47,7 +57,8 @@
     top: 0;
     bottom: 0;
     width: 2px;
-    background: rgba(255, 255, 255, 0.3);
+    background: var(--color-text-muted);
+    opacity: 0.35;
     transform: translateX(-50%);
     z-index: 1;
 }
@@ -57,35 +68,55 @@
     top: 0;
     bottom: 0;
     width: 4px;
-    background: white;
+    background: var(--color-text-main);
     transform: translateX(-50%);
-    transition: left 0.1s ease-out;
+    /* No CSS transition: `left` is updated directly on every detection
+       frame (~60 fps). Interrupting/restarting a transition 60x per second
+       is handled poorly by some engines (Safari leaves the needle stuck). */
     z-index: 2;
     border-radius: 2px;
-    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
+    box-shadow: 0 0 8px color-mix(in srgb, var(--color-text-main) 50%, transparent);
 }
 
+/* Status colors — the theme's mid-luminance success/warning/error vars are
+   readable on light AND dark backgrounds */
 .meter-needle.perfect {
-    background-color: #4ade80;
-    box-shadow: 0 0 10px #4ade80;
+    background-color: var(--color-success);
+    box-shadow: 0 0 10px var(--color-success);
 }
 
-/* Tailwind Green-400 */
 .meter-needle.good {
-    background-color: #86efac;
+    background-color: color-mix(in srgb, var(--color-success) 60%, var(--color-text-main));
 }
 
-/* Tailwind Green-300 */
 .meter-needle.okay {
-    background-color: #facc15;
+    background-color: var(--color-warning);
 }
 
-/* Tailwind Yellow-400 */
 .meter-needle.poor {
-    background-color: #f87171;
+    background-color: var(--color-error);
 }
 
-/* Tailwind Red-400 */
+.tuning-readout .cents-value.perfect {
+    color: var(--color-success);
+}
+
+.tuning-readout .cents-value.good {
+    color: color-mix(in srgb, var(--color-success) 60%, var(--color-text-main));
+}
+
+.tuning-readout .cents-value.okay {
+    color: var(--color-warning);
+}
+
+.tuning-readout .cents-value.poor {
+    color: var(--color-error);
+}
+
+.tuning-meter-container.inactive .meter-needle {
+    background: var(--color-text-muted);
+    box-shadow: none;
+}
 
 .tuning-readout {
     display: flex;
@@ -97,22 +128,10 @@
 .tuning-readout .note-name {
     font-size: 1.25rem;
     font-weight: bold;
-    color: white;
+    color: var(--color-text-main);
 }
 
 .tuning-readout .cents-value {
     font-size: 0.9rem;
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--color-text-muted);
 }
-
-.tuning-readout .cents-value.perfect {
-    color: #4ade80;
-}
-
-.tuning-readout .cents-value.okay {
-    color: #facc15;
-}
-
-.tuning-readout .cents-value.poor {
-    color: #f87171;
-}
\ No newline at end of file
diff --git a/src/components/TuningMeter.tsx b/src/components/TuningMeter.tsx
index ae531d1..414f171 100644
--- a/src/components/TuningMeter.tsx
+++ b/src/components/TuningMeter.tsx
@@ -1,36 +1,40 @@
-
 import React from 'react';
 import './TuningMeter.css';
 
 interface TuningMeterProps {
-    cents: number; // Deviation in cents from nearest note (-50 to +50 usually)
-    noteName: string; // The detected note name (e.g. "A4")
+    /** Deviation in cents from nearest note (-50 to +50 usually), already
+     *  smoothed by the detection loop (display-only value). Null = no signal. */
+    cents: number | null;
+    /** The detected note name (e.g. "A4"). Null = no signal. */
+    noteName: string | null;
 }
 
 export const TuningMeter: React.FC<TuningMeterProps> = ({ cents, noteName }) => {
-    // Clamp cents for display (-50 to 50)
-    const clampedCents = Math.max(-50, Math.min(50, cents));
+    const hasSignal = cents !== null && noteName !== null;
 
-    // Map -50..50 to 0..100% for position
-    // -50 cents -> 0%
-    // 0 cents -> 50%
-    // 50 cents -> 100%
+    // Clamp for display (-50 to 50), then map to 0..100%.
+    // No CSS transition: cents updates every detection frame (~60 fps) and is
+    // EMA-smoothed upstream — see usePitchDetector / AppConfig. When there is
+    // no signal the needle parks in the middle and the widget dims.
+    const clampedCents = Math.max(-50, Math.min(50, cents ?? 0));
     const positionPercent = ((clampedCents + 50) / 100) * 100;
 
-    // Color determination
+    // Status color reacts instantly to the raw (unsmoothed) value
     let statusClass = 'neutral';
-    if (Math.abs(cents) < 5) {
-        statusClass = 'perfect'; // Green
-    } else if (Math.abs(cents) < 15) {
-        statusClass = 'good'; // Green-ish
-    } else if (Math.abs(cents) < 30) {
-        statusClass = 'okay'; // Yellow
-    } else {
-        statusClass = 'poor'; // Red
+    if (hasSignal) {
+        if (Math.abs(cents!) < 5) {
+            statusClass = 'perfect'; // Green
+        } else if (Math.abs(cents!) < 15) {
+            statusClass = 'good'; // Green-ish
+        } else if (Math.abs(cents!) < 30) {
+            statusClass = 'okay'; // Yellow
+        } else {
+            statusClass = 'poor'; // Red
+        }
     }
 
     return (
-        <div className="tuning-meter-container">
+        <div className={`tuning-meter-container ${hasSignal ? '' : 'inactive'}`}>
             <div className="meter-scale">
                 <div className="tick tick-left">-50</div>
                 <div className="tick tick-center">0</div>
@@ -39,7 +43,7 @@ export const TuningMeter: React.FC<TuningMeterProps> = ({ cents, noteName }) =>
                 {/* Center Marker Line */}
                 <div className="center-line"></div>
 
-                {/* The Needle/Indicator */}
+                {/* The Needle/Indicator — position updated directly per frame */}
                 <div
                     className={`meter-needle ${statusClass}`}
                     style={{ left: `${positionPercent}%` }}
@@ -48,9 +52,9 @@ export const TuningMeter: React.FC<TuningMeterProps> = ({ cents, noteName }) =>
                 </div>
             </div>
             <div className="tuning-readout">
-                <span className="note-name">{noteName}</span>
+                <span className="note-name">{hasSignal ? noteName : '—'}</span>
                 <span className={`cents-value ${statusClass}`}>
-                    {cents > 0 ? '+' : ''}{Math.round(cents)} ct
+                    {hasSignal ? `${cents! > 0 ? '+' : ''}${Math.round(cents!)} ct` : '—'}
                 </span>
             </div>
         </div>
diff --git a/src/context/SettingsContext.tsx b/src/context/SettingsContext.tsx
deleted file mode 100644
index 93e6a6a..0000000
--- a/src/context/SettingsContext.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { createContext, useContext, useState, type ReactNode } from 'react';
-import { type AppSettings, DEFAULT_SETTINGS } from '../types/SettingsTypes';
-
-interface SettingsContextType {
-    settings: AppSettings;
-    updateSettings: (newSettings: AppSettings | ((prev: AppSettings) => AppSettings)) => void;
-    updateSetting: <K extends keyof AppSettings>(key: K, value: AppSettings[K]) => void;
-}
-
-const SettingsContext = createContext<SettingsContextType | undefined>(undefined);
-
-export const SettingsProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-    const [settings, setSettings] = useState<AppSettings>(DEFAULT_SETTINGS);
-
-    const updateSettings = (newSettings: AppSettings | ((prev: AppSettings) => AppSettings)) => {
-        setSettings(newSettings);
-    };
-
-    const updateSetting = <K extends keyof AppSettings>(key: K, value: AppSettings[K]) => {
-        setSettings(prev => ({ ...prev, [key]: value }));
-    };
-
-    return (
-        <SettingsContext.Provider value={{ settings, updateSettings, updateSetting }}>
-            {children}
-        </SettingsContext.Provider>
-    );
-};
-
-export const useSettings = () => {
-    const context = useContext(SettingsContext);
-    if (context === undefined) {
-        throw new Error('useSettings must be used within a SettingsProvider');
-    }
-    return context;
-};
diff --git a/src/context/SettingsProvider.tsx b/src/context/SettingsProvider.tsx
new file mode 100644
index 0000000..ae06a3e
--- /dev/null
+++ b/src/context/SettingsProvider.tsx
@@ -0,0 +1,27 @@
+import React, { useCallback, useMemo, useState, type ReactNode } from 'react';
+import { type AppSettings, DEFAULT_SETTINGS } from '../types/SettingsTypes';
+import { SettingsContext, type SettingsContextType } from './settings-context';
+
+export const SettingsProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+    const [settings, setSettings] = useState<AppSettings>(DEFAULT_SETTINGS);
+
+    // Stable identities so consumers can safely use these in effect deps
+    const updateSettings = useCallback<SettingsContextType['updateSettings']>((newSettings) => {
+        setSettings(newSettings);
+    }, []);
+
+    const updateSetting = useCallback<SettingsContextType['updateSetting']>((key, value) => {
+        setSettings(prev => ({ ...prev, [key]: value }));
+    }, []);
+
+    const value = useMemo<SettingsContextType>(
+        () => ({ settings, updateSettings, updateSetting }),
+        [settings, updateSettings, updateSetting]
+    );
+
+    return (
+        <SettingsContext.Provider value={value}>
+            {children}
+        </SettingsContext.Provider>
+    );
+};
diff --git a/src/context/settings-context.ts b/src/context/settings-context.ts
new file mode 100644
index 0000000..61d779c
--- /dev/null
+++ b/src/context/settings-context.ts
@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+import { type AppSettings } from '../types/SettingsTypes';
+
+export interface SettingsContextType {
+    settings: AppSettings;
+    updateSettings: (newSettings: AppSettings | ((prev: AppSettings) => AppSettings)) => void;
+    updateSetting: <K extends keyof AppSettings>(key: K, value: AppSettings[K]) => void;
+}
+
+export const SettingsContext = createContext<SettingsContextType | undefined>(undefined);
diff --git a/src/context/useSettings.ts b/src/context/useSettings.ts
new file mode 100644
index 0000000..650f578
--- /dev/null
+++ b/src/context/useSettings.ts
@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { SettingsContext } from './settings-context';
+
+export const useSettings = () => {
+    const context = useContext(SettingsContext);
+    if (context === undefined) {
+        throw new Error('useSettings must be used within a SettingsProvider');
+    }
+    return context;
+};
diff --git a/src/main.tsx b/src/main.tsx
index fa80394..9702dda 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,7 +3,7 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './styles/variables.css'
 import App from './App.tsx'
-import { SettingsProvider } from './context/SettingsContext.tsx'
+import { SettingsProvider } from './context/SettingsProvider.tsx'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
diff --git a/src/music/NoteUtils.ts b/src/music/NoteUtils.ts
index becd93e..d2a5285 100644
--- a/src/music/NoteUtils.ts
+++ b/src/music/NoteUtils.ts
@@ -111,8 +111,8 @@ export function getNoteInKey(midi: number, keySignature: string): VexFlowNoteSpe
     // In start keys (C, Am), no accidentals in key.
 
     // Parse the rawName: "F#" -> step "F", mod "#"
-    let step = rawName.charAt(0);
-    let mod = rawName.length > 1 ? rawName.charAt(1) : "";
+    const step = rawName.charAt(0);
+    const mod = rawName.length > 1 ? rawName.charAt(1) : "";
 
     // VexFlow Key Format: "c/4", "f/4", "fb/4"
     // We need to return the accidental to *display*.
diff --git a/src/styles/variables.css b/src/styles/variables.css
index bf803ef..fac8fc6 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -1,6 +1,10 @@
 @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');
 
 :root {
+  /* Native form controls (select dropdowns, checkboxes, number spinners,
+     range sliders) follow this instead of keeping black-on-black in dark mode */
+  color-scheme: light;
+
   /* HSL Colors for easy manipulation */
   /* Dark Red / Brownish Tone */
   --hue-primary: 0;
@@ -54,6 +58,7 @@
 /* Auto Dark Mode (System Preference) */
 @media (prefers-color-scheme: dark) {
   :root {
+    color-scheme: dark;
     --color-bg: hsl(30, 20%, 10%);
     --color-surface: hsl(30, 20%, 15%);
     --color-text-main: hsl(30, 10%, 90%);
@@ -65,6 +70,7 @@
 
 /* Manual Dark Mode Override */
 html[data-theme="dark"] {
+  color-scheme: dark;
   --color-bg: hsl(30, 20%, 10%);
   --color-surface: hsl(30, 20%, 15%);
   --color-text-main: hsl(30, 10%, 90%);