biss/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

夜间模式

Browse Source
This commit is contained in:
biss
2026-06-18 18:38:38 +08:00 Unverified
parent aa87051c15
commit b066a94ce3
8 changed files with 896 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/BaseLayout.astro
+66 -1
View File
@@ -19,6 +19,14 @@ const currentYear = new Date().getFullYear();
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content={description} />
<link rel="icon" href="/images/Bi.ico" />
<script is:inline>
(() => {
const storageKey = 'site-theme';
const savedTheme = localStorage.getItem(storageKey);
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
document.documentElement.dataset.theme = savedTheme || systemTheme;
})();
</script>
<link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/instantsearch.css/themes/reset-min.css" />
<link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
<title>{pageTitle}</title>
@@ -27,12 +35,25 @@ const currentYear = new Date().getFullYear();
<header class="site-header">
<nav class="nav">
<a class="brand" href="/">Bi's Blog</a>
<div class="nav-links">
<div class="nav-links nav-center">
<a href="/archives/">归档</a>
<a href="/categories/">分类</a>
<a href="/tags/">标签</a>
<a href="/shuoshuo/">说说</a>
<a href="/about/">关于</a>
<a href="/link/">友链</a>
</div>
<div class="nav-links nav-actions">
<button class="nav-random" type="button" onclick="randomPost()" aria-label="前往随机文章" title="前往随机文章">
<svg aria-hidden="true" viewBox="0 0 24 24">
<path d="M16 3h5v5" />
<path d="M4 20 21 3" />
<path d="M21 16v5h-5" />
<path d="M15 15l6 6" />
<path d="M4 4l5 5" />
</svg>
<span>随机文章</span>
</button>
<button class="nav-search search-typesense-trigger" type="button" aria-label="搜索" title="搜索">
<svg aria-hidden="true" viewBox="0 0 24 24">
<path d="m21 21-4.3-4.3" />
@@ -40,6 +61,22 @@ const currentYear = new Date().getFullYear();
</svg>
<span>搜索</span>
</button>
<button class="theme-toggle" type="button" aria-label="切换夜间模式" title="切换夜间模式" data-theme-toggle>
<svg class="theme-toggle-sun" aria-hidden="true" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="4" />
<path d="M12 2v2" />
<path d="M12 20v2" />
<path d="m4.93 4.93 1.41 1.41" />
<path d="m17.66 17.66 1.41 1.41" />
<path d="M2 12h2" />
<path d="M20 12h2" />
<path d="m6.34 17.66-1.41 1.41" />
<path d="m19.07 4.93-1.41 1.41" />
</svg>
<svg class="theme-toggle-moon" aria-hidden="true" viewBox="0 0 24 24">
<path d="M20.99 13.49A8.5 8.5 0 1 1 10.51 3.01 6.5 6.5 0 1 0 20.99 13.49Z" />
</svg>
</button>
</div>
</nav>
</header>
@@ -104,8 +141,36 @@ const currentYear = new Date().getFullYear();
<script is:inline src="https://cdn.jsdmirror.com/npm/instantsearch.js@4.56.0"></script>
<script is:inline src="https://cdn.jsdmirror.com/npm/typesense-instantsearch-adapter@2.7.0/dist/typesense-instantsearch-adapter.min.js"></script>
<script is:inline src="https://cdn.jsdmirror.com/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<script is:inline src="/js/random.js"></script>
<script is:inline src="/js/search/typesense-search.js"></script>
<script is:inline>
(() => {
const storageKey = 'site-theme';
const root = document.documentElement;
const button = document.querySelector('[data-theme-toggle]');
const media = window.matchMedia('(prefers-color-scheme: dark)');
const getSystemTheme = () => (media.matches ? 'dark' : 'light');
const getTheme = () => localStorage.getItem(storageKey) || getSystemTheme();
function applyTheme(theme) {
root.dataset.theme = theme;
button?.setAttribute('aria-label', theme === 'dark' ? '切换到日间模式' : '切换到夜间模式');
button?.setAttribute('title', theme === 'dark' ? '切换到日间模式' : '切换到夜间模式');
}
applyTheme(getTheme());
button?.addEventListener('click', () => {
const nextTheme = root.dataset.theme === 'dark' ? 'light' : 'dark';
localStorage.setItem(storageKey, nextTheme);
applyTheme(nextTheme);
});
media.addEventListener('change', () => {
if (!localStorage.getItem(storageKey)) applyTheme(getSystemTheme());
});
})();
(() => {
const runtime = document.getElementById('site-runtime');
if (!runtime) return;