chill/menav
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(theme): 新增主题模式配置，支持跟随系统

Browse Source 
- 新增 site.theme.mode 配置（dark/light/system）
- 支持 prefers-color-scheme 系统主题跟随
- 用户手动切换后停止跟随并持久化

ref #36
This commit is contained in:
rbetree
2026-01-17 00:59:05 +08:00
parent d19c4da51d
commit 1049566937
4 changed files with 138 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
templates/layouts/default.hbs
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="zh-CN">
<html lang="zh-CN" data-theme-mode="{{#if site.theme.mode}}{{site.theme.mode}}{{else}}dark{{/if}}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -18,7 +18,26 @@
(function() {
// 读取并应用主题设置
var savedTheme = localStorage.getItem('theme');
var defaultThemeMode = document.documentElement.getAttribute('data-theme-mode') || 'dark';
defaultThemeMode = String(defaultThemeMode).trim().toLowerCase();
var shouldUseLight = false;
if (savedTheme === 'light') {
shouldUseLight = true;
} else if (savedTheme === 'dark') {
shouldUseLight = false;
} else if (defaultThemeMode === 'light') {
shouldUseLight = true;
} else if (defaultThemeMode === 'system') {
try {
shouldUseLight =
window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;
} catch (e) {
shouldUseLight = false;
}
}
if (shouldUseLight) {
document.documentElement.classList.add('theme-preload');
}
@@ -75,6 +94,7 @@
{{{navigation}}}
{{/if}}
</div>
<div class="sidebar-submenu-panel" aria-label="页面分类" data-container="sidebar-submenu"></div>
</div>
<div class="sidebar-social" data-container="social-links">