mirror of
https://github.com/Youzini-afk/ST-Bionic-Memory-Ecology.git
synced 2026-05-15 22:30:38 +08:00
Merge branch 'Youzini-afk:main' into main
This commit is contained in:
Hao19911125
2
index.js
2
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
|
||||
};
|
||||
|
||||
// ==================== 状态 ====================
|
||||
|
||||
46
panel.html
46
panel.html
@@ -42,6 +42,14 @@
|
||||
<span class="bme-theme-swatch" style="background: #b388ff"></span
|
||||
>紫雾迷离
|
||||
</button>
|
||||
<button class="bme-theme-option" data-theme="paperDawn" type="button">
|
||||
<span class="bme-theme-swatch" style="background: #0d9488"></span
|
||||
>晨光纸感
|
||||
</button>
|
||||
<button class="bme-theme-option" data-theme="glacierSky" type="button">
|
||||
<span class="bme-theme-swatch" style="background: #2563eb"></span
|
||||
>冰川晴空
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@@ -2288,6 +2296,44 @@
|
||||
><i class="fa-solid fa-check"></i
|
||||
></span>
|
||||
</button>
|
||||
<button
|
||||
class="bme-theme-card"
|
||||
data-theme="paperDawn"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="bme-theme-card-swatch"
|
||||
style="background: #0d9488"
|
||||
></span>
|
||||
<span class="bme-theme-card-copy">
|
||||
<span class="bme-theme-card-title">晨光纸感</span>
|
||||
<span class="bme-theme-card-desc"
|
||||
>亮色暖纸面，青绿主色与琥珀强调，白天阅读友好。</span
|
||||
>
|
||||
</span>
|
||||
<span class="bme-theme-card-check"
|
||||
><i class="fa-solid fa-check"></i
|
||||
></span>
|
||||
</button>
|
||||
<button
|
||||
class="bme-theme-card"
|
||||
data-theme="glacierSky"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="bme-theme-card-swatch"
|
||||
style="background: #2563eb"
|
||||
></span>
|
||||
<span class="bme-theme-card-copy">
|
||||
<span class="bme-theme-card-title">冰川晴空</span>
|
||||
<span class="bme-theme-card-desc"
|
||||
>亮色冷灰底与饱和蓝，适合与系统浅色界面同屏。</span
|
||||
>
|
||||
</span>
|
||||
<span class="bme-theme-card-check"
|
||||
><i class="fa-solid fa-check"></i
|
||||
></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
25
style.css
25
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;
|
||||
}
|
||||
|
||||
|
||||
67
themes.js
67
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',
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user