自定义标签页的外观,使用皮肤和默认主题 (转译)

  • 更新于 24 11月 2023

标签页可以自定义两种方式:设置默认主题(暗色或浅色)和选择主题的主要颜色(皮肤)。

默认主题

使用 default_theme = "dark" 将暗主题设置为默认主题,或使用 default_theme = "light" 将浅色主题设置为默认主题。

要永久地将您的站点设置为深色主题或浅色主题,您需要禁用 config.toml 中的主题切换器并将其首选主题设置为 default_theme

例如,要有一个永久性的暗主题:

[extra]
theme_switcher = false
default_theme = "dark"

皮肤

不喜欢青绿色吗?没问题!tabi 有 12 种皮肤供您选择。如果这些都不适合您,您可以创建自己的

皮肤是一个 CSS 文件,其中有两个变量:浅色主题的主要颜色和深色主题的主要颜色。

启用皮肤就像在您的 config.toml 中设置 skin 变量一样简单,该变量的名称是皮肤。例如:

[extra]
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".


创建你自己的皮肤

您不仅限于预定义的皮肤。为什么不创建一个独特的外观,这是专门为您的偏好量身定制的?

您可以将新皮肤保存到这两个目录中的任何一个:

  1. 在主题目录中:themes/tabi/sass/skins
  2. 在您的网站主目录中:sass/skins (您需要创建这个文件夹)

在您喜欢的位置创建一个新的 .scss 文件(例如,your_skin.scss)。此文件需要具有这两个变量(这是默认皮肤,“teal”):

:root {
    --primary-color: #087e96;
}

[data-theme='dark'] {
    --primary-color: #91e0ee;
}

根据您的喜好调整颜色。一旦您满意,更新 skin 变量以匹配您的文件名。

记住要考虑你选择的颜色的可访问性。这里有一个链接可以帮助你:WebAIM: Contrast Checker. 浅色主题的背景是 #fff, 深色的是 #1f1f1f.