diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 4aa0bfcb..4a5b2722 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -2139,6 +2139,10 @@
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
   .blur {
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -4139,6 +4143,11 @@ pre {
   inherits: false;
   initial-value: 0 0 #0000;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-blur {
   syntax: "*";
   inherits: false;
@@ -4241,11 +4250,6 @@ pre {
   initial-value: "";
   inherits: false;
 }
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
 @keyframes pulse {
   50% {
     opacity: 0.5;
@@ -4302,6 +4306,7 @@ pre {
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
       --tw-blur: initial;
       --tw-brightness: initial;
       --tw-contrast: initial;
@@ -4327,7 +4332,6 @@ pre {
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";
-      --tw-outline-style: solid;
     }
   }
 }
diff --git a/exampleSite/content/docs/advanced-customisation/index.it.md b/exampleSite/content/docs/advanced-customisation/index.it.md
index dcdbb419..35e5bc30 100644
--- a/exampleSite/content/docs/advanced-customisation/index.it.md
+++ b/exampleSite/content/docs/advanced-customisation/index.it.md
@@ -135,7 +135,7 @@ Blowfish uses a custom syntax highlighting style, with colors defined in `assets
 .chroma:is(.dark *) * {
   color: unset;
   font-weight: unset;
-  background-color: unset;
+  font-style: unset;
 }
 ```
 
@@ -143,38 +143,13 @@ This clears the default Chroma styles. The next step is to incorporate Chroma st
 
 ```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
+(echo 'html:not(.dark) {'; hugo gen chromastyles --style=emacs; echo '}') >> assets/css/custom.css
+(echo 'html.dark {'; hugo gen chromastyles --style=evergarden; echo '}') >> assets/css/custom.css
 
 # Windows PowerShell
 # This command cannot run in CMD; it must run in 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"
-```
-
-The final `custom.css` file should resemble the following:
-
-```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; }
-/* ... */
+@("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"
 ```
 
 See all available styles in [Hugo's documentation](https://gohugo.io/quick-reference/syntax-highlighting-styles/#styles).
diff --git a/exampleSite/content/docs/advanced-customisation/index.ja.md b/exampleSite/content/docs/advanced-customisation/index.ja.md
index 31618f4d..59fc0e61 100644
--- a/exampleSite/content/docs/advanced-customisation/index.ja.md
+++ b/exampleSite/content/docs/advanced-customisation/index.ja.md
@@ -136,7 +136,7 @@ Blowfish はカスタム構文ハイライトスタイルを使用しており
 .chroma:is(.dark *) * {
   color: unset;
   font-weight: unset;
-  background-color: unset;
+  font-style: unset;
 }
 ```
 
@@ -144,38 +144,13 @@ Blowfish はカスタム構文ハイライトスタイルを使用しており
 
 ```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
+(echo 'html:not(.dark) {'; hugo gen chromastyles --style=emacs; echo '}') >> assets/css/custom.css
+(echo 'html.dark {'; hugo gen chromastyles --style=evergarden; echo '}') >> 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; }
-/* ... */
+@("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"
 ```
 
 すべての利用可能なスタイルは、[Hugo のドキュメント](https://gohugo.io/quick-reference/syntax-highlighting-styles/#styles)で確認できます。
diff --git a/exampleSite/content/docs/advanced-customisation/index.md b/exampleSite/content/docs/advanced-customisation/index.md
index dcdbb419..35e5bc30 100644
--- a/exampleSite/content/docs/advanced-customisation/index.md
+++ b/exampleSite/content/docs/advanced-customisation/index.md
@@ -135,7 +135,7 @@ Blowfish uses a custom syntax highlighting style, with colors defined in `assets
 .chroma:is(.dark *) * {
   color: unset;
   font-weight: unset;
-  background-color: unset;
+  font-style: unset;
 }
 ```
 
@@ -143,38 +143,13 @@ This clears the default Chroma styles. The next step is to incorporate Chroma st
 
 ```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
+(echo 'html:not(.dark) {'; hugo gen chromastyles --style=emacs; echo '}') >> assets/css/custom.css
+(echo 'html.dark {'; hugo gen chromastyles --style=evergarden; echo '}') >> assets/css/custom.css
 
 # Windows PowerShell
 # This command cannot run in CMD; it must run in 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"
-```
-
-The final `custom.css` file should resemble the following:
-
-```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; }
-/* ... */
+@("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"
 ```
 
 See all available styles in [Hugo's documentation](https://gohugo.io/quick-reference/syntax-highlighting-styles/#styles).
diff --git a/exampleSite/content/docs/advanced-customisation/index.zh-cn.md b/exampleSite/content/docs/advanced-customisation/index.zh-cn.md
index 666cce57..94ba2ce5 100644
--- a/exampleSite/content/docs/advanced-customisation/index.zh-cn.md
+++ b/exampleSite/content/docs/advanced-customisation/index.zh-cn.md
@@ -134,7 +134,7 @@ Blowfish 使用自定义的语法高亮样式，颜色定义在 `assets/css/sche
 .chroma:is(.dark *) * {
   color: unset;
   font-weight: unset;
-  background-color: unset;
+  font-style: unset;
 }
 ```
 
@@ -142,38 +142,13 @@ Blowfish 使用自定义的语法高亮样式，颜色定义在 `assets/css/sche
 
 ```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
+(echo 'html:not(.dark) {'; hugo gen chromastyles --style=emacs; echo '}') >> assets/css/custom.css
+(echo 'html.dark {'; hugo gen chromastyles --style=evergarden; echo '}') >> 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; }
-/* ... */
+@("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"
 ```
 
 在 [Hugo 文档](https://gohugo.io/quick-reference/syntax-highlighting-styles/#styles)中查看所有可用的样式。
diff --git a/exampleSite/content/docs/configuration/index.it.md b/exampleSite/content/docs/configuration/index.it.md
index 604ed6aa..76ede697 100644
--- a/exampleSite/content/docs/configuration/index.it.md
+++ b/exampleSite/content/docs/configuration/index.it.md
@@ -236,7 +236,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | `article.showAuthor` | `true` | Whether or not the author box is displayed in the article footer. |
 | `article.showAuthorBottom` | `false` | Author boxes are displayed at the bottom of each page instead of the top. |
 | `article.showHero` | `false` | Whether the thumbnail image will be shown as a hero image within each article page. |
-| `article.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. |
+| `article.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. Effective only if `article.showHero = true`. |
 | `article.layoutBackgroundBlur` | `true` | Makes the background image in the background article heroStyle blur with the scroll |
 | `article.layoutBackgroundHeaderSpace` | `true` | Add space between the header and the body. |
 | `article.showBreadcrumbs` | `false` | Whether or not breadcrumbs are displayed in the article header. |
@@ -264,7 +264,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | Name | Default | Description |
 | --- | --- | --- |
 | `list.showHero` | `false` | Whether the thumbnail image will be shown as a hero image within each list page. |
-| `list.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. |
+| `list.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`.  Effective only if `list.showHero = true`. |
 | `list.showBreadcrumbs` | `false` | Whether or not breadcrumbs are displayed in the header on list pages. |
 | `list.layoutBackgroundBlur` | `true` | Makes the background image in the background list heroStyle blur with the scroll |
 | `list.layoutBackgroundHeaderSpace` | `true` | Add space between the header and the body. |
@@ -292,7 +292,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | --- | --- | --- |
 | `taxonomy.showTermCount` | `true` | Whether or not the number of articles within a taxonomy term is displayed on the taxonomy listing. |
 | `taxonomy.showHero` | `false` | Whether the thumbnail image will be shown as a hero image within each taxonomy page. |
-| `taxonomy.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. |
+| `taxonomy.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. Effective only if `article.taxonomy = true`. |
 | `taxonomy.showBreadcrumbs` | `false` | Whether or not breadcrumbs are displayed in the taxonomy header. |
 | `taxonomy.showViews` | `false` | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below. |
 | `taxonomy.showLikes` | `false` | Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below. |
@@ -304,7 +304,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | Name | Default | Description |
 | --- | --- | --- |
 | `term.showHero` | `false` | Whether the thumbnail image will be shown as a hero image within each term page. |
-| `term.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. |
+| `term.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. Effective only if `term.showHero = true`. |
 | `term.showBreadcrumbs` | `false` | Whether or not breadcrumbs are displayed in the term header. |
 | `term.showViews` | `false` | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below. |
 | `term.showLikes` | `false` | Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below. |
diff --git a/exampleSite/content/docs/configuration/index.ja.md b/exampleSite/content/docs/configuration/index.ja.md
index 6e7c26a2..389ac626 100644
--- a/exampleSite/content/docs/configuration/index.ja.md
+++ b/exampleSite/content/docs/configuration/index.ja.md
@@ -236,7 +236,7 @@ Blowfish は、テーマの機能を制御する多数の設定パラメータ
 | `article.showAuthor` | `true` | 記事のフッターに著者ボックスを表示するかどうかです。 |
 | `article.showAuthorBottom` | `false` | 著者ボックスは、各ページの上部ではなく下部に表示されます。 |
 | `article.showHero` | `false` | サムネイル画像を各記事ページ内でヒーロー画像として表示するかどうかです。 |
-| `article.heroStyle` | _未設定_ | ヒーロー画像を表示するスタイルです。有効なオプションは、`basic`、`big`、`background`、`thumbAndBackground` です。 |
+| `article.heroStyle` | _未設定_ | ヒーロー画像を表示するスタイルです。有効なオプションは、`basic`、`big`、`background`、`thumbAndBackground` です。`article.showHero = true` の場合にのみ有効。 |
 | `article.layoutBackgroundBlur` | `true` | 背景記事 heroStyle の背景画像をスクロールに合わせてぼかします。 |
 | `article.layoutBackgroundHeaderSpace` | `true` | ヘッダーと本文の間にスペースを追加します。 |
 | `article.showBreadcrumbs` | `false` | 記事のヘッダーにパンくずリストを表示するかどうかです。 |
@@ -264,7 +264,7 @@ Blowfish は、テーマの機能を制御する多数の設定パラメータ
 | 名前 | デフォルト | 説明 |
 | --- | --- | --- |
 | `list.showHero` | `false` | 各リストページ内でサムネイル画像をヒーロー画像として表示するかどうか。 |
-| `list.heroStyle` | _未設定_ | ヒーロー画像の表示スタイル。有効なオプションは `basic`、`big`、`background`、`thumbAndBackground` です。 |
+| `list.heroStyle` | _未設定_ | ヒーロー画像の表示スタイル。有効なオプションは `basic`、`big`、`background`、`thumbAndBackground` です。`list.showHero = true` の場合にのみ有効。 |
 | `list.showBreadcrumbs` | `false` | リストページのヘッダーにパンくずリストを表示するかどうか。 |
 | `list.layoutBackgroundBlur` | `true` | `background` リストの heroStyle の背景画像をスクロールでぼかします。 |
 | `list.layoutBackgroundHeaderSpace` | `true` | ヘッダーと本文の間にスペースを追加します。 |
@@ -292,7 +292,7 @@ Blowfish は、テーマの機能を制御する多数の設定パラメータ
 | --- | --- | --- |
 | `taxonomy.showTermCount` | `true` | タクソノミーリストにタクソノミー用語内の記事数を表示するかどうか。 |
 | `taxonomy.showHero` | `false` | 各タクソノミーページ内でサムネイル画像をヒーロー画像として表示するかどうか。 |
-| `taxonomy.heroStyle` | _未設定_ | ヒーロー画像の表示スタイル。有効なオプションは `basic`、`big`、`background`、`thumbAndBackground` です。 |
+| `taxonomy.heroStyle` | _未設定_ | ヒーロー画像の表示スタイル。有効なオプションは `basic`、`big`、`background`、`thumbAndBackground` です。`taxonomy.showHero = true` の場合にのみ有効。 |
 | `taxonomy.showBreadcrumbs` | `false` | タクソノミーのヘッダーにパンくずリストを表示するかどうか。 |
 | `taxonomy.showViews` | `false` | 記事の閲覧数を表示するかどうか。これを有効にするには、Firebase の統合を有効にする必要があります。以下をご覧ください。 |
 | `taxonomy.showLikes` | `false` | 記事のいいね数を表示するかどうか。これを有効にするには、Firebase の統合を有効にする必要があります。以下をご覧ください。 |
@@ -304,7 +304,7 @@ Blowfish は、テーマの機能を制御する多数の設定パラメータ
 | 名前 | デフォルト | 説明 |
 | --- | --- | --- |
 | `term.showHero` | `false` | 各タームページ内でサムネイル画像をヒーロー画像として表示するかどうか。 |
-| `term.heroStyle` | _未設定_ | ヒーロー画像の表示スタイル。有効なオプションは `basic`、`big`、`background`、`thumbAndBackground` です。 |
+| `term.heroStyle` | _未設定_ | ヒーロー画像の表示スタイル。有効なオプションは `basic`、`big`、`background`、`thumbAndBackground` です。`term.showHero = true` の場合にのみ有効。 |
 | `term.showBreadcrumbs` | `false` | タームのヘッダーにパンくずリストを表示するかどうか。 |
 | `term.showViews`           | `false`    | 記事の閲覧数を表示するかどうか。これを有効にするには、Firebase の統合を有効にする必要があります。以下をご覧ください。   |
 | `term.showLikes`           | `false`    | 記事のいいね数を表示するかどうか。これを有効にするには、Firebase の統合を有効にする必要があります。以下をご覧ください。 |
diff --git a/exampleSite/content/docs/configuration/index.md b/exampleSite/content/docs/configuration/index.md
index 042edb7b..4d23e3ee 100644
--- a/exampleSite/content/docs/configuration/index.md
+++ b/exampleSite/content/docs/configuration/index.md
@@ -242,7 +242,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | `article.showAuthor` | `true` | Whether or not the author box is displayed in the article footer. |
 | `article.showAuthorBottom` | `false` | Author boxes are displayed at the bottom of each page instead of the top. |
 | `article.showHero` | `false` | Whether the thumbnail image will be shown as a hero image within each article page. |
-| `article.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. |
+| `article.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. Effective only if `article.showHero = true`. |
 | `article.layoutBackgroundBlur` | `true` | Makes the background image in the background article heroStyle blur with the scroll |
 | `article.layoutBackgroundHeaderSpace` | `true` | Add space between the header and the body. |
 | `article.showBreadcrumbs` | `false` | Whether or not breadcrumbs are displayed in the article header. |
@@ -271,7 +271,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | Name | Default | Description |
 | --- | --- | --- |
 | `list.showHero` | `false` | Whether the thumbnail image will be shown as a hero image within each list page. |
-| `list.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. |
+| `list.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. Effective only if `list.showHero = true`. |
 | `list.showBreadcrumbs` | `false` | Whether or not breadcrumbs are displayed in the header on list pages. |
 | `list.layoutBackgroundBlur` | `true` | Makes the background image in the background list heroStyle blur with the scroll |
 | `list.layoutBackgroundHeaderSpace` | `true` | Add space between the header and the body. |
@@ -299,7 +299,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | --- | --- | --- |
 | `taxonomy.showTermCount` | `true` | Whether or not the number of articles within a taxonomy term is displayed on the taxonomy listing. |
 | `taxonomy.showHero` | `false` | Whether the thumbnail image will be shown as a hero image within each taxonomy page. |
-| `taxonomy.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. |
+| `taxonomy.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. Effective only if `taxonomy.showHero = true`. |
 | `taxonomy.showBreadcrumbs` | `false` | Whether or not breadcrumbs are displayed in the taxonomy header. |
 | `taxonomy.showViews` | `false` | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below. |
 | `taxonomy.showLikes` | `false` | Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below. |
@@ -311,7 +311,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | Name | Default | Description |
 | --- | --- | --- |
 | `term.showHero` | `false` | Whether the thumbnail image will be shown as a hero image within each term page. |
-| `term.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. |
+| `term.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. Effective only if `term.showHero = true`. |
 | `term.showBreadcrumbs` | `false` | Whether or not breadcrumbs are displayed in the term header. |
 | `term.showViews` | `false` | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below. |
 | `term.showLikes` | `false` | Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below. |
diff --git a/exampleSite/content/docs/configuration/index.zh-cn.md b/exampleSite/content/docs/configuration/index.zh-cn.md
index 0d4f23b4..c5eea1d7 100644
--- a/exampleSite/content/docs/configuration/index.zh-cn.md
+++ b/exampleSite/content/docs/configuration/index.zh-cn.md
@@ -240,7 +240,7 @@ Blowfish 提供了大量控制主题功能的配置参数，下面的表格中
 | `article.showAuthor` | `true` | 是否在文章底部显示作者框。 |
 | `article.showAuthorBottom` | `false` | 作者框显示在每页的底部而不是顶部。 |
 | `article.showHero` | `false` | 缩略图是否会在每个页面中作为 hero 图像显示。 |
-| `article.heroStyle` | 无 | hero 图像的展示样式，可选的参数值有：`basic`、`big`、`background`、`thumbAndBackground`。 |
+| `article.heroStyle` | 无 | hero 图像的展示样式，可选的参数值有：`basic`、`big`、`background`、`thumbAndBackground`。仅在 `article.showHero = true` 时生效。 |
 | `article.layoutBackgroundBlur` | `true` | 向下滚动文章页时，是否模糊背景图。 |
 | `article.layoutBackgroundHeaderSpace` | `true` | 在标题和正文之间添加空白区域间隔。 |
 | `article.showBreadcrumbs` | `false` | 是否在标题栏显示面包屑导航。 |
@@ -268,7 +268,7 @@ Blowfish 提供了大量控制主题功能的配置参数，下面的表格中
 | 名称 | 默认值 | 描述 |
 | --- | --- | --- |
 | `list.showHero` | `false` | 缩略图是否会在每个页面中作为 hero 图像显示。 |
-| `list.heroStyle` | 无 | hero 图像的展示样式，可选的参数值有：`basic`、`big`、`background`、`thumbAndBackground`。 |
+| `list.heroStyle` | 无 | hero 图像的展示样式，可选的参数值有：`basic`、`big`、`background`、`thumbAndBackground`。仅在 `list.showHero = true` 时生效。 |
 | `list.showBreadcrumbs` | `false` | 是否在标题栏显示面包屑导航。 |
 | `list.layoutBackgroundBlur` | `true` | 向下滚动列表页时，是否模糊背景图。 |
 | `list.layoutBackgroundHeaderSpace` | `true` | 在标题和正文之间添加空白区域间隔。 |
@@ -296,7 +296,7 @@ Blowfish 提供了大量控制主题功能的配置参数，下面的表格中
 | --- | --- | --- |
 | `taxonomy.showTermCount` | `true` | 是否在分类列表总显示对应的数量。 |
 | `taxonomy.showHero` | `false` | 缩略图是否会在每个页面中作为 hero 图像显示。 |
-| `taxonomy.heroStyle` | 无 | hero 图像的展示样式，可选的参数值有：`basic`、`big`、`background`、`thumbAndBackground`。 |
+| `taxonomy.heroStyle` | 无 | hero 图像的展示样式，可选的参数值有：`basic`、`big`、`background`、`thumbAndBackground`。仅在 `taxonomy.showHero = true` 时生效。 |
 | `taxonomy.showBreadcrumbs` | `false` | 是否在标题栏显示面包屑导航。 |
 | `taxonomy.showViews` | `false` | 是否显示文章阅读量。这需要集成 firebase ，具体可以看下面。 |
 | `taxonomy.showLikes` | `false` | 是否显示文章点赞量。这需要集成 firebase ，具体可以看下面。 |
@@ -308,7 +308,7 @@ Blowfish 提供了大量控制主题功能的配置参数，下面的表格中
 | 名称 | 默认值 | 描述 |
 | --- | --- | --- |
 | `term.showHero` | `false` | 缩略图是否会在每个页面中作为 hero 图像显示。 |
-| `term.heroStyle` | 无 | hero 图像的展示样式，可选的参数值有： `basic`、`big`、`background`、`thumbAndBackground`。 |
+| `term.heroStyle` | 无 | hero 图像的展示样式，可选的参数值有： `basic`、`big`、`background`、`thumbAndBackground`。仅在 `term.showHero = true` 时生效。 |
 | `term.showBreadcrumbs` | `false` | 是否在标题栏显示面包屑导航。 |
 | `term.showViews`           | `false` | 是否显示文章阅读量。这需要集成 firebase ，具体可以看下面。                                 |
 | `term.showLikes`           | `false` | 是否显示文章点赞量。这需要集成 firebase ，具体可以看下面。                                 |
diff --git a/exampleSite/content/docs/front-matter/index.it.md b/exampleSite/content/docs/front-matter/index.it.md
index 774ed64c..0f6faa73 100644
--- a/exampleSite/content/docs/front-matter/index.it.md
+++ b/exampleSite/content/docs/front-matter/index.it.md
@@ -55,44 +55,4 @@ I valori predefiniti dei parametri del front metter vengono ereditati dalla [con
 | `xml` | `true` unless excluded by `sitemap.excludedKinds` | Se questo articolo è incluso o meno nel file `/sitemap.xml` generato. |
 | `layoutBackgroundBlur` | `true` | Rende l'immagine di sfondo sullo sfondo heroStyle sfocata con lo scorrimento. |
 | `layoutBackgroundHeaderSpace` | `true` | Aggiungi spazio tra l'intestazione e il body. |
-| `title` | _Not set_ | The name of the article. |
-| `description` | _Not set_ | The text description for the article. It is used in the HTML metadata. |
-| `externalUrl` | _Not set_ | If this article is published on a third-party website, the URL to this article. Providing a URL will prevent a content page being generated and any references to this article will link directly to the third-party website. |
-| `editURL` | `article.editURL` | When `showEdit` is active, the URL for the edit link. |
-| `editAppendPath` | `article.editAppendPath` | When `showEdit` is active, whether or not the path to the current article should be appended to the URL set at `editURL`. |
-| `groupByYear` | `list.groupByYear` | Whether or not articles are grouped by year on list pages. |
-| `menu` | _Not set_ | When a value is provided, a link to this article will appear in the named menus. Valid values are `main` or `footer`. |
-| `robots` | _Not set_ | String that indicates how robots should handle this article. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values. |
-| `sharingLinks` | `article.sharingLinks` | Which sharing links to display at the end of this article. When not provided, or set to `false` no links will be displayed. |
-| `showAuthor` | `article.showAuthor` | Whether or not the author box for the default author is displayed in the article footer. |
-| `showAuthorBottom` | `article.showAuthorBottom` | Author boxes are displayed at the bottom of each page instead of the top. |
-| `authors` | _Not set_ | Array of values for authors, if set it overrides `showAuthor` settings for page or site. Used on the multiple authors feature, check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature. |
-| `showAuthorsBadges` | `article.showAuthorsBadges` | Whether the `authors` taxonomies are are displayed in the article or list header. This requires the setup of `multiple authors` and the `authors` taxonomy. Check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature. |
-| `featureimage` | _Not set_ | External URL for feature image |
-| `featureimagecaption` | _Not set_ | Caption for feature image. Only displayed in heroStyle `big` |
-| `showHero` | `article.showHero` | Whether the thumbnail image will be shown as a hero image within the article page. |
-| `heroStyle` | `article.heroStyle` | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. |
-| `showBreadcrumbs` | `article.showBreadcrumbs` or `list.showBreadcrumbs` | Whether the breadcrumbs are displayed in the article or list header. |
-| `showDate` | `article.showDate` | Whether or not the article date is displayed. The date is set using the `date` parameter. |
-| `showDateUpdated` | `article.showDateUpdated` | Whether or not the date the article was updated is displayed. The date is set using the `lastmod` parameter. |
-| `showEdit` | `article.showEdit` | Whether or not the link to edit the article content should be displayed. |
-| `showHeadingAnchors` | `article.showHeadingAnchors` | Whether or not heading anchor links are displayed alongside headings within this article. |
-| `showPagination` | `article.showPagination` | Whether or not the next/previous article links are displayed in the article footer. |
-| `invertPagination` | `article.invertPagination` | Whether or not to flip the direction of the next/previous article links. |
-| `showReadingTime` | `article.showReadingTime` | Whether or not the article reading time is displayed. |
-| `showTaxonomies` | `article.showTaxonomies` | Whether or not the taxonomies that relate to this article are displayed. |
-| `showTableOfContents` | `article.showTableOfContents` | Whether or not the table of contents is displayed on this article. |
-| `showWordCount` | `article.showWordCount` | Whether or not the article word count is displayed. |
-| `showComments` | `article.showComments` | Whether or not the [comments partial]({{< ref "partials#comments" >}}) is included after the article footer. |
-| `showSummary` | `list.showSummary` | Whether or not the article summary should be displayed on list pages. |
-| `showViews` | `article.showViews` | Whether or not the article views should be displayed in lists and detailed view. This requires a firebase integration. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish |
-| `showLikes` | `article.showLikes` | Whether or not the article likes should be displayed in lists and detailed view. This requires a firebase integration. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish |
-| `seriesOpened` | `article.seriesOpened` | Whether or not the series module will be displayed open by default or not. |
-| `series` | _Not set_ | Array of series the article belongs to, we recommend using only one series per article. |
-| `series_order` | _Not set_ | Number of the article within the series. |
-| `summary` | Auto generated using `summaryLength` (see [site configuration]({{< ref "configuration#site-configuration" >}})) | When `showSummary` is enabled, this is the Markdown string to be used as the summary for this article. |
-| `xml` | `true` unless excluded by `sitemap.excludedKinds` | Whether or not this article is included in the generated `/sitemap.xml` file. |
-| `layoutBackgroundBlur` | `true` | Makes the background image in the background heroStyle blur with the scroll |
-| `layoutBackgroundHeaderSpace` | `true` | Add space between the header and the body. |
-
 <!-- prettier-ignore-end -->
diff --git a/exampleSite/content/docs/getting-started/index.it.md b/exampleSite/content/docs/getting-started/index.it.md
index a0ea966a..a3707243 100644
--- a/exampleSite/content/docs/getting-started/index.it.md
+++ b/exampleSite/content/docs/getting-started/index.it.md
@@ -66,79 +66,11 @@ Se hai bisogno di ulteriori dettagli, ulteriori informazioni su ciascuna di ques
 
 ## Schemi di colori
 
-Blowfish viene fornito con una serie di schemi di colori già pronti. Per cambiare lo schema, è sufficiente impostare il parametro del tema `colorScheme`. Le opzioni valide sono `blowfish` (default), `avocado`, `fire`, `ocean`, `forest`, `princess`, `neon`, `bloody`, `terminal`, `marvel`, `noir`, `autumn`, `congo`, `slate`, `github` and `one-light`.
+Blowfish offre diversi schemi di colore predefiniti. Puoi provare gli schemi incorporati qui sotto:
 
-```toml
-# config/_default/params.toml
+{{< theme-switcher >}}
 
-colorScheme = "blowfish"
-```
-
-Blowfish definisce una palette di tre colori che viene utilizzata in tutto il tema. Ogni colore principale contiene dieci sfumature basate sui colori inclusi in [Tailwind](https://tailwindcss.com/docs/customizing-colors#color-palette-reference). I tre colori principali sono utilizzati per l'intestazione, il piè di pagina e i colori d'accento. Ecco i colori per ogni schema:
-
-### Blowfish (default)
-
-{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
-
-### Avocado
-
-{{< swatches "#78716c" "#84cc16" "#10b981" >}}
-
-### Fire
-
-{{< swatches "#78716c" "#f97316" "#f43f5e" >}}
-
-### Ocean
-
-{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
-
-### Forest
-
-{{< swatches "#658c86" "#3bf5df" "#06d45c" >}}
-
-### Princess
-
-{{< swatches "#8c658c" "#f53bf2" "#7706d4" >}}
-
-### Neon
-
-{{< swatches "#8338ec" "#ff006e" "#3a86ff" >}}
-
-### Bloody
-
-{{< swatches "#d90429" "#8d99ae" "#457b9d" >}}
-
-### Terminal
-
-{{< swatches "#004b23" "#38b000" "#1a759f" >}}
-
-### Marvel
-
-{{< swatches "#2541b2" "#d81159" "#ffbc42" >}}
-
-### Noir
-
-{{< swatches "#5c6b73" "#9db4c0" "#00a5cf" >}}
-
-### Autumn
-
-{{< swatches "#0a9396" "#ee9b00" "#bb3e03" >}}
-
-### Congo
-
-{{< swatches "#71717a" "#8b5cf6" "#d946ef" >}}
-
-### Slate
-
-{{< swatches "#6B7280" "#64748b" "#6B7280" >}}
-
-### Github
-
-{{< swatches "#64748b" "#0092ff" "#f54728" >}}
-
-### One-Light
-
-{{< swatches "#646464" "#0070cc" "#20a077" >}}
+Ogni schema di colore in Blowfish si basa su una palette composta da tre colori, utilizzata in modo coerente all’interno del tema. Ciascuno di questi colori principali deriva dalle palette a dieci tonalità incluse in [Tailwind CSS](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).
 
 Sebbene questi siano gli schemi predefiniti, è possibile crearne di propri. Per maggiori informazioni, consultare la sezione [Personalizzazione avanzata]({{< ref "advanced-customisation#colour-schemes" >}}).
 
diff --git a/exampleSite/content/docs/getting-started/index.ja.md b/exampleSite/content/docs/getting-started/index.ja.md
index ab155247..6594f4a3 100644
--- a/exampleSite/content/docs/getting-started/index.ja.md
+++ b/exampleSite/content/docs/getting-started/index.ja.md
@@ -63,79 +63,11 @@ links = [
 
 ## カラースキーム
 
-Blowfish には、すぐに使用できる多くのカラースキームが付属しています。スキームを変更するには、`colorScheme` テーマパラメータを設定するだけです。有効なオプションは、`blowfish` (デフォルト)、`avocado`、`fire`、`ocean`、`forest`、`princess`、`neon`、`bloody`、`terminal`、`marvel`、`noir`、`autumn`、`congo`、`slate`、`github`、`one-light` です。
+Blowfish には複数のカラースキームが用意されている。以下の組み込みスキームを試すことができます：
 
-```toml
-# config/_default/params.toml
+{{< theme-switcher >}}
 
-colorScheme = "blowfish"
-```
-
-Blowfish は、テーマ全体で使用される3色のパレットを定義しています。各メインカラーには、[Tailwind](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) に含まれる色に基づいた10の色合いが含まれています。3つのメインカラーは、ヘッダー、フッター、およびアクセントカラーに使用されます。各スキームの色は次のとおりです。
-
-### Blowfish (デフォルト)
-
-{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
-
-### Avocado
-
-{{< swatches "#78716c" "#84cc16" "#10b981" >}}
-
-### Fire
-
-{{< swatches "#78716c" "#f97316" "#f43f5e" >}}
-
-### Ocean
-
-{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
-
-### Forest
-
-{{< swatches "#658c86" "#3bf5df" "#06d45c" >}}
-
-### Princess
-
-{{< swatches "#8c658c" "#f53bf2" "#7706d4" >}}
-
-### Neon
-
-{{< swatches "#8338ec" "#ff006e" "#3a86ff" >}}
-
-### Bloody
-
-{{< swatches "#d90429" "#8d99ae" "#457b9d" >}}
-
-### Terminal
-
-{{< swatches "#004b23" "#38b000" "#1a759f" >}}
-
-### Marvel
-
-{{< swatches "#2541b2" "#d81159" "#ffbc42" >}}
-
-### Noir
-
-{{< swatches "#5c6b73" "#9db4c0" "#00a5cf" >}}
-
-### Autumn
-
-{{< swatches "#0a9396" "#ee9b00" "#bb3e03" >}}
-
-### Congo
-
-{{< swatches "#71717a" "#8b5cf6" "#d946ef" >}}
-
-### Slate
-
-{{< swatches "#6B7280" "#64748b" "#6B7280" >}}
-
-### Github
-
-{{< swatches "#64748b" "#0092ff" "#f54728" >}}
-
-### One-Light
-
-{{< swatches "#646464" "#0070cc" "#20a077" >}}
+Blowfish の各カラースキームは三色のパレットに基づき、テーマ全体で一貫して使用される。各主色は [Tailwind CSS](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) に含まれる十段階のカラーパレットを基礎として構成される。
 
 これらはデフォルトのスキームですが、独自のスキームを作成することもできます。詳細については、[高度なカスタマイズ]({{< ref "advanced-customisation#colour-schemes" >}})セクションを参照してください。
 
diff --git a/exampleSite/content/docs/getting-started/index.md b/exampleSite/content/docs/getting-started/index.md
index ef5aa866..4bb58105 100644
--- a/exampleSite/content/docs/getting-started/index.md
+++ b/exampleSite/content/docs/getting-started/index.md
@@ -63,79 +63,11 @@ If you need extra detail, further information about each of these configuration
 
 ## Colour schemes
 
-Blowfish ships with a number of colour schemes out of the box. To change the scheme, simply set the `colorScheme` theme parameter. Valid options are `blowfish` (default), `avocado`, `fire`, `ocean`, `forest`, `princess`, `neon`, `bloody`, `terminal`, `marvel`, `noir`, `autumn`, `congo`, `slate`, `github` and `one-light`.
+Blowfish ships with a number of colour schemes out of the box. You can try out the built-in schemes below:
 
-```toml
-# config/_default/params.toml
+{{< theme-switcher >}}
 
-colorScheme = "blowfish"
-```
-
-Blowfish defines a three-colour palette that is used throughout the theme. Each main colour contains ten shades which are based upon the colours that are included in [Tailwind](https://tailwindcss.com/docs/customizing-colors#color-palette-reference). The three main colours are used for the header, footer, and accent colours. Here are the colors for each scheme:
-
-### Blowfish (default)
-
-{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
-
-### Avocado
-
-{{< swatches "#78716c" "#84cc16" "#10b981" >}}
-
-### Fire
-
-{{< swatches "#78716c" "#f97316" "#f43f5e" >}}
-
-### Ocean
-
-{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
-
-### Forest
-
-{{< swatches "#658c86" "#3bf5df" "#06d45c" >}}
-
-### Princess
-
-{{< swatches "#8c658c" "#f53bf2" "#7706d4" >}}
-
-### Neon
-
-{{< swatches "#8338ec" "#ff006e" "#3a86ff" >}}
-
-### Bloody
-
-{{< swatches "#d90429" "#8d99ae" "#457b9d" >}}
-
-### Terminal
-
-{{< swatches "#004b23" "#38b000" "#1a759f" >}}
-
-### Marvel
-
-{{< swatches "#2541b2" "#d81159" "#ffbc42" >}}
-
-### Noir
-
-{{< swatches "#5c6b73" "#9db4c0" "#00a5cf" >}}
-
-### Autumn
-
-{{< swatches "#0a9396" "#ee9b00" "#bb3e03" >}}
-
-### Congo
-
-{{< swatches "#71717a" "#8b5cf6" "#d946ef" >}}
-
-### Slate
-
-{{< swatches "#6B7280" "#64748b" "#6B7280" >}}
-
-### Github
-
-{{< swatches "#64748b" "#0092ff" "#f54728" >}}
-
-### One-Light
-
-{{< swatches "#646464" "#0070cc" "#20a077" >}}
+Each colour scheme in Blowfish is built upon a three-colour palette that is used consistently throughout the theme. Each of these main colours is based on the ten-shade colour palettes included in [Tailwind CSS](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).
 
 Although these are the default schemes, you can also create your own. Refer to the [Advanced Customisation]({{< ref "advanced-customisation#colour-schemes" >}}) section for details.
 
diff --git a/exampleSite/content/docs/getting-started/index.zh-cn.md b/exampleSite/content/docs/getting-started/index.zh-cn.md
index 22e089a0..d5090801 100644
--- a/exampleSite/content/docs/getting-started/index.zh-cn.md
+++ b/exampleSite/content/docs/getting-started/index.zh-cn.md
@@ -63,79 +63,11 @@ links = [
 
 ## 颜色方案
 
-Blowfish 主题中包含了数个颜色方案，这些方案可以快速使用。如果需要修改方案，只需要简单的设置 `colorScheme` 参数即可。`colorScheme` 可选的值有`blowfish` （默认）、`avocado`、`fire`、`ocean`、`forest`、`princess`、`neon`、`bloody`、`terminal`、`marvel`、`noir`、`autumn`、`congo`、`slate`、`github` 和 `one-light`。
+Blowfish 提供多种预设配色方案。你可以在下面测试可用的配色方案：
 
-```toml
-# config/_default/params.toml
+{{< theme-switcher >}}
 
-colorScheme = "blowfish"
-```
-
-Blowfish 定义了一种由三种主色调构成的配色方案，每种主色调包含了10种子色调，10个色调是借鉴 [Tailwind](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) 中的定义。Blowfish 中定义了多个预置的三色主题，以便在整个主题中使用。
-
-### Blowfish（默认）
-
-{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
-
-### Avocado
-
-{{< swatches "#78716c" "#84cc16" "#10b981" >}}
-
-### Fire
-
-{{< swatches "#78716c" "#f97316" "#f43f5e" >}}
-
-### Ocean
-
-{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
-
-### Forest
-
-{{< swatches "#658c86" "#3bf5df" "#06d45c" >}}
-
-### Princess
-
-{{< swatches "#8c658c" "#f53bf2" "#7706d4" >}}
-
-### Neon
-
-{{< swatches "#8338ec" "#ff006e" "#3a86ff" >}}
-
-### Bloody
-
-{{< swatches "#d90429" "#8d99ae" "#457b9d" >}}
-
-### Terminal
-
-{{< swatches "#004b23" "#38b000" "#1a759f" >}}
-
-### Marvel
-
-{{< swatches "#2541b2" "#d81159" "#ffbc42" >}}
-
-### Noir
-
-{{< swatches "#5c6b73" "#9db4c0" "#00a5cf" >}}
-
-### Autumn
-
-{{< swatches "#0a9396" "#ee9b00" "#bb3e03" >}}
-
-### Congo
-
-{{< swatches "#71717a" "#8b5cf6" "#d946ef" >}}
-
-### Slate
-
-{{< swatches "#6B7280" "#64748b" "#6B7280" >}}
-
-### Github
-
-{{< swatches "#64748b" "#0092ff" "#f54728" >}}
-
-### One-Light
-
-{{< swatches "#646464" "#0070cc" "#20a077" >}}
+Blowfish 中的每个配色方案均基于三色调色板，并在整个主题中保持一致应用。这些主色基于 [Tailwind CSS](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) 所提供的十阶色板构建。
 
 这些是内置的配色方案，你也可以去自定义这一部分，请参阅 [高级自定义]({{< ref "advanced-customisation#colour-schemes" >}}) 。
 
diff --git a/exampleSite/layouts/shortcodes/theme-switcher.html b/exampleSite/layouts/shortcodes/theme-switcher.html
new file mode 100644
index 00000000..cd4eb46b
--- /dev/null
+++ b/exampleSite/layouts/shortcodes/theme-switcher.html
@@ -0,0 +1,111 @@
+{{ $schemes := slice }}
+{{ $schemesData := newScratch }}
+{{ $ignore := slice "ocean" }}
+{{ range resources.Match "css/schemes/*.css" }}
+  {{ $name := path.BaseName .RelPermalink }}
+  {{ if in $ignore $name }}
+    {{ continue }}
+  {{ end }}
+  {{ $schemes = $schemes | append $name }}
+  {{ $schemesData.SetInMap "data" $name .Content }}
+{{ end }}
+{{ $schemesDataFinal := $schemesData.Get "data" }}
+
+
+<div class="scheme-switcher">
+  <ul id="schemeMenu" class="scheme-list" data-schemes="{{ jsonify $schemesDataFinal }}">
+    {{ range sort $schemes }}
+      <li
+        data-scheme-name="{{ . }}"
+        class="scheme-item {{ if eq . (site.Params.colorScheme | default "blowfish") }}selected{{ end }}">
+        {{ . }}
+      </li>
+    {{ end }}
+  </ul>
+</div>
+
+<div id="configPreview">
+  {{ $defaultScheme := site.Params.colorScheme | default "blowfish" }}
+  {{ $configCode := printf "# config/_default/params.toml\n\n" }}
+  {{ $configCode = printf "%scolorScheme = \"%s\"" $configCode $defaultScheme }}
+  {{ highlight $configCode "toml" }}
+</div>
+
+<style id="dynamicScheme"></style>
+
+<style>
+  .scheme-switcher {
+    display: inline-block;
+  }
+
+  .scheme-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    max-width: 100%;
+  }
+
+  .scheme-item {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 0.375rem;
+    background-color: white;
+    cursor: pointer;
+    text-align: center;
+  }
+
+  .scheme-item:hover {
+    border-color: rgba(0, 0, 0, 0.4);
+  }
+
+  .scheme-item.selected {
+    outline: 2px solid rgb(var(--color-primary-500));
+    outline-offset: 2px;
+  }
+
+  .dark .scheme-item {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+
+  .dark .scheme-item:hover {
+    border-color: rgba(255, 255, 255, 0.4);
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+</style>
+
+<script>
+  (function () {
+    const menu = document.getElementById("schemeMenu");
+    const schemes = JSON.parse(menu.dataset.schemes);
+    const styleEl = document.getElementById("dynamicScheme");
+    const preview = document.getElementById("configPreview");
+
+    let currentScheme = menu.querySelector(".scheme-item.selected").dataset.schemeName;
+    styleEl.textContent = schemes[currentScheme];
+
+    menu.querySelectorAll(".scheme-item").forEach((item) => {
+      item.addEventListener("click", function (e) {
+        menu.querySelector(".scheme-item.selected").classList.remove("selected");
+        e.target.classList.add("selected");
+        currentScheme = e.target.dataset.schemeName;
+        styleEl.textContent = schemes[currentScheme];
+
+        const spans = preview.querySelectorAll("span");
+        for (let i = 0; i < spans.length; i++) {
+          if (spans[i].textContent === "colorScheme") {
+            const stringSpan = spans[i + 2];
+            if (stringSpan) {
+              stringSpan.textContent = `"${currentScheme}"`;
+            }
+            break;
+          }
+        }
+      });
+    });
+  })();
+</script>