像素复古未来：把博客改造成 CRT 终端

2026年8月23日约 1 分钟· 423 字 88 次阅读

设计前端 CSS

这个博客最近经历了一次彻底的视觉改版：从浅色暖橙的极简风格，变成了深色 CRT 终端 + 像素复古未来。这篇文章聊聊设计取舍。

设计动机

之前的设计是"极简高级 + 技术文章 + 浅色优先"，暖橙强调色呼应"橘子味"的博客名。但看久了总觉得缺一点辨识度——于是决定整体改版为复古未来 / 像素美学。

CRT 终端设计稿

像素美学的落地原则

改版时定下几条硬规则：

直角优先：去掉所有圆角，像素切角 + 2px 描边 + 硬偏移阴影（无模糊，4px 4px 0）；
标题像素化，正文不像素化：中文正文保持系统 CJK 字体（可读性优先），像素感只用在标题、边框和装饰；
CRT 细节：扫描线装饰、窗口卡（标题栏 + 文件名 + 装饰点）、步进/闪烁动效。

核心代码如下：

@theme inline {
  --shadow-hard: 4px 4px 0 var(--color-ink);
}

.window {
  border: 2px solid var(--color-ink);
  box-shadow: var(--shadow-hard);
  border-radius: 0;
}

双主题：深色 CRT 与磷光米白

默认深色 CRT，但保留了浅色"磷光米白"备选主题。切换逻辑很简单：

function toggleTheme() {
  const next = document.documentElement.dataset.theme === "dark" ? "light" : "dark";
  document.documentElement.dataset.theme = next;
  localStorage.setItem("theme", next);
}