CN-JS-HuiBai/PromdataPanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

优化黑暗模式和白天模式

Browse Source
This commit is contained in:
CN-JS-HuiBai
2026-04-06 16:26:13 +08:00
parent 650cc6f1b5
commit fd0a52368a
2 changed files with 38 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
public/index.html
View File

@@ -437,13 +437,18 @@
<label for="logoUrlInput">Logo URL (图片链接，为空则显示默认图标)</label> <label for="logoUrlInput">Logo URL (图片链接，为空则显示默认图标)</label>
<input type="url" id="logoUrlInput" placeholder="https://example.com/logo.png"> <input type="url" id="logoUrlInput" placeholder="https://example.com/logo.png">
</div> </div>
<div class="form-group" style="margin-top: 15px;"> <div class="settings-section" style="margin-top: 25px; border-top: 1px solid var(--border-color); padding-top: 20px;">
<label for="defaultThemeInput">默认主题</label> <h4 style="font-size: 0.85rem; color: var(--accent-indigo); margin-bottom: 15px; text-transform: uppercase; letter-spacing: 0.5px;">界面外观 (Appearance)</h4>
<div class="form-group">
<label for="defaultThemeInput">色彩主题模式</label>
<select id="defaultThemeInput" <select id="defaultThemeInput"
style="padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary);"> style="padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); width: 100%;">
<option value="dark">默认夜间模式</option> <option value="auto">跟随系统主题 (Sync with OS)</option>
<option value="light">默认白天模式</option> <option value="dark">强制深色模式 (Always Dark)</option>
<option value="light">强制浅色模式 (Always Light)</option>
</select> </select>
<p style="font-size: 0.72rem; color: var(--text-muted); margin-top: 6px;">选择“跟随系统”后，应用将自动同步您操作系统或浏览器的黑暗/白天模式设置。</p>
</div>
</div> </div>
<div class="form-group" style="margin-top: 15px;"> <div class="form-group" style="margin-top: 15px;">
<label for="show95BandwidthInput">24h趋势图默认显示 95计费线</label> <label for="show95BandwidthInput">24h趋势图默认显示 95计费线</label>

26
public/js/app.js
View File

@@ -183,6 +183,17 @@
// Auth & Theme listeners // Auth & Theme listeners
dom.themeToggle.addEventListener('change', toggleTheme); dom.themeToggle.addEventListener('change', toggleTheme);
// System Theme Listener (Real-time)
const systemThemeMedia = window.matchMedia('(prefers-color-scheme: light)');
if (systemThemeMedia.addEventListener) {
systemThemeMedia.addEventListener('change', () => {
const savedTheme = localStorage.getItem('theme') || (window.SITE_SETTINGS && window.SITE_SETTINGS.default_theme) || 'dark';
if (savedTheme === 'auto') {
applyTheme('auto');
}
});
}
dom.btnLogin.addEventListener('click', openLoginModal); dom.btnLogin.addEventListener('click', openLoginModal);
dom.closeLoginModal.addEventListener('click', closeLoginModal); dom.closeLoginModal.addEventListener('click', closeLoginModal);
dom.loginForm.addEventListener('submit', handleLogin); dom.loginForm.addEventListener('submit', handleLogin);
@@ -1705,6 +1716,16 @@
networkChart.draw(); networkChart.draw();
} }
} }
// Default Theme
if (settings.default_theme) {
if (dom.defaultThemeInput) dom.defaultThemeInput.value = settings.default_theme;
// If setting is 'auto', we also sync immediately
const savedTheme = localStorage.getItem('theme');
if (!savedTheme || savedTheme === 'auto') {
applyTheme(settings.default_theme);
}
}
} }
async function saveSiteSettings() { async function saveSiteSettings() {
@@ -1723,6 +1744,11 @@
p95_type: dom.p95TypeSelect.value p95_type: dom.p95TypeSelect.value
}; };
// If user sets default to auto, we should clear their manual override or set it to auto
if (settings.default_theme === 'auto') {
localStorage.setItem('theme', 'auto');
}
dom.btnSaveSiteSettings.disabled = true; dom.btnSaveSiteSettings.disabled = true;
dom.btnSaveSiteSettings.textContent = '保存中...'; dom.btnSaveSiteSettings.textContent = '保存中...';