自定义标签页的外观,使用皮肤和默认主题 (转译)
目录
标签页可以自定义两种方式:设置默认主题(暗色或浅色)和选择主题的主要颜色(皮肤)。
默认主题
使用 default_theme = "dark"
将暗主题设置为默认主题,或使用 default_theme = "light"
将浅色主题设置为默认主题。
要永久地将您的站点设置为深色主题或浅色主题,您需要禁用 config.toml
中的主题切换器并将其首选主题设置为 default_theme
。
例如,要有一个永久性的暗主题:
[]
= false
= "dark"
皮肤
不喜欢青绿色吗?没问题!tabi 有 12 种皮肤供您选择。如果这些都不适合您,您可以创建自己的。
皮肤是一个 CSS 文件,其中有两个变量:浅色主题的主要颜色和深色主题的主要颜色。
启用皮肤就像在您的 config.toml
中设置 skin
变量一样简单,该变量的名称是皮肤。例如:
[]
= "sakura"
下面看看可用的皮肤。
点击图片可以在暗 theme 和亮 theme 之间切换。
青绿色(Teal)
默认皮肤。如果 skin
变量未设置(或设置为 "teal"
),这就是 tabi 的样子:
薰衣草(Lavender)
要应用,使用 skin = "lavender"
。
红色(Red)
通过设置 skin = "red"
来切换到这个。
薄荷糖(Mint)
由 🅿️ 设计的皮肤。
设置 skin = "mint"
激活它。
樱花(Sakura)
灵感来自日本樱花季。
要启用这个皮肤,请调整 skin = "sakura"
。
蓝色(Blue)
对于这个外观,设置 skin = "blue"
。
靛蓝(Indigo Ingot)
靛蓝为蓝色(在浅色主题中)和锭金为金色(在深色主题中)。
要激活这个皮肤,使用 skin = "indigo_ingot"
。
新世纪福音战士(Evangelion)
灵感来源于新世纪福音战士 EVA 初号机(暗色系)和二号机(浅色系)的颜色。
单色(Monochrome)
要实现此外观,请设置 skin = "monochrome"
。
低对比度橙色(Low contrast orange)
警告! 此皮肤的浅色主题可能对比度较低,会影响可访问性和 Lighthouse 评分。(深色主题是可以的。)
要使用,需设置 skin = "lowcontrast_orange"
。
低对比度桃色(Low contrast peach)
警告! 此皮肤的浅色主题可能对比度较低,会影响可访问性和 Lighthouse 评分。(深色主题是可以的。)
要启用它,请指定 skin = "lowcontrast_peach"
。
低对比度粉色(Low contrast pink)
警告! 此皮肤的浅色主题可能对比度较低,会影响可访问性和 Lighthouse 评分。(深色主题是可以的。)
对于这个配色方案,请选择 skin = "lowcontrast_pink"
.
创建你自己的皮肤
您不仅限于预定义的皮肤。为什么不创建一个独特的外观,这是专门为您的偏好量身定制的?
您可以将新皮肤保存到这两个目录中的任何一个:
- 在主题目录中:
themes/tabi/sass/skins
- 在您的网站主目录中:
sass/skins
(您需要创建这个文件夹)
在您喜欢的位置创建一个新的 .scss
文件(例如,your_skin.scss
)。此文件需要具有这两个变量(这是默认皮肤,“teal”):
{
:;
}
{
:;
}
根据您的喜好调整颜色。一旦您满意,更新 skin
变量以匹配您的文件名。
记住要考虑你选择的颜色的可访问性。这里有一个链接可以帮助你:WebAIM: Contrast Checker. 浅色主题的背景是 #fff
, 深色的是 #1f1f1f
.