Dark mode contrast, tuner display and misc UI fixes

- 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.
This commit is contained in:
2026-09-13 18:52:27 +02:00
parent 079d574b66
commit 6e60ced477
13 changed files with 212 additions and 121 deletions

View File

@@ -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%);