docs: document the Chroma customization steps

exampleSite/content/docs/advanced-customisation/index.ja.md

@@ -125,6 +125,61 @@ html {
 
 この1つの値を変更するだけで、ウェブサイトのすべてのフォントサイズがこの新しいサイズに合わせて調整されます。なので、使用されるフォントサイズ全体を大きくするには、値を `12pt` より大きくすれば良いです。同様に、フォントサイズを小さくするには、値を `12pt` より小さくすれば良いです。
 
+### シンタックスハイライトテーマの変更
+
+Blowfish はカスタム構文ハイライトスタイルを使用しており、色は `assets/css/schemes` に定義されています。構文ハイライトテーマを変更するには、`assets/css/custom.css` を作成し、次の内容を追加してください：
+
+```css
+.chroma,
+.chroma *,
+.chroma:is(.dark *),
+.chroma:is(.dark *) * {
+  color: unset;
+  font-weight: unset;
+  background-color: unset;
+}
+```
+
+これによりデフォルトの Chroma スタイルがクリアされます。次に `hugo gen chromastyles` コマンドで CSS ファイルに Chroma スタイルを組み込みます:
+
+```sh
+# Mac/Linux
+hugo gen chromastyles --style=emacs | sed 's/\./html:not(.dark) ./' >> assets/css/custom.css
+hugo gen chromastyles --style=evergarden | sed 's/\./html.dark ./' >> assets/css/custom.css
+
+# Windows PowerShell
+# このコマンドは CMD では実行できず PowerShell で実行する必要がある
+hugo gen chromastyles --style=emacs | ForEach-Object { $_ -replace '\.', 'html:not(.dark) .' } | Add-Content -Path "css/custom.txt"
+hugo gen chromastyles --style=evergarden | ForEach-Object { $_ -replace '\.', 'html.dark .' } | Add-Content -Path "css/custom.txt"
+```
+
+最終的な `custom.css` ファイルは以下のようになります:
+
+```css
+.chroma,
+.chroma *,
+.chroma:is(.dark *),
+.chroma:is(.dark *) * {
+  color: unset;
+  font-weight: unset;
+  background-color: unset;
+}
+
+/* Generated using: hugo gen chromastyles --style=emacs */
+
+/* Background */ html:not(.dark) .bg { background-color:#f8f8f8; }
+/* PreWrapper */ html:not(.dark) .chroma { background-color:#f8f8f8; }
+/* ... */
+
+/* Generated using: hugo gen chromastyles --style=evergarden */
+
+/* Background */ html.dark .bg { color:#d6cbb4;background-color:#252b2e; }
+/* PreWrapper */ html.dark .chroma { color:#d6cbb4;background-color:#252b2e; }
+/* ... */
+```
+
+すべての利用可能なスタイルは、[Hugo のドキュメント](https://gohugo.io/quick-reference/syntax-highlighting-styles/#styles)で確認できます。
+
 ## ソースからテーマ CSS をビルドする
 
 大幅な変更を加えたい場合は、Tailwind CSS の JIT コンパイラを利用して、テーマ CSS 全体を最初から再構築できます。これは、Tailwind 設定を調整したり、メインスタイルシートに追加の Tailwind クラスを追加したりする場合に便利です。