250 lines
7.7 KiB
Plaintext
250 lines
7.7 KiB
Plaintext
---
|
|
interface Props {
|
|
height?: number;
|
|
width?: number;
|
|
fill?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const {
|
|
height = 16,
|
|
width = 16,
|
|
fill = "currentColor",
|
|
className = ""
|
|
} = Astro.props;
|
|
---
|
|
|
|
<button
|
|
id="theme-toggle-button"
|
|
class={`inline-flex items-center justify-center h-8 w-8 cursor-pointer rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 text-secondary-600 dark:text-secondary-400 hover:text-primary-600 dark:hover:text-primary-400 ${className}`}
|
|
aria-label="切换主题"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<!-- 月亮图标 (暗色模式) -->
|
|
<svg
|
|
id="dark-icon"
|
|
style={`height: ${height}px; width: ${width}px;`}
|
|
fill={fill}
|
|
viewBox="0 0 16 16"
|
|
class="hover:scale-110 hidden dark:block"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
|
|
</svg>
|
|
|
|
<!-- 太阳图标 (亮色模式) -->
|
|
<svg
|
|
id="light-icon"
|
|
style={`height: ${height}px; width: ${width}px;`}
|
|
fill={fill}
|
|
viewBox="0 0 16 16"
|
|
class="hover:scale-110 block dark:hidden"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<script>
|
|
// 主题切换逻辑
|
|
(function() {
|
|
// 存储所有事件监听器，便于统一清理
|
|
const listeners: Array<{
|
|
element: EventTarget;
|
|
eventType: string;
|
|
handler: EventListenerOrEventListenerObject;
|
|
}> = [];
|
|
|
|
// 定时器
|
|
let transitionTimeout: ReturnType<typeof setTimeout> | null = null;
|
|
|
|
// 添加事件监听器并记录，方便后续统一清理
|
|
function addListener<K extends keyof HTMLElementEventMap>(
|
|
element: EventTarget | null,
|
|
eventType: string,
|
|
handler: EventListenerOrEventListenerObject,
|
|
options?: boolean | AddEventListenerOptions
|
|
): EventListenerOrEventListenerObject | null {
|
|
if (!element) return null;
|
|
|
|
element.addEventListener(eventType, handler, options);
|
|
listeners.push({ element, eventType, handler });
|
|
return handler;
|
|
}
|
|
|
|
// 清理函数 - 移除所有事件监听器
|
|
function cleanup(): void {
|
|
// 移除所有监听器
|
|
listeners.forEach(({ element, eventType, handler }) => {
|
|
try {
|
|
element.removeEventListener(eventType, handler);
|
|
} catch (err) {
|
|
console.error(`移除主题切换事件监听器出错:`, err);
|
|
}
|
|
});
|
|
|
|
// 清空数组
|
|
listeners.length = 0;
|
|
|
|
// 清理任何定时器
|
|
if (transitionTimeout) {
|
|
clearTimeout(transitionTimeout);
|
|
transitionTimeout = null;
|
|
}
|
|
}
|
|
|
|
// 初始化主题切换功能
|
|
function setupThemeToggle(): void {
|
|
// 确保当前没有活动的主题切换按钮事件
|
|
cleanup();
|
|
|
|
// 获取所有主题切换按钮
|
|
const themeToggleButtons = document.querySelectorAll('#theme-toggle-button');
|
|
|
|
if (!themeToggleButtons.length) {
|
|
return;
|
|
}
|
|
|
|
let transitioning = false;
|
|
|
|
// 获取系统首选主题
|
|
const getSystemTheme = (): string => {
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
};
|
|
|
|
// 初始化主题
|
|
const initializeTheme = (): void => {
|
|
const storedTheme = localStorage.getItem('theme');
|
|
const systemTheme = getSystemTheme();
|
|
|
|
// 按照逻辑优先级应用主题
|
|
if (storedTheme) {
|
|
document.documentElement.dataset.theme = storedTheme;
|
|
} else if (systemTheme) {
|
|
document.documentElement.dataset.theme = systemTheme;
|
|
} else {
|
|
document.documentElement.dataset.theme = 'light';
|
|
}
|
|
};
|
|
|
|
// 切换主题
|
|
const toggleTheme = (): void => {
|
|
if (transitioning) {
|
|
return;
|
|
}
|
|
|
|
transitioning = true;
|
|
|
|
// 获取当前主题
|
|
const currentTheme = document.documentElement.dataset.theme;
|
|
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
|
|
|
// 更新 HTML 属性
|
|
document.documentElement.dataset.theme = newTheme;
|
|
|
|
// 更新本地存储
|
|
const systemTheme = getSystemTheme();
|
|
|
|
if (newTheme === systemTheme) {
|
|
localStorage.removeItem('theme');
|
|
} else {
|
|
localStorage.setItem('theme', newTheme);
|
|
}
|
|
|
|
// 添加防抖
|
|
if (transitionTimeout) {
|
|
clearTimeout(transitionTimeout);
|
|
}
|
|
|
|
transitionTimeout = setTimeout(() => {
|
|
transitioning = false;
|
|
}, 300);
|
|
};
|
|
|
|
// 监听系统主题变化
|
|
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
|
|
const handleMediaChange = (e: MediaQueryListEvent): void => {
|
|
if (!localStorage.getItem('theme')) {
|
|
const newTheme = e.matches ? 'dark' : 'light';
|
|
document.documentElement.dataset.theme = newTheme;
|
|
}
|
|
};
|
|
|
|
// 添加系统主题变化监听
|
|
addListener(mediaQuery, 'change', handleMediaChange as EventListener);
|
|
|
|
// 为每个按钮添加事件
|
|
themeToggleButtons.forEach(button => {
|
|
(button as HTMLElement).style.pointerEvents = 'auto';
|
|
|
|
// 创建点击处理函数
|
|
const clickHandler = (e: Event) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
toggleTheme();
|
|
};
|
|
|
|
// 点击事件 - 使用捕获模式
|
|
addListener(button, 'click', clickHandler, { capture: true });
|
|
|
|
// 键盘事件
|
|
addListener(button, 'keydown', ((e: KeyboardEvent) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
toggleTheme();
|
|
}
|
|
}) as EventListener);
|
|
});
|
|
|
|
// 处理移动端主题切换容器
|
|
const themeToggleContainer = document.getElementById('theme-toggle-container');
|
|
if (themeToggleContainer) {
|
|
addListener(themeToggleContainer, 'click', (e: Event) => {
|
|
const target = e.target as HTMLElement;
|
|
if (target.id !== 'theme-toggle-button' && !target.closest('#theme-toggle-button')) {
|
|
e.stopPropagation();
|
|
toggleTheme();
|
|
}
|
|
});
|
|
}
|
|
|
|
// 初始化主题
|
|
initializeTheme();
|
|
}
|
|
|
|
// 注册清理函数
|
|
function registerCleanup(): void {
|
|
// Astro 事件
|
|
document.addEventListener('astro:before-preparation', cleanup, { once: true });
|
|
document.addEventListener('astro:before-swap', cleanup, { once: true });
|
|
|
|
// Swup 事件
|
|
document.addEventListener('swup:willReplaceContent', cleanup, { once: true });
|
|
|
|
// 页面卸载
|
|
window.addEventListener('beforeunload', cleanup, { once: true });
|
|
}
|
|
|
|
// 初始化函数
|
|
function init(): void {
|
|
setupThemeToggle();
|
|
registerCleanup();
|
|
}
|
|
|
|
// 在页面加载后初始化
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', init, { once: true });
|
|
} else {
|
|
setTimeout(init, 0);
|
|
}
|
|
|
|
// 在页面转换后重新初始化
|
|
document.addEventListener('astro:after-swap', init);
|
|
document.addEventListener('astro:page-load', init);
|
|
|
|
// Swup页面内容替换后重新初始化
|
|
document.addEventListener('swup:contentReplaced', init);
|
|
})();
|
|
</script> |