From c509144b3020d7dd692b619015ad72f2c573293e Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Fri, 12 Jun 2026 11:38:03 +0200
Subject: [PATCH] refactor: use css variable for player segment color

---
 static/assets/style.css        |  1 +
 static/player/skip/segments.ts | 10 ++++------
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/static/assets/style.css b/static/assets/style.css
index 7ed8a72..beee574 100644
--- a/static/assets/style.css
+++ b/static/assets/style.css
@@ -45,6 +45,7 @@
   --scrollbar-track: light-dark(rgba(0, 0, 0, 0.04), rgba(244, 241, 234, 0.05));
   --scrollbar-thumb: light-dark(rgba(0, 0, 0, 0.16), rgba(244, 241, 234, 0.22));
   --scrollbar-thumb-hover: light-dark(rgba(0, 0, 0, 0.26), rgba(244, 241, 234, 0.32));
+  --player-segment: #0ea5e9;
 }
 
 html[data-theme="light"] {
diff --git a/static/player/skip/segments.ts b/static/player/skip/segments.ts
index b110d2e..b8ebec1 100644
--- a/static/player/skip/segments.ts
+++ b/static/player/skip/segments.ts
@@ -61,14 +61,12 @@ export const renderSegments = (): void => {
   const bounds = state.video.duration;
   if (bounds <= 0) return;
 
-  // create clearly visible colored bars for each segment
   state.activeSegments.forEach((s) => {
     const bar = document.createElement("div");
-    // use distinct colors so segments are readable over buffered/progress fills
-    bar.className = "absolute top-0 h-full opacity-95";
-    // distinct colors for OP/ED, rendered above buffered/progress fills
-    const t = (s.type || "").toLowerCase();
-    bar.style.backgroundColor = t === "ed" ? "#60a5fa" : "#f5c542";
+    bar.className = "absolute opacity-95";
+    bar.style.backgroundColor = "var(--player-segment)";
+    bar.style.top = "-1px";
+    bar.style.height = "calc(100% + 2px)";
     bar.style.left = `${(s.start / bounds) * 100}%`;
     bar.style.width = `${((s.end - s.start) / bounds) * 100}%`;
     track.appendChild(bar);