mirror of
https://github.com/9x/sheetmusictrainer.git
synced 2026-11-03 22:03:54 +01:00
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:
@@ -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%);
|
||||
|
||||
Reference in New Issue
Block a user