默認情况下，使用此主題的網站具有預設字體、顏色和總體外觀。 但是，默認方案不可能滿足所有人的要求，但是不要擔心，你可以輕鬆地覆蓋主題預設值，例如調色板顏色、字體、語法高亮。

背景圖片

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;