不用框架也能有统一的设计感,核心是把所有颜色、间距收敛到 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 记住选择,刷新后不闪白。