99 lines
4.2 KiB
HTML
99 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-Hant">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{% block title %}alterdb{% endblock %}</title>
|
|
<script>
|
|
// 首幀繪製前套用手動選擇的主題，避免閃爍；無記錄時跟隨系統偏好。
|
|
// 必須內聯且同步執行，置於樣式之後、body 之前。
|
|
(function () {
|
|
try {
|
|
var theme = localStorage.getItem('theme');
|
|
if (theme === 'light' || theme === 'dark') {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
}
|
|
} catch (_) { /* 存儲不可用（如隱私模式）時跟隨系統 */ }
|
|
})();
|
|
</script>
|
|
<style>
|
|
:root { color-scheme: light dark; }
|
|
/* 手動固定主題：覆蓋 color-scheme 後，預設畫布／文字色與 light-dark() 一併翻轉 */
|
|
:root[data-theme="light"] { color-scheme: light; }
|
|
:root[data-theme="dark"] { color-scheme: dark; }
|
|
body {
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
margin: 0;
|
|
line-height: 1.6;
|
|
}
|
|
/* 獨立版式頁（登入 / 404）用的置中容器 */
|
|
.page {
|
|
max-width: 40rem;
|
|
margin: 3rem auto;
|
|
padding: 0 1rem;
|
|
}
|
|
header.site-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
|
|
margin-bottom: 2rem;
|
|
}
|
|
header.site-header h1 { margin: 0; }
|
|
code { background: color-mix(in srgb, currentColor 10%, transparent); padding: 0.1em 0.4em; border-radius: 4px; }
|
|
/* 深淺色切換按鈕（各版式自行放置，樣式與側欄按鈕一致） */
|
|
.theme-toggle {
|
|
font: inherit;
|
|
font-size: .85rem;
|
|
padding: .3rem .9rem;
|
|
border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
}
|
|
.theme-toggle:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
|
|
</style>
|
|
{% block layout_style %}{% endblock %}
|
|
{% block style %}{% endblock %}
|
|
</head>
|
|
<body>
|
|
{% block content %}{% endblock %}
|
|
{% block script %}{% endblock %}
|
|
<script>
|
|
// 深淺色切換：全站共用，綁定所有帶 data-theme-toggle 的按鈕。
|
|
// 主題固定在 <html data-theme>；未設置時由 color-scheme: light dark 跟隨系統。
|
|
(() => {
|
|
'use strict';
|
|
|
|
function effectiveTheme() {
|
|
const pinned = document.documentElement.getAttribute('data-theme');
|
|
if (pinned === 'light' || pinned === 'dark') { return pinned; }
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
}
|
|
|
|
// 按鈕文字顯示點擊後將切換到的模式
|
|
function refreshLabels() {
|
|
const label = effectiveTheme() === 'dark' ? '淺色模式' : '深色模式';
|
|
for (const button of document.querySelectorAll('[data-theme-toggle]')) {
|
|
button.textContent = label;
|
|
}
|
|
}
|
|
|
|
for (const button of document.querySelectorAll('[data-theme-toggle]')) {
|
|
button.addEventListener('click', () => {
|
|
const next = effectiveTheme() === 'dark' ? 'light' : 'dark';
|
|
document.documentElement.setAttribute('data-theme', next);
|
|
try { localStorage.setItem('theme', next); } catch (_) { /* 存儲不可用時僅本次生效 */ }
|
|
refreshLabels();
|
|
});
|
|
}
|
|
// 未手動固定主題時，頁面配色由 CSS 自動跟隨系統，這裡僅同步按鈕文字
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', refreshLabels);
|
|
refreshLabels();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|