← 全部文章

教程

给任何网站换上自定义强调色

17 5月 2026 · 作者 JustZix Team

每个网站都挑选一个强调色——链接的蓝色、主按钮的绿色。如果那个颜色与你的品味相冲突,你不必将就。一条 JustZix CSS 规则就能把整个网站重绘成你最喜欢的色调。

找到要覆盖的东西

强调色通常出现在三个地方:链接、主按钮,以及聚焦/选区状态。现代网站常把它暴露为一个 CSS 自定义属性,这让你的工作变得轻而易举。

:root {
  --accent: #e8590c;
  --accent-hover: #d9480f;
}

打开开发者工具,检查一个按钮,寻找像 --primary、--brand 或 --link-color 这样的变量。如果你看到一个,就直接覆盖它——整个网站会一次性更新。

:root {
  --primary: #e8590c !important;
  --brand-color: #e8590c !important;
  --link: #e8590c !important;
}

当没有变量时

很多老网站把颜色硬编码。那就直接定位元素。这个代码块覆盖了常见情形。

a, a:visited {
  color: #e8590c !important;
}
a:hover {
  color: #d9480f !important;
}
button, .btn, .button,
input[type="submit"], [role="button"] {
  background-color: #e8590c !important;
  border-color: #e8590c !important;
  color: #fff !important;
}

给聚焦和选区重新上色

不要止步于链接。选区高亮和聚焦环也承载着强调色——让它们匹配,会让结果显得是刻意为之而不是打补丁。

::selection {
  background: #e8590c;
  color: #fff;
}
:focus-visible {
  outline: 2px solid #e8590c !important;
  outline-offset: 2px;
}
input:focus, textarea:focus, select:focus {
  border-color: #e8590c !important;
  box-shadow: 0 0 0 3px rgba(232, 89, 12, 0.25) !important;
}

给 SVG 图标重新上色

图标集通常继承文本颜色,所以它们会免费更新。那些不继承的通常使用 fill 或 stroke——用一条规则把它们扫掉。

svg, svg path {
  fill: currentColor;
}
.icon, [class*="icon-"] {
  color: #e8590c !important;
}

一套实用的工作流

• 挑一个十六进制值并在各处复用它——一致性才是这套外观的卖点。
• 先检查 CSS 变量;覆盖一行胜过写二十行。
• 为悬停状态保留一个更深的色调,这样按钮仍然感觉可交互。
• 核对对比度:白色文字上的淡强调色无法阅读。目标是 4.5:1 的比例。

强调色重绘与深色主题搭配得天衣无缝——参见构建通用深色模式。想要更多即插即用的代码片段,请访问我们的现成示例;如果你还没安装扩展,下载 JustZix 开始上手。