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', + ); } /**