diff --git a/index.js b/index.js
index d44eed7..36d9926 100644
--- a/index.js
+++ b/index.js
@@ -517,7 +517,7 @@ const defaultSettings = {
// UI 面板
noticeDisplayMode: "normal", // normal|compact
- panelTheme: "crimson", // 面板主题 crimson|cyan|amber|violet
+ panelTheme: "crimson", // 面板主题 crimson|cyan|amber|violet|paperDawn|glacierSky
};
// ==================== 状态 ====================
diff --git a/panel.html b/panel.html
index fd443eb..1112259 100644
--- a/panel.html
+++ b/panel.html
@@ -42,6 +42,14 @@
紫雾迷离
+
+
+
+
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 0da4106..6d4e40a 100644
--- a/themes.js
+++ b/themes.js
@@ -1,5 +1,5 @@
// ST-BME: 主题配色系统
-// 4 套 CSS 变量主题,通过 data-bme-theme 属性切换
+// 多套 CSS 变量主题,通过 data-bme-theme 属性切换
export const THEMES = {
crimson: {
@@ -111,11 +111,70 @@ export const THEMES = {
nodeSynopsis: '#ce93d8',
nodeReflection: '#80deea',
},
+ /** 亮色 · 晨光纸感(暖纸面 + 青绿主色 + 琥珀强调) */
+ paperDawn: {
+ name: '晨光纸感',
+ primary: '#0d9488',
+ primaryDim: 'rgba(13, 148, 136, 0.14)',
+ primaryGlow: 'rgba(13, 148, 136, 0.32)',
+ primaryText: '#0f766e',
+ secondary: '#d97706',
+ accent2: '#0284c7',
+ accent3: '#ea580c',
+ surface: '#f7f4ef',
+ surfaceContainer: '#fffcf7',
+ surfaceHigh: '#efeae2',
+ surfaceHighest: '#e2ddd4',
+ surfaceLow: '#faf8f5',
+ surfaceLowest: '#f0ebe4',
+ onSurface: '#1c1917',
+ onSurfaceDim: 'rgba(28, 25, 23, 0.62)',
+ border: 'rgba(28, 25, 23, 0.09)',
+ borderActive: 'rgba(13, 148, 136, 0.42)',
+ nodeCharacter: '#ea580c',
+ nodeEvent: '#0284c7',
+ nodeLocation: '#16a34a',
+ nodeThread: '#d97706',
+ nodeRule: '#7c3aed',
+ nodeSynopsis: '#0d9488',
+ nodeReflection: '#64748b',
+ },
+ /** 亮色 · 冰川晴空(冷灰底 + 蓝主色 + 青/紫辅色) */
+ glacierSky: {
+ name: '冰川晴空',
+ primary: '#2563eb',
+ primaryDim: 'rgba(37, 99, 235, 0.12)',
+ primaryGlow: 'rgba(37, 99, 235, 0.28)',
+ primaryText: '#1d4ed8',
+ secondary: '#0891b2',
+ accent2: '#7c3aed',
+ accent3: '#f59e0b',
+ surface: '#f8fafc',
+ surfaceContainer: '#ffffff',
+ surfaceHigh: '#e2e8f0',
+ surfaceHighest: '#cbd5e1',
+ surfaceLow: '#f1f5f9',
+ surfaceLowest: '#e2e8f0',
+ onSurface: '#0f172a',
+ onSurfaceDim: 'rgba(15, 23, 42, 0.62)',
+ border: 'rgba(15, 23, 42, 0.08)',
+ borderActive: 'rgba(37, 99, 235, 0.42)',
+ nodeCharacter: '#c026d3',
+ nodeEvent: '#0369a1',
+ nodeLocation: '#059669',
+ nodeThread: '#f59e0b',
+ nodeRule: '#7c3aed',
+ nodeSynopsis: '#2563eb',
+ nodeReflection: '#0891b2',
+ },
};
+/** 使用亮色 color-scheme 的面板主题(原生 number/select 等控件配色) */
+export const LIGHT_PANEL_THEMES = new Set(['paperDawn', 'glacierSky']);
+
/**
* 将主题配色应用为 CSS 变量
- * @param {string} themeName - crimson | cyan | amber | violet
+ * @param {string} themeName - crimson | cyan | amber | violet | paperDawn | glacierSky
* @param {HTMLElement} [root] - 目标元素,默认 document.documentElement
*/
export function applyTheme(themeName, root = null) {
@@ -153,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',
+ );
}
/**