feat: add language switch button and optimize theme visuals

- Add LanguageSwitch component to all 4 theme layouts (starter/default/dark/minimal)
- Import Noto Sans SC for proper Chinese font rendering
- Fix theme flash on refresh by blocking render until site info loads
- Optimize default theme: violet/blue/cyan palette, SVG icons instead of emoji
- Optimize dark theme: unified emerald accent, reduced particle count, backdrop-blur
- Add Tailwind safelist for dark theme dynamic class names
- Prioritize localStorage in i18n detection so manual language choice persists

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
abingyydsandClaude Sonnet 4.6 committed 2026-03-21 10:19:38 +09:00
1 parent 9a18cf2215
commit 662685cc97
43 files changed
+420 -316

No files matched your search

+25
View File
@@ -0,0 +1,25 @@
import { useTranslation } from 'react-i18next';
export default function LanguageSwitch({ className = '' }) {
const { i18n } = useTranslation();
const isZh = i18n.language?.startsWith('zh');
const toggle = () => {
i18n.changeLanguage(isZh ? 'en' : 'zh');
};
return (
<button
onClick={toggle}
className={`flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs transition-colors ${className}`}
aria-label="Switch language"
>
<svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" />
<path strokeLinecap="round" strokeLinejoin="round" d="M3.6 9h16.8M3.6 15h16.8" />
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3a15.3 15.3 0 0 1 4 9 15.3 15.3 0 0 1-4 9 15.3 15.3 0 0 1-4-9 15.3 15.3 0 0 1 4-9Z" />
</svg>
<span>{isZh ? 'EN' : '中文'}</span>
</button>
);
}