到目前为止，「文颜」内置了7套主题，除了一套“默认”主题外，其它主题都来源于众多作者的开源主题，在这里向各位作者表示感谢🙏：
但是这7套主题远远不能满足广大用户的需求，因此文颜已经上线了“自定义主题”功能。
什么是自定义主题#
“自定义主题”可以使你的公众号文章别具一格，具备自己独特的外观，从而创造出独特的视觉体验。其原理是通过开放对主题的CSS（层叠样式表）的修改功能，来对页面进行定制。
用户可以创建3套个性化的“自定义主题”，以创造3种不同的视觉体验。
创建主题#
在主题选择菜单点击“创建新主题”按钮。
此时会弹出一个“主题编辑和预览”页面，你可以在左侧编辑器中自定义CSS，右侧预览页面可以实时进行效果预览。
最后保存即可。
使用主题#
保存的自定义主题可以在主题菜单直接选择使用。
修改和删除主题#
点击“自定义主题”边上的编辑按钮，会弹出“主题编辑和预览”页面，和创建主题一样。
如果要删除主题，点击“删除”按钮。
小贴士#
标题及块元素的前缀和后缀#
h1, h2, h3, h4, h5, h6, blockquote这几个标签可以与::before和::after伪元素配合content属性实现标签的前、后缀效果。让我们看个例子，给所有blockquote添加一个彩虹图标前缀：
1
2
3
4
5
6
7
| #wenyan blockquote::before {
display: block;
height: 2em;
width: 1.5em;
content: "🌈";
font-size: 1.2em;
}
|
效果：
此外，你也可以使用一些css的其它技巧来绘制简单的几何图形，比如在h2标签前面添加一个gradient渐变图形，后面添加一个三角形图标：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| #wenyan h2:before {
display: inline-block;
content: "";
background: radial-gradient(#f69d3c, #3f87a6);
height: 2em;
width: 2em;
vertical-align: bottom;
}
#wenyan h2:after {
display: inline-block;
content: "";
vertical-align: bottom;
border-bottom: 36px solid #efebe9;
border-right: 20px solid transparent;
}
|
效果：
注意：虽然在预览页面中，所有标签的伪元素看上去都是正常的，但是粘贴到公众号后，只有上面列举的这些标签和伪元素才会起作用。
注意：目前background-image还不支持图片格式的背景图案（包括url引入或者base64引入），或许以后的版本会支持。
修改字体#
文颜默认使用用户系统的默认字体，如果你想使你的文章看起来更独特，可以考虑修改默认字体。比如：将字体修改为系统自带的“华文仿宋”：
1
2
3
4
5
| /* 全局变量 */
:root {
--sans-serif-font: "华文仿宋";
--monospace-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "liberation mono", "courier new", monospace;
}
|
效果：
注意：修改字体会影响未安装该字体的用户的阅读体验，因此请确保你有一定该方面的经验，保留保底字体。
注意：目前不支持web字体，即url引入的字体。
背景图案#
如果你想修改公众号平平无奇的白色背景，可以使用gradient添加一些背景图案。下面这个例子将为你的文章背景添加淡淡的网格：
1
2
3
4
5
6
7
| #wenyan {
font-family: var(--sans-serif-font);
line-height: 1.75;
background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.04) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.04) 3%, rgba(0, 0, 0, 0) 3%);
background-size: 20px 20px;
background-position: center center;
}
|
效果：
注意：目前background-image还不支持图片格式的背景图案（包括url引入或者base64引入），或许以后的版本会支持。
表格样式#
以下几个属性可以修改表格样式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| #wenyan table {
border-collapse: collapse;
border: 0.25em solid var(--table-border-color);
margin: 1.4em auto;
max-width: 100%;
table-layout: fixed;
text-align: left;
overflow: auto;
display: inline-block;
word-wrap: break-word;
word-break: break-all;
}
#wenyan table th {
background-color: var(--th-bg-color);
}
#wenyan table th, td {
font-size: .75em;
text-align: center;
border: 0.13em dashed var(--table-border-color);
padding: 0.5em;
height: 40px;
padding: 9px 12px;
line-height: 22px;
min-width: 60px;
vertical-align: top;
}
#wenyan table tr:nth-child(even) {
background-color: var(--tr-bg-color);
}
|
脚注样式#
如果使用了脚注功能，请注意以下几个属性：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| /* 添加在原始链接旁的脚注上标 1️⃣ */
#wenyan .footnote {
color: rgb(31, 117, 255);
}
/* 脚注行，每行包括编号和文字 2️⃣ */
#wenyan #footnotes p {
display: flex;
margin: 0;
font-size: 0.9em;
}
/* 脚注行内编号 3️⃣ */
#wenyan .footnote-num {
display: inline;
width: 10%;
}
/* 脚注行内文字 4️⃣ */
#wenyan .footnote-txt {
display: inline;
width: 90%;
word-wrap: break-word;
word-break: break-all;
}
|
添加在原始链接旁的脚注上标：
脚注行：
行内代码#
1
2
3
4
5
6
| #wenyan p code {
font-family: var(--monospace-font);
color: #ff502c;
padding: 4px 6px;
font-size: .78em;
}
|
代码块#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| /* 代码块外围 */
#wenyan pre {
border-radius: 5px;
font-size: .8em;
line-height: 2;
margin: 1em 0.5em;
padding: 1em;
background-color: #afb8c133;
}
/* 代码块 */
#wenyan pre code {
font-family: var(--monospace-font);
display: block;
overflow-x: auto;
margin: 0;
padding: 0;
}
|
属性速查#
所有属性可以在下面的网页查询到：属性速查表。
问题讨论请移步github discussions。
主题分享请移步这里。