不用框架也能有统一的设计感,核心是把所有颜色、间距收敛到 CSS 变量里。
:root {
--bg: #0e1013;
--panel: #161a1f;
--text: #e8ecf1;
--muted: #8b93a1;
--accent: #4f8cff;
--radius: 14px;
}
[data-theme="light"] {
--bg: #f6f7f9;
--panel: #ffffff;
--text: #1d2129;
}切换主题
把 data-theme 挂在 <html> 上,一行 JS 就能全局换肤:
document.documentElement.dataset.theme = dark ? 'dark' : 'light';再配合 localStorage 记住选择,刷新后不闪白。