This commit is contained in:
2026-02-28 23:35:34 +08:00
parent 3956ee4806
commit 562c316c54
5 changed files with 129 additions and 16 deletions

View File

@@ -19,11 +19,28 @@ export function ThemeToggle() {
return (
<button
onClick={toggleTheme}
className="theme-toggle"
className={`theme-toggle ${theme === 'light' ? 'is-light' : 'is-dark'}`}
title={theme === 'light' ? '切换到深色模式' : '切换到亮色模式'}
aria-label="Toggle theme"
>
{theme === 'light' ? '🌙' : '☀️'}
<div className="theme-toggle-icon-wrapper">
{/* Sun Icon */}
<svg className="theme-toggle-sun" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<circle cx="12" cy="12" r="4"></circle>
<path d="M12 2v2"></path>
<path d="M12 20v2"></path>
<path d="M4.93 4.93l1.41 1.41"></path>
<path d="M17.66 17.66l1.41 1.41"></path>
<path d="M2 12h2"></path>
<path d="M20 12h2"></path>
<path d="M4.93 19.07l1.41-1.41"></path>
<path d="M17.66 6.34l1.41-1.41"></path>
</svg>
{/* Moon Icon */}
<svg className="theme-toggle-moon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
</svg>
</div>
</button>
);
}