From 0f105d2acba9c2cf4d420e115e20eab3632a36b4 Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Tue, 25 Nov 2025 03:05:27 +0800
Subject: [PATCH] docs: add theme-switcher for color schemes
---
assets/css/compiled/main.css | 16 ++-
.../content/docs/getting-started/index.it.md | 74 +-----------
.../content/docs/getting-started/index.ja.md | 74 +-----------
.../content/docs/getting-started/index.md | 74 +-----------
.../docs/getting-started/index.zh-cn.md | 74 +-----------
.../layouts/shortcodes/theme-switcher.html | 111 ++++++++++++++++++
6 files changed, 133 insertions(+), 290 deletions(-)
create mode 100644 exampleSite/layouts/shortcodes/theme-switcher.html
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/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" }}
+
+
+
+
+
+
+
+ {{ $defaultScheme := site.Params.colorScheme | default "blowfish" }}
+ {{ $configCode := printf "# config/_default/params.toml\n\n" }}
+ {{ $configCode = printf "%scolorScheme = \"%s\"" $configCode $defaultScheme }}
+ {{ highlight $configCode "toml" }}
+
+
+
+
+
+
+