fix(theme): make scrollbars follow the app theme instead of the OS color scheme (#1179)

On Windows with a light OS theme, scrollbars rendered light even when the
app was switched to dark. Two combined causes:

- The page never declared `color-scheme`, so Chromium colored native
  scrollbars from the OS preference. Declare `color-scheme: light` on html
  and flip it to `dark` via `html:has(> body.dark-theme)` plus the
  `.dark-theme` block itself.
- Scrollbar styling referenced `--mat-sys-*` tokens, which are never
  emitted by the current Material theme setup (mat.define-theme +
  all-component-themes does not produce system tokens). Those
  `scrollbar-color` declarations computed to `auto`, falling back to the
  native (light) scrollbar. Switch scrollbar styling to the `--app-muted-color`
  design token (defined for both themes), replace hardcoded white
  `rgba(255,255,255,.08)` thumbs, and add an explicit `scrollbar-color`
  where only `scrollbar-width: thin` was set.

Verified live in Electron via CDP in both themes: scrollbar-color resolves
and scrollbars render dark in dark theme regardless of the OS setting.

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

apps/web/src/styles.scss

@@ -108,6 +108,20 @@ body.frameless-platform #epg-navigation {
 }
 
 // ─── Base ─────────────────────────────────────────────────────────────────────
+// Native UI (scrollbars, form controls, popups) must follow the app theme,
+// not the OS preference. Chromium colors unstyled/native scrollbars from the
+// element's color-scheme, so declare it explicitly for both themes.
+html {
+    color-scheme: light;
+}
+
+// The root scroller (html) sits outside body.dark-theme, so flip it via
+// :has(); the color-scheme declaration in .dark-theme below keeps the body
+// subtree covered in engines without :has() support.
+html:has(> body.dark-theme) {
+    color-scheme: dark;
+}
+
 body,
 html {
     user-select: none;
@@ -155,6 +169,7 @@ textarea,
 // ─── Dark Theme ───────────────────────────────────────────────────────────────
 .dark-theme {
     background: var(--mat-sys-surface) !important;
+    color-scheme: dark;
 
     // Refined scrollbar for dark mode
     ::-webkit-scrollbar {
@@ -167,11 +182,15 @@ textarea,
     }
 
     ::-webkit-scrollbar-thumb {
-        background-color: var(--mat-sys-outline-variant);
+        background-color: color-mix(
+            in srgb,
+            var(--app-muted-color) 70%,
+            transparent
+        );
         border-radius: 999px;
 
         &:hover {
-            background-color: var(--mat-sys-outline);
+            background-color: var(--app-muted-color);
         }
     }
 }

libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.scss

@@ -245,7 +245,8 @@ app-grid-list {
     padding: 16px 20px 20px;
     display: block;
     scrollbar-width: thin;
-    scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
+    scrollbar-color: color-mix(in srgb, var(--app-muted-color) 55%, transparent)
+        transparent;
 }
 
 @media (max-width: 768px) {

libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.scss

@@ -77,7 +77,8 @@ app-grid-list.live-all-items-grid {
     overflow-y: auto;
     padding: 16px 20px 20px;
     scrollbar-width: thin;
-    scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
+    scrollbar-color: color-mix(in srgb, var(--app-muted-color) 55%, transparent)
+        transparent;
 }
 
 .loading-indicator {

libs/ui/epg/src/lib/epg-progress-panel/epg-progress-panel.component.scss

@@ -120,6 +120,8 @@
     overflow-y: auto;
     padding: 4px 0;
     scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--app-muted-color) 55%, transparent)
+        transparent;
 }
 
 .import-item {

libs/ui/playback/src/lib/embedded-mpv-player/embedded-mpv-player.component.scss

@@ -454,6 +454,8 @@
     max-height: 240px;
     overflow-y: auto;
     scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--app-muted-color) 55%, transparent)
+        transparent;
 }
 
 .embedded-mpv-player__audio-track {

libs/ui/styles/_detail-view.scss

@@ -223,6 +223,12 @@
             overflow-x: auto;
             padding-bottom: 8px;
             scrollbar-width: thin;
+            scrollbar-color: color-mix(
+                    in srgb,
+                    var(--app-muted-color) 55%,
+                    transparent
+                )
+                transparent;
         }
 
         &__similar-card {

libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.scss

@@ -89,7 +89,8 @@
     overflow-x: hidden;
     padding: 6px;
     scrollbar-width: thin;
-    scrollbar-color: var(--mat-sys-outline-variant) transparent;
+    scrollbar-color: color-mix(in srgb, var(--app-muted-color) 55%, transparent)
+        transparent;
 }
 
 // ─── Group ───────────────────────────────────────────────────────────────────

libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.scss

@@ -177,7 +177,8 @@ app-workspace-context-category-view {
     overflow-x: hidden;
     overscroll-behavior: contain;
     scrollbar-width: thin;
-    scrollbar-color: var(--mat-sys-outline-variant) transparent;
+    scrollbar-color: color-mix(in srgb, var(--app-muted-color) 55%, transparent)
+        transparent;
 }
 
 .context-skeleton {