diff --git a/web/src/lib/components/ui/RangeSelector.svelte b/web/src/lib/components/ui/RangeSelector.svelte
index 83268d302..b20bc2402 100644
--- a/web/src/lib/components/ui/RangeSelector.svelte
+++ b/web/src/lib/components/ui/RangeSelector.svelte
@@ -122,8 +122,8 @@
 
 	let palette = $derived(
 		muted && !interacting
-			? "--range-accent: var(--color-foreground-placeholder); --range-fill: var(--color-background-inset); --range-mid: var(--color-background-muted)"
-			: "--range-accent: var(--color-background-info-emphasis); --range-fill: var(--color-background-info-subtle); --range-mid: var(--color-background-info-subtle-hover)"
+			? "--range-accent: var(--color-foreground-placeholder); --range-fill: var(--color-background-inset); --range-mid: var(--color-background-muted); --range-line: light-dark(#e2e4e8, #515968)"
+			: "--range-accent: var(--color-background-info-emphasis); --range-fill: var(--color-background-info-subtle); --range-mid: var(--color-background-info-subtle-hover); --range-line: light-dark(#dae3ff, #403ab3)"
 	);
 
 	let list: HTMLDivElement;
diff --git a/web/src/lib/components/ui/RangeSelectorRow.svelte b/web/src/lib/components/ui/RangeSelectorRow.svelte
index 60df9f095..b32b10268 100644
--- a/web/src/lib/components/ui/RangeSelectorRow.svelte
+++ b/web/src/lib/components/ui/RangeSelectorRow.svelte
@@ -22,7 +22,7 @@
 		<GraphCell
 			band={displayed}
 			fill={displayed !== "middle"}
-			style="--graph-line: var(--range-accent); --graph-fill: var(--range-mid); --graph-dot: {displayed ===
+			style="--graph-line: var(--range-line); --graph-fill: var(--range-mid); --graph-dot: {displayed ===
 			'middle'
 				? 'var(--range-mid)'
 				: 'var(--range-accent)'}"