跳转到内容

编辑配色手册

来自文亚宇宙世界观


Wiki 配色使用指南
文亚宇宙世界观用的是"墨蓝 + 黄铜 + 羊皮纸"这一套配色，

灵感来自档案馆和老学术机构的调性。
本页教你怎么在编辑条目时用上这套颜色 —— 不用懂设计， 照抄下面的代码，改成自己的文字就行。

六个常用颜色

色块 名称 代码（复制这个） 用在哪
墨蓝 var(--wy-heading-1) 标题、标题栏背景
黄铜 var(--wy-accent) 分割线、强调、边框
羊皮纸 var(--wy-bg-soft) 卡片背景、信息框
纸白 var(--wy-bg-card) 页面整体背景
氧化红 var(--wy-warn) 警告、限制访问标签
苔绿 #4A5D45 已验证 / 正常状态标签

新手只要记住墨蓝和黄铜这两个就够了 —— 标题用墨蓝，分割线/强调用黄铜，其余颜色是进阶用法。

场景一：给标题上色

写条目时二级标题想变成墨蓝色，把 ==标题== 换成： 

== <span style="color:var(--wy-heading-1);">你的标题</span> ==

想在标题下加一条黄铜细线（其他页面都有的那种装饰线），标题下面再加一行： 

<div style="height:3px;width:64px;background:var(--wy-accent);margin:2px 0 20px;"></div>

场景二：加一个提示框

不用自己写颜色代码，直接用现成的三个模板，改里面的文字就行： 

{{Info
|title=提示
|这里写你想说的内容。
}}

详细用法看：提示模板 · 提醒模板 · 警告模板

场景三：做一张浅色卡片

想把一段内容装进一个圆角小卡片里（比如首页那种），复制这段，把中间文字换掉： 

<div style="background:var(--wy-bg-soft);border:1px solid var(--wy-border-color);border-radius:10px;padding:16px 22px;">
这里写你的内容。
</div>

场景四：加一个状态标签

想在条目里加个小标签，比如"已验证"或"限制访问"： 

<span style="background:#4A5D45;color:#fff;font-size:10px;padding:2px 8px;border-radius:2px;">已验证</span>
<span style="background:var(--wy-warn);color:#fff;font-size:10px;padding:2px 8px;border-radius:2px;">限制访问</span>

效果大概是这样： 已验证 限制访问

场景五：给链接文字单独上色

注意： 直接给 链接 外面包颜色是没用的，链接自己的颜色会盖掉。 要把颜色写在链接文字里面： 

[[条目名称|<span style="color:var(--wy-heading-1);">显示的文字</span>]]

不要用的颜色

以下颜色跟整体风格不搭，编辑时请避免：

  • 浅蓝色边框（#C9D3E8 之类）—— 请用褪色棕 var(--wy-border-color) 代替
  • 亮黄色（#FFCC33 之类）—— 太跳脱，需要黄色调时用深黄铜 var(--wy-heading-3)
  • 正红色（#B80000 之类）—— 请用氧化红 var(--wy-warn) 代替，更沉稳
  • 纯黑色大字标题 —— 标题请统一用墨蓝 var(--wy-heading-1)

不确定怎么配色？直接复制本页任意一段代码改文字即可， 或者在编辑前先看看别的条目是怎么写的。有问题欢迎在讨论页或 QQ 群里问。

检索自“https://wiki.liwenya.com/index.php?title=编辑配色手册&oldid=892”