默认情况下，使用此主题的站点具有默认字体、颜色和总体外观。但是，默认方案不可能满足所有人的要求，但是不要担心，你可以轻松地覆盖主题默认值，例如调色板颜色、字体、语法高亮。

背景图片

1# 在亮色和暗色模式下都使用相同的图片
2backgroundImage = ['/images/bg.png']
3
4# 在亮色和暗色模式下使用对应的图片
5backgroundImage = ['/images/bg-light.png', '/images/bg-dark.png']

调色板

HBS 提供了大量的配色：blue、blue-gray、brown、cyan、green、indigo、orange、pink、purple、red、teal、yellow。

可用的配色

设置面板的调色板选择器是基于 palettes 参数的。

1palettes = ["blue", "blue-gray", "indigo"]

你也可以将 palettes 设置为空数组 [] 以禁用调色板。

默认配色

1palette = "indigo"

修改默认配色后，需要清理浏览器缓存。

修改配色

主题的调色板系统基于 CSS 变量，因此，我们可以轻松地为每个调色板自定义颜色。

1[data-palette=blue] {
2    --#{$variable-prefix}primary: darkblue;
3    --#{$variable-prefix}on-primary: #fff;
4}

在 assets/main/scss/_custom.scss 追加样式后，blue 调色板的颜色将会变成 darkblue。

字体

Font Family

我们不指定任何字体，所以大部分浏览器将会使用 system-ui 。

你也可以轻易地使用其他 web 字体，比如 Google Fonts 。我们以 Roboto 字体为例。

首先，我们导入字体，然后在 assets/main/scss/_custom.scss 覆盖 body-font-family 变量：

1@import 'https://fonts.googleapis.com/css2?family=Roboto&display=swap';
2:root {
3    --#{$variable-prefix}body-font-family: 'Roboto', sans-serif;
4}

语法高亮

本主题要求以下参数设置为特定值。

  • lineNos: true
  • lineNumbersInTable: false
  • noClasses: false

另外可参阅 Configure Highlight 。

样式

1$ hugo gen chromastyles --style=solarized-dark > assets/main/scss/_highlight.scss

另外可参阅所有支持的样式 。

图标

 1// import { faClock } from '@fortawesome/free-solid-svg-icons';
 2// import { faAddressBook } from '@fortawesome/free-regular-svg-icons';
 3// import { faAmazon, faGoogle } from '@fortawesome/free-brands-svg-icons';
 4
 5const icons = [
 6    // faClock,
 7    // faAddressBook,
 8    // faAmazon, faGoogle,
 9];
10export default icons;