mirror of
https://github.com/nunocoracao/blowfish.git
synced 2026-01-30 16:31:52 +01:00
docs: add theme-switcher for color schemes
This commit is contained in:
ZhenShuo Leo
@@ -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" >}}).
|
||||
|
||||
|
||||
@@ -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" >}})セクションを参照してください。
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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" >}}) 。
|
||||
|
||||
|
||||
111
exampleSite/layouts/shortcodes/theme-switcher.html
Normal file
111
exampleSite/layouts/shortcodes/theme-switcher.html
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user