---
title: 只用 CSS 变量做一套极简博客主题
site: 星湖の小窝
category: 前端
tags: [CSS, 前端, 主题]
date: 2026-09-15
updated: 2026-09-15
id: note-css-grid-blog
---

# 只用 CSS 变量做一套极简博客主题

不用框架也能有统一的设计感，核心是把所有颜色、间距收敛到 CSS 变量里。

```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` 挂在 `` 上，一行 JS 就能全局换肤：

```javascript
document.documentElement.dataset.theme = dark ? 'dark' : 'light';
```

再配合 `localStorage` 记住选择，刷新后不闪白。