From 5e8de27cb55806586b4c78df172f0df3e864d8be Mon Sep 17 00:00:00 2001
From: Youzini-afk <13153778771cx@gmail.com>
Date: Mon, 6 Apr 2026 23:31:27 +0800
Subject: [PATCH] fix(ui): theme-aware config inputs and color-scheme for light
 panels

Made-with: Cursor
---
 style.css | 25 +++++++++++++++++--------
 themes.js |  7 +++++++
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/style.css b/style.css
index d3668c3..0a282ed 100644
--- a/style.css
+++ b/style.css
@@ -41,6 +41,12 @@
   transform: translateY(12px) scale(0.98);
   transition: transform 0.25s ease;
   resize: both;
+  /* 默认暗色表单范式；亮色主题见 :root[data-bme-color-scheme="light"] */
+  color-scheme: dark;
+}
+
+:root[data-bme-color-scheme="light"] #st-bme-panel {
+  color-scheme: light;
 }
 
 #st-bme-panel-overlay.active #st-bme-panel {
@@ -1266,8 +1272,9 @@
 .bme-config-input,
 .bme-config-textarea {
   width: 100%;
-  background: rgba(0, 0, 0, 0.22);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-sizing: border-box;
+  background-color: var(--bme-surface-high);
+  border: 1px solid var(--bme-border);
   border-radius: 10px;
   padding: 10px 12px;
   color: var(--bme-on-surface);
@@ -1276,7 +1283,7 @@
   transition:
     border-color 0.15s,
     box-shadow 0.15s,
-    background 0.15s;
+    background-color 0.15s;
 }
 
 .bme-config-input:focus,
@@ -1287,8 +1294,10 @@
 
 .bme-config-input:disabled,
 .bme-config-textarea:disabled {
-  background: rgba(255, 255, 255, 0.035);
-  color: rgba(255, 255, 255, 0.45);
+  background-color: var(--bme-surface-low);
+  color: var(--bme-on-surface-dim);
+  border-color: var(--bme-border);
+  opacity: 0.85;
   cursor: not-allowed;
 }
 
@@ -1874,7 +1883,7 @@
   -webkit-appearance: none;
   appearance: none;
   height: 4px;
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--bme-border);
   border-radius: 2px;
   outline: none;
   cursor: pointer;
@@ -1893,7 +1902,7 @@
 }
 
 .bme-range-input::-webkit-slider-thumb:hover {
-  box-shadow: 0 0 0 4px rgba(233, 69, 96, 0.15);
+  box-shadow: 0 0 0 4px var(--bme-primary-dim);
 }
 
 .bme-range-input::-moz-range-thumb {
@@ -1907,7 +1916,7 @@
 
 .bme-range-input::-moz-range-track {
   height: 4px;
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--bme-border);
   border-radius: 2px;
 }
 
diff --git a/themes.js b/themes.js
index 59448ec..6d4e40a 100644
--- a/themes.js
+++ b/themes.js
@@ -169,6 +169,9 @@ export const THEMES = {
     },
 };
 
+/** 使用亮色 color-scheme 的面板主题（原生 number/select 等控件配色） */
+export const LIGHT_PANEL_THEMES = new Set(['paperDawn', 'glacierSky']);
+
 /**
  * 将主题配色应用为 CSS 变量
  * @param {string} themeName - crimson | cyan | amber | violet | paperDawn | glacierSky
@@ -209,6 +212,10 @@ export function applyTheme(themeName, root = null) {
         el.style.setProperty(key, value);
     }
     el.setAttribute('data-bme-theme', themeName);
+    el.setAttribute(
+        'data-bme-color-scheme',
+        LIGHT_PANEL_THEMES.has(themeName) ? 'light' : 'dark',
+    );
 }
 
 /**