diff --git a/apps/web/src/styles.scss b/apps/web/src/styles.scss
index 60e038639..4e9fc76c3 100644
--- a/apps/web/src/styles.scss
+++ b/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);
         }
     }
 }
diff --git a/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.scss b/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.scss
index 36340c715..a55858215 100644
--- a/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.scss
+++ b/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) {
diff --git a/libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.scss b/libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.scss
index ee772f77f..6bbc80b9f 100644
--- a/libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.scss
+++ b/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 {
diff --git a/libs/ui/epg/src/lib/epg-progress-panel/epg-progress-panel.component.scss b/libs/ui/epg/src/lib/epg-progress-panel/epg-progress-panel.component.scss
index f3d46d3c2..61914a45c 100644
--- a/libs/ui/epg/src/lib/epg-progress-panel/epg-progress-panel.component.scss
+++ b/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 {
diff --git a/libs/ui/playback/src/lib/embedded-mpv-player/embedded-mpv-player.component.scss b/libs/ui/playback/src/lib/embedded-mpv-player/embedded-mpv-player.component.scss
index 94e4fca2d..2206462b6 100644
--- a/libs/ui/playback/src/lib/embedded-mpv-player/embedded-mpv-player.component.scss
+++ b/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 {
diff --git a/libs/ui/styles/_detail-view.scss b/libs/ui/styles/_detail-view.scss
index 49f8c0f50..e07d954cc 100644
--- a/libs/ui/styles/_detail-view.scss
+++ b/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 {
diff --git a/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.scss b/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.scss
index d1ac130d1..1fe3199f0 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.scss
+++ b/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 ───────────────────────────────────────────────────────────────────
diff --git a/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.scss b/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.scss
index e2e03a3f5..084577aca 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.scss
+++ b/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 {