見た目の色を、もう少し自分好みにしたくて変更してみた・・・けど、変更したら今度は Syntax Highlight の色合いが合わなくなったので、そちらも合わせて変更してみた。

“m10c” テーマカラーの変更

テーマカラーの変更は “config.toml” の色合いを “hugo server” コマンドで確認しながら変更しました。

• config.toml

  [params.style]
  darkestColor = "#f2f2f2"  # サイドバー背景
  darkColor = "#ffffff"     # メイン背景
  lightColor = "#222222"    # フォント色
  lightestColor = "#666666" # タイトル
  primaryColor = "#007fc9"  # テーマカラー
  

Syntax Highlight の変更

Hugo の Syntax Highlight については、公式のドキュメントに情報がありました。

Syntax Highlighting | Hugo
https://gohugo.io/content-management/syntax-highlighting/

ただ結局良くわからず・・・あれやこれやとググった結果、こんな感じで対応したというメモ

1. 静的ファイルとして CSS を置くディレクトリを作成

   $ mkdir ./static/css
   

2. 下記コマンドを実行して、ベースとなる CSS を生成

   $ hugo gen chromastyles --style=github > ./static/css/syntax.css
   

   テーマからの選択は Chroma Style Gallery で確認した。

Partials を使ったやり方 (Static Web Apps だとうまくいかない)

ただ Azure App Service Static Web Apps の場合、CI/CD の過程でテーマを拾ってくるからこの方法は駄目だった。

1. “m10c” のテーマを少し変えたいので “partials” なディレクトリを作成してファイルを作成

   $ mkdir layouts/partials
   $ vi ./layouts/partials/header.html
   

   <link rel="stylesheet" href="{{ .Site.BaseURL }}/css/syntax.css" />
   

2. “m10c” テーマの baseof.html のヘッダ部分に、下記設定を追記し読み込まれるようにした。

   $ vi ./theme/m10c/layouts/_default/baseof.html
   ...
   {{ partial "header.html" . }}
   

テーマをコピーして変更するやり方

結局こっちに落ち着いた

1. “m10c” の “baseof.html” を、複製/編集する。

   $ mkdir layouts/_default
   $ cp ./theme/m10c/layouts/_default/baseof.html ./layouts/_default/baseof.html
   

2. baseof.html のヘッダ部分に、下記設定を追記し読み込まれるようにした。 $ vi ./layouts/_default/baseof.html

   ```html
   ...
   <link rel="stylesheet" href="{{ .Site.BaseURL }}/css/syntax.css" />
   

んで、こんな感じに。

以上、適当に。