From b09e2f4ef08f1fc8980a7f40a1f042033557f4e6 Mon Sep 17 00:00:00 2001
From: KenanZhu <3471685733@qq.com>
Date: Thu, 4 Jun 2026 14:52:14 +0800
Subject: [PATCH] style(preview): theme-matching scrollbar colour
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaced neutral-gray scrollbar with muted-steel-blue
rgba(107,125,153,...) — the page's --muted colour at varying
opacities. Thumb blends with the navy-blue background palette
(#0b1120 / #151d2e / #1e2d45) rather than standing out as
an unrelated grey element.

Page-level + iframe-injected scrollbar: unified palette.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 preview/index.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/preview/index.html b/preview/index.html
index f39d503..f40070f 100644
--- a/preview/index.html
+++ b/preview/index.html
@@ -76,19 +76,19 @@ body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:v
 
 /* ── Scrollbar — neutral gray, consistent across browsers ── */
 /* Chrome 121+ / Edge 121+ (standards-track) */
-:root{scrollbar-color:rgba(128,128,128,.30) transparent;scrollbar-width:thin}
+:root{scrollbar-color:rgba(107,125,153,.25) transparent;scrollbar-width:thin}
 /* WebKit (Chrome, Safari, Edge) */
 ::-webkit-scrollbar{width:6px;height:6px}
 ::-webkit-scrollbar-track{background:transparent!important}
 ::-webkit-scrollbar-thumb{
-  background-color:rgba(128,128,128,.30)!important;
+  background-color:rgba(107,125,153,.25)!important;
   border-radius:3px;
   border:1px solid rgba(255,255,255,.06);
 }
-::-webkit-scrollbar-thumb:hover{background-color:rgba(128,128,128,.45)!important}
+::-webkit-scrollbar-thumb:hover{background-color:rgba(107,125,153,.45)!important}
 ::-webkit-scrollbar-corner{background:transparent!important}
 /* Firefox */
-#preview-area,#panel{scrollbar-width:thin;scrollbar-color:rgba(128,128,128,.30) transparent}
+#preview-area,#panel{scrollbar-width:thin;scrollbar-color:rgba(107,125,153,.25) transparent}
 /* Legacy Edge / IE */
 #preview-area,#panel{-ms-overflow-style:-ms-autohiding-scrollbar}
 /* Chrome 108+ overlay */
@@ -202,7 +202,7 @@ function render() {
   const raw = rendered[state.theme]?.[state.template];
   let content = raw ? transform(raw, state.client) : '<p style=\"color:red;padding:20px\">Not found: '+state.theme+'/'+state.template+'</p>';
   // Inject invisible scrollbar into iframe content for immersive preview
-  content = content.replace('</head>', '<style>html{scrollbar-color:rgba(128,128,128,.30) transparent;scrollbar-width:thin;-ms-overflow-style:-ms-autohiding-scrollbar}html::-webkit-scrollbar{width:6px;height:6px}html::-webkit-scrollbar-track{background:transparent!important}html::-webkit-scrollbar-thumb{background-color:rgba(128,128,128,.30)!important;border-radius:3px;border:1px solid rgba(128,128,128,.08)}html::-webkit-scrollbar-thumb:hover{background-color:rgba(128,128,128,.45)!important}@supports(overflow:overlay){html{overflow:overlay}}</style></head>');
+  content = content.replace('</head>', '<style>html{scrollbar-color:rgba(107,125,153,.25) transparent;scrollbar-width:thin;-ms-overflow-style:-ms-autohiding-scrollbar}html::-webkit-scrollbar{width:6px;height:6px}html::-webkit-scrollbar-track{background:transparent!important}html::-webkit-scrollbar-thumb{background-color:rgba(107,125,153,.25)!important;border-radius:3px;border:1px solid rgba(128,128,128,.08)}html::-webkit-scrollbar-thumb:hover{background-color:rgba(107,125,153,.45)!important}@supports(overflow:overlay){html{overflow:overlay}}</style></head>');
 
   frame.onload = function() {
     loading.style.display = 'none';