✨ feat: introduce skins to customise the theme

Implements #102

README.md

@@ -2,7 +2,7 @@
 
 A fast, lightweight, and modern [Zola](https://getzola.org) theme with multi-language support. It aims to be a personal page and home to blog posts.
 
-See a live preview [here](https://welpo.github.io/tabi).
+See a live preview (and the theme's documentation) [here](https://welpo.github.io/tabi).
 
 > tabi (旅): Journey.
 
@@ -20,6 +20,7 @@ tabi has a perfect score on Google's Lighthouse audit:
 - [X] Perfect Lighthouse score (Performance, Accessibility, Best Practices and SEO).
 - [X] [KaTeX](https://katex.org/) support.
 - [X] All JavaScript can be [fully disabled](https://welpo.github.io/tabi/blog/javascript/).
+- [X] [Customizable skins](https://welpo.github.io/tabi/customise-tabi/).
 - [X] [Stylized feed](https://welpo.github.io/tabi/atom.xml).
 - [X] [Projects page](https://welpo.github.io/tabi/projects/).
 - [X] [Archive page](https://welpo.github.io/tabi/archive/).

config.toml

@@ -144,6 +144,14 @@ theme_switcher = true
 # Defaults to "light", if unset.
 default_theme = "light"
 
+# Choose the colourscheme (skin) for the theme. Default is "teal".
+# Skin available: blue, lavender, mint, red, sakura, teal, monochrome, lowcontrast_orange, lowcontrast_peach, lowcontrast_pink, indigo_ingot, evangelion
+# WARNING! "lowcontrast" skins, while aesthetically pleasing, may not provide optimal
+# contrast (in light theme) for readability and might not be suitable for all users.
+# Furthermore, low contrasting elements will affect your Google Lighthouse rating.
+# All other skins have optimal contrast.
+skin = ""
+
 # Add a "copy" button to codeblocks (loads ~700 bytes of JavaScript).
 copy_button = true
 

content/blog/customise-tabi.ca.md

@@ -0,0 +1,175 @@
++++
+title = "Personalitza el color de tabi i el tema per defecte"
+date = 2023-08-09
+description = "Aprèn a personalitzar tabi fent servir skins i establint un tema per defecte, aconseguint un aspecte únic."
+
+[taxonomies]
+tags = ["funcionalitat", "tutorial"]
+
+[extra]
+toc = true
+quick_navigation_buttons = true
++++
+
+tabi pot ser personalitzat de dues maneres: establint el tema per defecte (fosc o clar) i triant el color principal per al tema ("skin").
+
+## Tema per defecte
+
+Per configurar permanentment el teu lloc en el tema fosc o clar, necessites desactivar el `theme_switcher` a `config.toml` i establir el teu tema preferit (`light` o `dark`) a `default_theme`.
+
+Per exemple, per tenir un tema fosc permanent:
+
+```toml
+[extra]
+theme_switcher = false
+default_theme = "dark"
+```
+
+Si el teu interruptor de mode clar/fosc està activat, el `default_theme` només s'utilitzarà com a reserva, en cas que un visitant tingui JavaScript desactivat.
+
+## Skins
+
+No t'agrada l'aiguamarina? Cap problema! tabi té 12 skins per triar. Si cap d'aquestes t'agrada, pots [crear la teva pròpia skin](#crea-la-teva-propia-skin).
+
+Una skin és un arxiu CSS amb dues variables: el color principal per al tema clar i el color principal per al tema fosc.
+
+Activar una skin és tan fàcil com establir la variable `skin` a la teva `config.toml` amb el nom de la skin. Per exemple:
+
+```toml
+[extra]
+skin = "sakura"
+```
+
+Fes una ullada a les skins disponibles a continuació.
+
+**Fes clic a les imatges** per canviar entre els temes fosc i clar.
+
+<hr>
+
+### Aiguamarina
+
+La skin per defecte. Si la variable `skin` no està configurada (o és igual a `"teal"`), aquest és l'aspecte de tabi:
+
+{{ image_toggler(default_src="img/skins/teal_light.webp", toggled_src="img/skins/teal_dark.webp", default_alt="teal skin in light mode", toggled_alt="teal skin in dark mode", full_width=true) }}
+
+<hr>
+
+### Lavanda
+
+{{ image_toggler(default_src="img/skins/lavender_light.webp", toggled_src="img/skins/lavender_dark.webp", default_alt="skin lavanda en mode clar", toggled_alt="skin lavanda en mode fosc", full_width=true) }}
+
+Per aplicar-la, utilitza `skin = "lavender"`.
+
+<hr>
+
+### Vermell
+
+{{ image_toggler(default_src="img/skins/red_light.webp", toggled_src="img/skins/red_dark.webp", default_alt="skin vermell en mode clar", toggled_alt="skin vermell en mode fosc", full_width=true) }}
+
+Canvia a aquesta skin establint `skin = "red"`.
+
+<hr>
+
+### Menta
+
+Una skin dissenyada per 🅿️.
+
+{{ image_toggler(default_src="img/skins/mint_light.webp", toggled_src="img/skins/mint_dark.webp", default_alt="skin menta amb tema clar", toggled_alt="skin menta amb tema fosc", full_width=true) }}
+
+Activa-la amb `skin = "mint"`.
+
+<hr>
+
+### Sakura
+
+Inspirat per la temporada de floració dels cirerers al Japó.
+
+{{ image_toggler(default_src="img/skins/sakura_light.webp", toggled_src="img/skins/sakura_dark.webp", default_alt="skin sakura en mode clar", toggled_alt="skin sakura en mode fosc", full_width=true) }}
+
+Per habilitar aquesta skin, ajusta `skin = "sakura"`.
+
+<hr>
+
+### Blau
+
+{{ image_toggler(default_src="img/skins/blue_light.webp", toggled_src="img/skins/blue_dark.webp", default_alt="skin blau en mode clar", toggled_alt="skin blau en mode fosc", full_width=true) }}
+
+Per activar aquesta aparença, estableix `skin = "blue"`.
+
+<hr>
+
+### Lingot indigo
+
+*Indigo* pel blau (en el tema clar) i *lingot* pel daurat (en el tema fosc).
+
+{{ image_toggler(default_src="img/skins/indigo_ingot_light.webp", toggled_src="img/skins/indigo_ingot_dark.webp", default_alt="skin lingot indigo en mode clar", toggled_alt="skin lingot indigo en mode fosc", full_width=true) }}
+
+Per activar aquest tema, utilitza `skin = "indigo_ingot"`.
+
+<hr>
+
+### Evangelion
+
+Inspirat pels colors de la Unitat Evangelion-01 (en el tema fosc) i la Unitat-02 (en el tema clar).
+
+{{ image_toggler(default_src="img/skins/evangelion_light.webp", toggled_src="img/skins/evangelion_dark.webp", default_alt="skin evangelion en mode clar", toggled_alt="skin evangelion en mode fosc", full_width=true) }}
+
+<hr>
+
+### Monocromàtic
+
+{{ image_toggler(default_src="img/skins/monochrome_light.webp", toggled_src="img/skins/monochrome_dark.webp", default_alt="skin monocromàtic en mode clar", toggled_alt="skin monocromàtic en mode fosc", full_width=true) }}
+
+Per aconseguir aquesta aparença, estableix `skin = "monochrome"`.
+
+<hr>
+
+### Taronja (baix contrast)
+
+**AVÍS!** Aquesta skin en mode clar pot tenir [baix contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectant l'accessibilitat i la qualificació Lighthouse. (El mode fosc té bon contrast.)
+
+{{ image_toggler(default_src="img/skins/lowcontrast_orange_light.webp", toggled_src="img/skins/lowcontrast_orange_dark.webp", default_alt="skin taronja de baix contrast en mode clar", toggled_alt="skin taronja de baix contrast en mode fosc", full_width=true) }}
+
+Per utilitzar-la, estableix `skin = "lowcontrast_orange"`.
+
+<hr>
+
+### Préssec (baix contrast)
+
+**AVÍS!** Aquesta skin en mode clar pot tenir [baix contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectant l'accessibilitat i la qualificació Lighthouse. (El mode fosc té bon contrast.)
+
+{{ image_toggler(default_src="img/skins/lowcontrast_peach_light.webp", toggled_src="img/skins/lowcontrast_peach_dark.webp", default_alt="skin préssec de baix contrast en mode clar", toggled_alt="skin préssec de baix contrast en mode fosc", full_width=true) }}
+
+Especifica `skin = "lowcontrast_peach"` per utilitzar aquesta skin.
+
+<hr>
+
+### Rosa (baix contrast)
+
+**AVÍS!** Aquesta skin en mode clar pot tenir [baix contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectant l'accessibilitat i la qualificació Lighthouse. (El mode fosc té bon contrast.)
+
+{{ image_toggler(default_src="img/skins/lowcontrast_pink_light.webp", toggled_src="img/skins/lowcontrast_pink_dark.webp", default_alt="skin rosa de baix contrast en tema clar", toggled_alt="skin rosa de baix contrast en tema fosc", full_width=true) }}
+
+Per utilitzar aquests colors, assigna `skin = "lowcontrast_pink"`.
+
+<hr>
+
+### Crea la teva pròpia skin
+
+No estàs limitat a les skins predefinides. Per què no crees un disseny únic que et representi?
+
+Per començar, dirigeix-te a `themes/tabi/sass/skins` i crea un nou arxiu (per exemple, `la_teva_skin.scss`). Aquest arxiu ha de tenir aquestes dues variables (aquesta és la skin predeterminada, `teal`):
+
+```scss
+:root {
+    --primary-color: #087e96;
+}
+
+[data-theme='dark'] {
+    --primary-color: #91e0ee;
+}
+```
+
+Modifica els colors al teu gust. Una vegada estiguis satisfet, actualitza la variable `skin` perquè coincideixi amb el nom del teu arxiu.
+
+Recorda tenir en compte l'accesibilitat dels colors que triis. Aquí tens un enllaç que et pot ajudar: [WebAIM: Contrast Checker](https://webaim.org/resources/contrastchecker/). El fondo del tema clar és `#fff`, i el del tema fosc `#1f1f1f`.

content/blog/customise-tabi.es.md

@@ -0,0 +1,177 @@
++++
+title = "Personaliza el color de tabi y el tema predeterminado"
+date = 2023-08-09
+description = "Aprende a personalizar tabi usando skins y estableciendo un tema predeterminado, haciendo que tu sitio sea único."
+
+[taxonomies]
+tags = ["funcionalidad", "tutorial"]
+
+[extra]
+toc = true
+quick_navigation_buttons = true
++++
+
+tabi puede ser personalizado de dos maneras: estableciendo el tema predeterminado (oscuro o claro) y eligiendo el color principal para el tema ("skin").
+
+## Tema predeterminado
+
+Para configurar permanentemente tu sitio en el tema oscuro o claro, necesitas desactivar el `theme_switcher` en `config.toml` y establecer tu tema preferido (`light` o `dark`) como el `default_theme`.
+
+Por ejemplo, para tener un tema oscuro permanente:
+
+```toml
+[extra]
+theme_switcher = false
+default_theme = "dark"
+```
+
+Si tu interruptor de modo claro/oscuro está activado, el `default_theme` sólo se usará como respaldo, en caso de que un visitante tenga JavaScript desactivado.
+
+## Skins
+
+¿No te gusta el aguamarina? ¡No hay problema! tabi tiene 12 skins (pieles) para elegir. Si ninguna de estas te convence, puedes [crear tu propia skin](#crea-tu-propia-skin).
+
+Una skin es un archivo CSS con dos variables: el color principal para el tema claro y el color principal para el tema oscuro.
+
+Activar una skin es tan fácil como establecer la variable `skin` en tu `config.toml` con el nombre de la skin. Por ejemplo:
+
+```toml
+[extra]
+skin = "sakura"
+```
+
+Echa un vistazo a las pieles disponibles a continuación.
+
+**Haz clic en las imágenes** para cambiar entre los temas oscuro y claro.
+
+<hr>
+
+### Aguamarina
+
+La skin predeterminada. Si la variable `skin` no está configurada (o es igual a `"teal"`), este es el aspecto de tabi:
+
+{{ image_toggler(default_src="img/skins/teal_light.webp", toggled_src="img/skins/teal_dark.webp", default_alt="skin aguamarina en tema claro", toggled_alt="skin aguamarina en tema oscuro", full_width=true) }}
+
+<hr>
+
+### Lavanda
+
+{{ image_toggler(default_src="img/skins/lavender_light.webp", toggled_src="img/skins/lavender_dark.webp", default_alt="skin lavanda en tema claro", toggled_alt="skin lavanda en tema oscuro", full_width=true) }}
+
+Aplica esta skin con `skin = "lavender"`.
+
+<hr>
+
+### Rojo
+
+{{ image_toggler(default_src="img/skins/red_light.webp", toggled_src="img/skins/red_dark.webp", default_alt="skin rojo en tema claro", toggled_alt="skin rojo en tema oscuro", full_width=true) }}
+
+Cambia a esta skin con la configuración `skin = "red"`.
+
+<hr>
+
+### Menta
+
+Una skin hecha por 🅿️.
+
+{{ image_toggler(default_src="img/skins/mint_light.webp", toggled_src="img/skins/mint_dark.webp", default_alt="skin menta en tema claro", toggled_alt="skin menta en tema oscuro", full_width=true) }}
+
+Actívala con `skin = "mint"`.
+
+<hr>
+
+### Sakura
+
+Inspirada en la temporada de florecimiento de los cerezos en Japón.
+
+{{ image_toggler(default_src="img/skins/sakura_light.webp", toggled_src="img/skins/sakura_dark.webp", default_alt="skin sakura en tema claro", toggled_alt="skin sakura en tema oscuro", full_width=true) }}
+
+Para activar esta skin, ajusta `skin = "sakura"`.
+
+<hr>
+
+### Azul
+
+{{ image_toggler(default_src="img/skins/blue_light.webp", toggled_src="img/skins/blue_dark.webp", default_alt="skin azul en tema claro", toggled_alt="skin azul en tema oscuro", full_width=true) }}
+
+Para lograr esta apariencia, establece `skin = "blue"`.
+
+<hr>
+
+### Lingote índigo
+
+*Índigo* por el azul (en el tema claro) y *lingote* por el oro (en el tema oscuro).
+
+{{ image_toggler(default_src="img/skins/indigo_ingot_light.webp", toggled_src="img/skins/indigo_ingot_dark.webp", default_alt="skin lingote índigo en tema claro", toggled_alt="skin lingote índigo en tema oscuro", full_width=true) }}
+
+Para activar esta skin, usa `skin = "indigo_ingot"`.
+
+<hr>
+
+### Evangelion
+
+Inspirada en los colores de la Unidad-01 de Evangelion (en el tema oscuro) y el EVA-02 (en el tema claro).
+
+{{ image_toggler(default_src="img/skins/evangelion_light.webp", toggled_src="img/skins/evangelion_dark.webp", default_alt="skin evangelion en tema claro", toggled_alt="skin evangelion en tema oscuro", full_width=true) }}
+
+Actívala con `skin = "evangelion"`.
+
+<hr>
+
+### Monocromático
+
+{{ image_toggler(default_src="img/skins/monochrome_light.webp", toggled_src="img/skins/monochrome_dark.webp", default_alt="skin monocromático en tema claro", toggled_alt="skin monocromático en tema oscuro", full_width=true) }}
+
+Si te gusta este look, usa `skin = "monochrome"`.
+
+<hr>
+
+### Naranja (bajo contraste)
+
+**¡ADVERTENCIA!** El tema claro de esta skin podría tener [poco contraste](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectando la accesibilidad y la calificación de Lighthouse. (El tema oscuro tiene buen contraste.)
+
+{{ image_toggler(default_src="img/skins/lowcontrast_orange_light.webp", toggled_src="img/skins/lowcontrast_orange_dark.webp", default_alt="skin naranja de bajo contraste en tema claro", toggled_alt="skin naranja de bajo contraste en tema oscuro", full_width=true) }}
+
+Para activarla, configura `skin = "lowcontrast_orange"`.
+
+<hr>
+
+### Melocotón (bajo contraste)
+
+**¡ADVERTENCIA!** El tema claro de esta skin podría tener [poco contraste](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectando la accesibilidad y la calificación de Lighthouse. (El tema oscuro tiene buen contraste.)
+
+{{ image_toggler(default_src="img/skins/lowcontrast_peach_light.webp", toggled_src="img/skins/lowcontrast_peach_dark.webp", default_alt="skin melocotón de bajo contraste en tema claro", toggled_alt="skin melocotón de bajo contraste en tema oscuro", full_width=true) }}
+
+Especifica `skin = "lowcontrast_peach"` para usar esta skin.
+
+<hr>
+
+### Rosa (bajo contraste)
+
+**¡ADVERTENCIA!** El tema claro de esta skin podría tener [poco contraste](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectando la accesibilidad y la calificación de Lighthouse. (El tema oscuro tiene buen contraste.)
+
+{{ image_toggler(default_src="img/skins/lowcontrast_pink_light.webp", toggled_src="img/skins/lowcontrast_pink_dark.webp", default_alt="skin rosa de bajo contraste en tema claro", toggled_alt="skin rosa de bajo contraste en tema oscuro", full_width=true) }}
+
+Para usar estos colores, asigna `skin = "lowcontrast_pink"`.
+
+<hr>
+
+### Crea tu propia skin
+
+No estás limitado a las skins predefinidas. ¿Por qué no diseñas un aspecto único que te represente?
+
+Para empezar, dirígete a `themes/tabi/sass/skins` y crea un nuevo archivo (por ejemplo, `tu_skin.scss`). Este archivo debe tener estas dos variables (esta es la piel predeterminada, `teal`):
+
+```scss
+:root {
+    --primary-color: #087e96;
+}
+
+[data-theme='dark'] {
+    --primary-color: #91e0ee;
+}
+```
+
+Modifica los colores a tu gusto. Una vez que estés satisfecho, actualiza la variable `skin` para que coincida con el nombre de tu archivo.
+
+Recuerda tener en cuenta la accesibilidad de los colores que elijas. Aquí tienes un enlace que te puede ayudar: [WebAIM: Contrast Checker](https://webaim.org/resources/contrastchecker/). El fondo del tema claro es `#fff`, y el del tema oscuro `#1f1f1f`.