用 CSS 变量定制博客外观：从蓝色改成紫色只需3行

TL;DR

CSS 变量让你把颜色、间距、圆角这些”魔法数字”提取成可复用符号。改博客主题不再需要满屏找颜色代码，只需改几行变量定义。

为什么 CSS 变量让定制变简单

传统写 CSS 的方式是找到每一个颜色值，挨个替换。换个主题要把代码翻个底朝天。

CSS 变量的工作方式不同：先给值起名字，在需要地方引用这个名字：

/* 定义变量 */
:root {
  --color-primary: #425AEF;
  --font-size-base: 16px;
}

/* 使用变量 */
.button {
  background-color: var(--color-primary);
  font-size: var(--font-size-base);
}

想换成紫色主题？把 --color-primary 的值改掉，整个站都变了。

基本语法

定义和引用

/* 定义：在 :root 里声明 */
:root {
  --变量名: 变量值;
}

/* 引用：用 var() 函数 */
.element {
  property: var(--变量名);
}

变量名命名规范

推荐用 kebab-case，语义化：

:root {
  --color-text-primary: #2c2c2c;
  --color-background: #ffffff;
  --space-gap-md: 16px;
  --radius-card: 8px;
}

带默认值引用

.element {
  margin: var(--custom-margin, 16px); /* 如果 --custom-margin 没定义，用 16px */
}

常用定制场景

换主题色

:root {
  --color-primary: #6d28d9; /* 原来：紫色 */
  --color-primary: #425AEF; /* 改成：蓝色 */
}

如果你博客用了 --color-primary 这个变量，改一处全站生效。

调整间距体系

:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;
}

修改间距变量，所有用了 --space-* 的地方自动更新。

暗色模式

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #1a1a1a;
    --color-text: #e0e0e0;
  }
}

浏览器自动检测系统主题，一套 CSS 变量搞定两套配色。

在 Astro 博客中找到变量文件

云图札记 CSS 变量定义在 src/styles/global.css（或类似文件）。

在服务器上搜索 --color：

grep -rn "--color" /home/ubuntu/CloakBlog/src/styles/

找到 :root {} 或 body {} 的区域，就是变量声明区。

调试技巧

用浏览器开发者工具实时修改

1. 按 F12 打开开发者工具
2. 找到 Elements 面板
3. 在 Styles 面板里可以直接编辑 CSS
4. 改完满意了，再把值写回源文件

检查变量覆盖链

开发者工具中，按 Ctrl + F（Windows）或 Cmd + F（macOS）搜索变量名，可以看到哪些规则覆盖了变量：

/* 原始定义在 :root */
--color-primary: #6d28d9; /* 原始 */

/* 某组件覆盖了 */
.component { --color-primary: #425AEF; } /* 组件专用色 */

常见错误

错误	原因	修正
改了变量没效果	变量作用域不对	确认变量定义在 :root 或当前选择器之上
var() 显示默认值	变量拼写错误	检查 --color-primary 和 var(--color-primary) 是否一致
暗色模式没生效	没有 @media 查询	用 @media (prefers-color-scheme: dark) 包裹暗色变量

写在

CSS 变量是值得花半小时搞懂概念。一旦理解，你的博客定制速度会快很多。想换配色？3行。想统一间距？改一个数字。想加暗色模式？一个 @media 块搞定。

动手改之前记得先 commit 当前版本，改坏了 git checkout 一键还原。

延伸阅读

• MDN: CSS 变量详解
• 云图札记 CSS 变量设计系统
• 从零搭建 Astro 博客并部署到 Cloudflare Pages