はじめに #
HugoのテーマBlowfishを使っていて、コードブロック（シンタックスハイライト）のスタイルが見えづらかったのでカスタマイズしたのですが、一部の文字が背景色と同化して黒く潰れて見えなくなってしまったりしました。
今回は、Blowfishテーマでデフォルトのスタイルをきれいにリセットし、自分好みのカラー（GitHub風やその他のテーマ）に安全にカスタマイズする方法について記載します。といってもBlowfishの公式ドキュメントに書いてある内容ですが。
1. Blowfish公式推奨：Chromaテーマを丸ごと変更する手順 #
Blowfishには、Hugoの標準シンタックスハイライターである「Chroma」のスタイルを柔軟に変更する仕組みが用意されています。
ライトモードとダークモードでそれぞれ異なるハイライトテーマを適用したい場合は、以下の手順に沿って設定を行います。
ステップ1：デフォルトのスタイルをクリアする #
まずは assets/css/custom.css を作成（または既存のものを編集）し、以下の内容を追加してデフォルトのChromaスタイルをリセットします。
.chroma,
.chroma *,
.chroma:is(.dark *),
.chroma:is(.dark *) * {
color: unset;
font-weight: unset;
font-style: unset;
}これにより、テーマ側が持っている標準のハイライト色が一度クリアされます。
ステップ2：コマンドで新しいChromaスタイルを書き出す #
次に、Hugoの hugo gen chromastyles コマンドを使用して、好みのテーマスタイルを custom.css に直接追記します。
お使いのOS（環境）に合わせて、以下のコマンドをプロジェクトのルートディレクトリで実行します。
Mac / Linux の場合（ターミナル） #
# ライトモード用（例: emacs）
(echo 'html:not(.dark) {'; hugo gen chromastyles --style=emacs; echo '}') >> assets/css/custom.css
# ダークモード用（例: evergarden）
(echo 'html.dark {'; hugo gen chromastyles --style=evergarden; echo '}') >> assets/css/custom.cssWindows の場合（PowerShell） #
@("html:not(.dark) {"; (hugo gen chromastyles --style=emacs); "}") | Add-Content -Path "assets/css/custom.css"
@("html.dark {"; (hugo gen chromastyles --style=evergarden); "}") | Add-Content -Path "assets/css/custom.css"2. まとめ：自分好みのスタイルを見つけよう #
上記のコマンド例では、ライトモードに emacs、ダークモードに evergarden を指定していますが、Hugoがサポートしているスタイルであればどれでも自由に組み合わせが可能です。
すべての利用可能なChromaスタイルや見た目のサンプルは、Hugoの公式ドキュメントで確認できます。ブログの雰囲気に合わせた最適な配色を見つけて、読みやすい記事を作ってみてください！
本ブログでは以下の設定にしてみました。
# ライトモード用に github-dark
(echo 'html:not(.dark) {'; hugo gen chromastyles --style=github-dark; echo '}') >> assets/css/custom.css
# ダークモード用に witchhazel を適用
(echo 'html.dark {'; hugo gen chromastyles --style=witchhazel; echo '}') >> assets/css/custom.css
