jens/sheetmusictrainer
1
0
Fork 0
mirror of https://github.com/9x/sheetmusictrainer.git synced 2026-11-03 13:53:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Dark mode contrast, tuner display and misc UI fixes

Browse Source 
- 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:
Jens Mohrmann
2026-09-13 18:52:27 +02:00
parent 079d574b66
commit 6e60ced477
13 changed files with 212 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/App.css
View File

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

26
src/components/Controls.tsx
View File

@@ -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

2
src/components/PianoKeys.tsx
View File

@@ -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 (

51
src/components/SheetMusic.tsx
View File

@@ -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" />;
};

81
src/components/TuningMeter.css
View File

@@ -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;
}

48
src/components/TuningMeter.tsx
View File

@@ -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>

36
src/context/SettingsContext.tsx
View File

@@ -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;
};

27
src/context/SettingsProvider.tsx Normal file
View File

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

10
src/context/settings-context.ts Normal file
View File

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

10
src/context/useSettings.ts Normal file
View File

@@ -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;
};

2
src/main.tsx
View File

@@ -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>

4
src/music/NoteUtils.ts
View File

@@ -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*.

6
src/styles/variables.css
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%);