diff --git a/README.md b/README.md
index 442944a..3c7426f 100644
--- a/README.md
+++ b/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/).
diff --git a/config.toml b/config.toml
index a6274e3..4a99fce 100644
--- a/config.toml
+++ b/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
diff --git a/content/blog/customise-tabi.ca.md b/content/blog/customise-tabi.ca.md
new file mode 100644
index 0000000..0be0f35
--- /dev/null
+++ b/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.
+
+
+
+### 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) }}
+
+
+
+### 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"`.
+
+
+
+### 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"`.
+
+
+
+### 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"`.
+
+
+
+### 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"`.
+
+
+
+### 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"`.
+
+
+
+### 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"`.
+
+
+
+### 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) }}
+
+
+
+### 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"`.
+
+
+
+### 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"`.
+
+
+
+### 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.
+
+
+
+### 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"`.
+
+
+
+### 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`.
diff --git a/content/blog/customise-tabi.es.md b/content/blog/customise-tabi.es.md
new file mode 100644
index 0000000..cb8c9e5
--- /dev/null
+++ b/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.
+
+
+
+### 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) }}
+
+
+
+### 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"`.
+
+
+
+### 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"`.
+
+
+
+### 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"`.
+
+
+
+### 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"`.
+
+
+
+### 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"`.
+
+
+
+### 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"`.
+
+
+
+### 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"`.
+
+
+
+### 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"`.
+
+
+
+### 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"`.
+
+
+
+### 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.
+
+
+
+### 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"`.
+
+
+
+### 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`.
diff --git a/content/blog/customise-tabi.md b/content/blog/customise-tabi.md
new file mode 100644
index 0000000..199da6b
--- /dev/null
+++ b/content/blog/customise-tabi.md
@@ -0,0 +1,186 @@
++++
+title = "Customise tabi with skins and a default theme"
+date = 2023-08-09
+description = "Learn how to customise tabi using skins and setting a default theme, making your site uniquely yours."
+
+[taxonomies]
+tags = ["showcase", "tutorial"]
+
+[extra]
+toc = true
+quick_navigation_buttons = true
++++
+
+tabi can be customised in two ways: by setting the default theme (dark or light) and by choosing the main colour for the theme (skins).
+
+## Default theme
+
+To permanently set your site to either the dark or light theme, you need to disable the theme switcher in `config.toml` and set your preferred theme as the `default_theme`.
+
+For example, to have a permanent dark theme:
+
+```toml
+[extra]
+theme_switcher = false
+default_theme = "dark"
+```
+
+If your theme switcher is enabled, the `default_theme` will only be used as fallback, in case a visitor has JavaScript disabled.
+
+## Skins
+
+Not a fan of teal? No problem! tabi has 12 skins for you to choose from. If none of these work for you, you can [create your own](#create-your-own-skin).
+
+A skin is a CSS file with two variables: the primary colour for the light theme, and the primary colour for the dark theme.
+
+Enabling a skin is as easy as setting the `skin` variable in your `config.toml` with the name of the skin. For example:
+
+```toml
+[extra]
+skin = "sakura"
+```
+
+Take a look below at the available skins below.
+
+**Click on the images** to switch between dark and light themes.
+
+
+
+### Teal
+
+The default skin. If the `skin` variable is unset (or set to `"teal"`), this is what tabi looks like:
+
+{{ 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) }}
+
+
+
+### Lavender
+
+{{ image_toggler(default_src="img/skins/lavender_light.webp", toggled_src="img/skins/lavender_dark.webp", default_alt="lavender skin in light mode", toggled_alt="lavender skin in dark mode", full_width=true) }}
+
+To apply, use `skin = "lavender"`.
+
+
+
+
+### Red
+
+{{ image_toggler(default_src="img/skins/red_light.webp", toggled_src="img/skins/red_dark.webp", default_alt="red skin in light mode", toggled_alt="red skin in dark mode", full_width=true) }}
+
+Switch to this by setting `skin = "red"`.
+
+
+
+
+### Mint
+
+A skin designed by 🅿️.
+
+{{ image_toggler(default_src="img/skins/mint_light.webp", toggled_src="img/skins/mint_dark.webp", default_alt="mint skin in light mode", toggled_alt="mint skin in dark mode", full_width=true) }}
+
+Activate it with `skin = "mint"`.
+
+
+
+
+### Sakura
+
+Inspired by the Japanese cherry blossom season.
+
+{{ image_toggler(default_src="img/skins/sakura_light.webp", toggled_src="img/skins/sakura_dark.webp", default_alt="sakura skin in light mode", toggled_alt="sakura skin in dark mode", full_width=true) }}
+
+To enable this skin, adjust `skin = "sakura"`.
+
+
+
+
+### Blue
+
+{{ image_toggler(default_src="img/skins/blue_light.webp", toggled_src="img/skins/blue_dark.webp", default_alt="blue skin in light mode", toggled_alt="blue skin in dark mode", full_width=true) }}
+
+For this appearance, set `skin = "blue"`.
+
+
+
+
+### Indigo Ingot
+
+*Indigo* for blue (in light theme) and *ingot* for gold (in dark theme).
+
+{{ image_toggler(default_src="img/skins/indigo_ingot_light.webp", toggled_src="img/skins/indigo_ingot_dark.webp", default_alt="indigo ingot skin in light mode", toggled_alt="indigo ingot skin in dark mode", full_width=true) }}
+
+To activate this skin, use `skin = "indigo_ingot"`.
+
+
+
+
+### Evangelion
+
+Inspired by the colours of Evangelion Unit-01 (in dark theme) and Unit-02 (in light theme).
+
+{{ image_toggler(default_src="img/skins/evangelion_light.webp", toggled_src="img/skins/evangelion_dark.webp", default_alt="evangelion skin in light mode", toggled_alt="evangelion skin in dark mode", full_width=true) }}
+
+
+
+
+### Monochrome
+
+{{ image_toggler(default_src="img/skins/monochrome_light.webp", toggled_src="img/skins/monochrome_dark.webp", default_alt="monochrome skin in light mode", toggled_alt="monochrome skin in dark mode", full_width=true) }}
+
+To achieve this look, set `skin = "monochrome"`.
+
+
+
+
+### Low contrast orange
+
+**WARNING!** This skin's light theme may have [low contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), affecting accessibility and Lighthouse rating. (Dark theme is fine.)
+
+{{ image_toggler(default_src="img/skins/lowcontrast_orange_light.webp", toggled_src="img/skins/lowcontrast_orange_dark.webp", default_alt="low contrast orange skin in light mode", toggled_alt="low contrast orange skin in dark mode", full_width=true) }}
+
+To use, set `skin = "lowcontrast_orange"`.
+
+
+
+
+### Low contrast peach
+
+**WARNING!** This skin's light theme may have [low contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), affecting accessibility and Lighthouse rating. (Dark theme is fine.)
+
+{{ image_toggler(default_src="img/skins/lowcontrast_peach_light.webp", toggled_src="img/skins/lowcontrast_peach_dark.webp", default_alt="low contrast peach skin in light mode", toggled_alt="low contrast peach skin in dark mode", full_width=true) }}
+
+To enable it, specify `skin = "lowcontrast_peach"`.
+
+
+
+
+### Low contrast pink
+
+**WARNING!** This skin's light theme may have [low contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), affecting accessibility and Lighthouse rating. (Dark theme is fine.)
+
+{{ image_toggler(default_src="img/skins/lowcontrast_pink_light.webp", toggled_src="img/skins/lowcontrast_pink_dark.webp", default_alt="low contrast pink skin in light mode", toggled_alt="low contrast pink skin in dark mode", full_width=true) }}
+
+For this colourscheme, choose `skin = "lowcontrast_pink"`.
+
+
+
+
+### Create your own skin
+
+You're not just limited to predefined skins. Why not create a look that's distinctively tailored to your preferences?
+
+To get started, head over to `themes/tabi/sass/skins` and add a new file (e.g. `your_skin.scss`). This file needs to have these two variables (this is the default skin, teal):
+
+```scss
+:root {
+ --primary-color: #087e96;
+}
+
+[data-theme='dark'] {
+ --primary-color: #91e0ee;
+}
+```
+
+Modify the colours to your taste. Once you're satisfied, update the `skin` variable to match your filename.
+
+Remember to consider the accessibility of the colours you choose. Here's a link that can help you: [WebAIM: Contrast Checker](https://webaim.org/resources/contrastchecker/). The background of the light theme is `#fff`, and the dark one is `#1f1f1f`.
diff --git a/sass/skins/blue.scss b/sass/skins/blue.scss
new file mode 100644
index 0000000..8b3225b
--- /dev/null
+++ b/sass/skins/blue.scss
@@ -0,0 +1,7 @@
+:root {
+ --primary-color: #3271E7; // Contrast ratio: 4.51:1
+}
+
+[data-theme='dark'] {
+ --primary-color: #6cacff; // Contrast ratio: 7.05:1
+}
diff --git a/sass/skins/evangelion.scss b/sass/skins/evangelion.scss
new file mode 100644
index 0000000..d2506fb
--- /dev/null
+++ b/sass/skins/evangelion.scss
@@ -0,0 +1,9 @@
+// Evangelion Unit-02.
+:root {
+ --primary-color: #d12e36; // Contrast ratio: 5.05:1
+}
+
+// Evangelion Unit-01.
+[data-theme='dark'] {
+ --primary-color: #c09bd9; // Contrast
+}
diff --git a/sass/skins/indigo_ingot.scss b/sass/skins/indigo_ingot.scss
new file mode 100644
index 0000000..5ffb588
--- /dev/null
+++ b/sass/skins/indigo_ingot.scss
@@ -0,0 +1,7 @@
+:root {
+ --primary-color: #1460bd; // Contrast ratio: 6.1:1
+}
+
+[data-theme='dark'] {
+ --primary-color: #e6c212; // Contrast ratio: 9.48:1
+}
diff --git a/sass/skins/lavender.scss b/sass/skins/lavender.scss
new file mode 100644
index 0000000..b772953
--- /dev/null
+++ b/sass/skins/lavender.scss
@@ -0,0 +1,7 @@
+:root {
+ --primary-color: #9055d8; // Contrast ratio: 4.69:1
+}
+
+[data-theme='dark'] {
+ --primary-color: #cba2e8; // Contrast ratio: 7.74:1
+}
diff --git a/sass/skins/lowcontrast_orange.scss b/sass/skins/lowcontrast_orange.scss
new file mode 100644
index 0000000..c374ddd
--- /dev/null
+++ b/sass/skins/lowcontrast_orange.scss
@@ -0,0 +1,12 @@
+// WARNING! This skin, in light theme, may not provide optimal contrast for readability
+// and might not be suitable for users with certain types of visual impairment.
+// Furthermore, low contrast will affect your Google Lighthouse rating.
+// For more information on web accessibility: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
+
+:root {
+ --primary-color: #f56a00; // Contrast ratio: 3.02:1. Not very accessible.
+}
+
+[data-theme='dark'] {
+ --primary-color: #ec984f; // Contrast ratio: 7.19:1. Accessible.
+}
diff --git a/sass/skins/lowcontrast_peach.scss b/sass/skins/lowcontrast_peach.scss
new file mode 100644
index 0000000..5b9a51c
--- /dev/null
+++ b/sass/skins/lowcontrast_peach.scss
@@ -0,0 +1,12 @@
+// WARNING! This skin, in light theme, may not provide optimal contrast for readability
+// and might not be suitable for users with certain types of visual impairment.
+// Furthermore, low contrast will affect your Google Lighthouse rating.
+// For more information on web accessibility: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
+
+:root {
+ --primary-color: #ffa057; // Contrast ratio: 2.01:1. Not very accessible.
+}
+
+[data-theme='dark'] {
+ --primary-color: #ffab7f; // Contrast ratio: 8.93:1. Accessible.
+}
diff --git a/sass/skins/lowcontrast_pink.scss b/sass/skins/lowcontrast_pink.scss
new file mode 100644
index 0000000..b6b7378
--- /dev/null
+++ b/sass/skins/lowcontrast_pink.scss
@@ -0,0 +1,12 @@
+// WARNING! This skin, in light theme, may not provide optimal contrast for readability
+// and might not be suitable for users with certain types of visual impairment.
+// Furthermore, low contrast will affect your Google Lighthouse rating.
+// For more information on web accessibility: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
+
+:root {
+ --primary-color: #ee59d2; // Contrast ratio: 3:1. Not very accessible.
+}
+
+[data-theme='dark'] {
+ --primary-color: #f49ee9; // Contrast ratio: 9.87:1. Accessible.
+}
diff --git a/sass/skins/mint.scss b/sass/skins/mint.scss
new file mode 100644
index 0000000..692872f
--- /dev/null
+++ b/sass/skins/mint.scss
@@ -0,0 +1,7 @@
+:root {
+ --primary-color: #00804d; // Contrast ratio: 5:1
+}
+
+[data-theme='dark'] {
+ --primary-color: #00b86e; // Contrast ratio: 6.34:1
+}
diff --git a/sass/skins/monochrome.scss b/sass/skins/monochrome.scss
new file mode 100644
index 0000000..a616695
--- /dev/null
+++ b/sass/skins/monochrome.scss
@@ -0,0 +1,7 @@
+:root {
+ --primary-color: #727272; // Contrast ratio: 4.81:1
+}
+
+[data-theme='dark'] {
+ --primary-color: #b3b3b3; // Contrast ratio: 7.86:1
+}
diff --git a/sass/skins/red.scss b/sass/skins/red.scss
new file mode 100644
index 0000000..844f8b4
--- /dev/null
+++ b/sass/skins/red.scss
@@ -0,0 +1,7 @@
+:root {
+ --primary-color: #ca4963; // Contrast ratio: 4.52:1.
+}
+
+[data-theme='dark'] {
+ --primary-color: #ea535f; // Contrast ratio: 4.63:1.
+}
diff --git a/sass/skins/sakura.scss b/sass/skins/sakura.scss
new file mode 100644
index 0000000..db00861
--- /dev/null
+++ b/sass/skins/sakura.scss
@@ -0,0 +1,7 @@
+:root {
+ --primary-color: #D33C5C; // Contrast ratio: 4.61:1
+}
+
+[data-theme='dark'] {
+ --primary-color: #fabed2; // Contrast ratio: 10.48:1
+}
diff --git a/sass/skins/teal.scss b/sass/skins/teal.scss
new file mode 100644
index 0000000..7ecdc0c
--- /dev/null
+++ b/sass/skins/teal.scss
@@ -0,0 +1,12 @@
+// This file is never loaded; it's serves as reference for the default skin (in main.scss).
+// When creating your own skin, you can use https://webaim.org/resources/contrastchecker/
+// to verify the accessibility and readability of your colourscheme.
+// The light background is #fff and the dark background is #1f1f1f.
+
+:root {
+ --primary-color: #087e96; // Contrast ratio: 4.73:1
+}
+
+[data-theme='dark'] {
+ --primary-color: #91e0ee; // Contrast ratio: 11.06:1
+}
diff --git a/static/feed_style.xsl b/static/feed_style.xsl
index 310b200..3980ed0 100644
--- a/static/feed_style.xsl
+++ b/static/feed_style.xsl
@@ -12,6 +12,7 @@
+
@@ -29,7 +30,7 @@
-
+ →
diff --git a/static/img/skins/blue_dark.webp b/static/img/skins/blue_dark.webp
new file mode 100644
index 0000000..c8e4d31
Binary files /dev/null and b/static/img/skins/blue_dark.webp differ
diff --git a/static/img/skins/blue_light.webp b/static/img/skins/blue_light.webp
new file mode 100644
index 0000000..ff49dee
Binary files /dev/null and b/static/img/skins/blue_light.webp differ
diff --git a/static/img/skins/evangelion_dark.webp b/static/img/skins/evangelion_dark.webp
new file mode 100644
index 0000000..2303692
Binary files /dev/null and b/static/img/skins/evangelion_dark.webp differ
diff --git a/static/img/skins/evangelion_light.webp b/static/img/skins/evangelion_light.webp
new file mode 100644
index 0000000..c3be3a8
Binary files /dev/null and b/static/img/skins/evangelion_light.webp differ
diff --git a/static/img/skins/indigo_ingot_dark.webp b/static/img/skins/indigo_ingot_dark.webp
new file mode 100644
index 0000000..5e316ad
Binary files /dev/null and b/static/img/skins/indigo_ingot_dark.webp differ
diff --git a/static/img/skins/indigo_ingot_light.webp b/static/img/skins/indigo_ingot_light.webp
new file mode 100644
index 0000000..047b0d1
Binary files /dev/null and b/static/img/skins/indigo_ingot_light.webp differ
diff --git a/static/img/skins/lavender_dark.webp b/static/img/skins/lavender_dark.webp
new file mode 100644
index 0000000..478bb87
Binary files /dev/null and b/static/img/skins/lavender_dark.webp differ
diff --git a/static/img/skins/lavender_light.webp b/static/img/skins/lavender_light.webp
new file mode 100644
index 0000000..199e521
Binary files /dev/null and b/static/img/skins/lavender_light.webp differ
diff --git a/static/img/skins/lowcontrast_orange_dark.webp b/static/img/skins/lowcontrast_orange_dark.webp
new file mode 100644
index 0000000..7d71457
Binary files /dev/null and b/static/img/skins/lowcontrast_orange_dark.webp differ
diff --git a/static/img/skins/lowcontrast_orange_light.webp b/static/img/skins/lowcontrast_orange_light.webp
new file mode 100644
index 0000000..f950a1a
Binary files /dev/null and b/static/img/skins/lowcontrast_orange_light.webp differ
diff --git a/static/img/skins/lowcontrast_peach_dark.webp b/static/img/skins/lowcontrast_peach_dark.webp
new file mode 100644
index 0000000..d2d878b
Binary files /dev/null and b/static/img/skins/lowcontrast_peach_dark.webp differ
diff --git a/static/img/skins/lowcontrast_peach_light.webp b/static/img/skins/lowcontrast_peach_light.webp
new file mode 100644
index 0000000..3019b78
Binary files /dev/null and b/static/img/skins/lowcontrast_peach_light.webp differ
diff --git a/static/img/skins/lowcontrast_pink_dark.webp b/static/img/skins/lowcontrast_pink_dark.webp
new file mode 100644
index 0000000..45aedb3
Binary files /dev/null and b/static/img/skins/lowcontrast_pink_dark.webp differ
diff --git a/static/img/skins/lowcontrast_pink_light.webp b/static/img/skins/lowcontrast_pink_light.webp
new file mode 100644
index 0000000..5121e36
Binary files /dev/null and b/static/img/skins/lowcontrast_pink_light.webp differ
diff --git a/static/img/skins/mint_dark.webp b/static/img/skins/mint_dark.webp
new file mode 100644
index 0000000..f584c46
Binary files /dev/null and b/static/img/skins/mint_dark.webp differ
diff --git a/static/img/skins/mint_light.webp b/static/img/skins/mint_light.webp
new file mode 100644
index 0000000..8ea77ee
Binary files /dev/null and b/static/img/skins/mint_light.webp differ
diff --git a/static/img/skins/monochrome_dark.webp b/static/img/skins/monochrome_dark.webp
new file mode 100644
index 0000000..484de64
Binary files /dev/null and b/static/img/skins/monochrome_dark.webp differ
diff --git a/static/img/skins/monochrome_light.webp b/static/img/skins/monochrome_light.webp
new file mode 100644
index 0000000..dfdcf6d
Binary files /dev/null and b/static/img/skins/monochrome_light.webp differ
diff --git a/static/img/skins/red_dark.webp b/static/img/skins/red_dark.webp
new file mode 100644
index 0000000..360c0ba
Binary files /dev/null and b/static/img/skins/red_dark.webp differ
diff --git a/static/img/skins/red_light.webp b/static/img/skins/red_light.webp
new file mode 100644
index 0000000..a628a87
Binary files /dev/null and b/static/img/skins/red_light.webp differ
diff --git a/static/img/skins/sakura_dark.webp b/static/img/skins/sakura_dark.webp
new file mode 100644
index 0000000..e923d90
Binary files /dev/null and b/static/img/skins/sakura_dark.webp differ
diff --git a/static/img/skins/sakura_light.webp b/static/img/skins/sakura_light.webp
new file mode 100644
index 0000000..a628a87
Binary files /dev/null and b/static/img/skins/sakura_light.webp differ
diff --git a/static/img/skins/teal_dark.webp b/static/img/skins/teal_dark.webp
new file mode 100644
index 0000000..496aeb7
Binary files /dev/null and b/static/img/skins/teal_dark.webp differ
diff --git a/static/img/skins/teal_light.webp b/static/img/skins/teal_light.webp
new file mode 100644
index 0000000..eada00e
Binary files /dev/null and b/static/img/skins/teal_light.webp differ
diff --git a/templates/atom.xml b/templates/atom.xml
index cf5a9b2..3aa11f0 100644
--- a/templates/atom.xml
+++ b/templates/atom.xml
@@ -32,6 +32,11 @@
+ {# Load extra CSS (skin) if set in config.toml #}
+ {%- if config.extra.skin and config.extra.skin != "teal" -%}
+
+ {%- endif -%}
+
{{ config.title | striptags | safe }}
{%- if term %} - {{ term.name }}
{%- elif section.title %} - {{ section.title }}
diff --git a/templates/partials/header.html b/templates/partials/header.html
index d1bfe9f..50b78e8 100644
--- a/templates/partials/header.html
+++ b/templates/partials/header.html
@@ -30,11 +30,10 @@
<link rel="stylesheet" type="text/css" media="screen" href={{ get_url(path="main.css", cachebust=true ) }} />
- {% if config.extra.stylesheets %}
- {% for stylesheet in config.extra.stylesheets %}
- <link rel="stylesheet" href="{{ get_url(path=stylesheet) }}">
- {% endfor %}
- {% endif %}
+ {# Load extra CSS for custom skin #}
+ {%- if config.extra.skin and config.extra.skin != "teal" -%}
+ <link rel="stylesheet" href="{{ get_url(path='skins/' ~ config.extra.skin ~ '.css', cachebust=true) | safe }}" />
+ {%- endif -%}
<meta name="color-scheme" content="{%- if config.extra.theme_switcher -%}light dark{%- elif config.extra.default_theme -%}{{config.extra.default_theme}}{%- else -%}light{%- endif -%}">
diff --git a/theme.toml b/theme.toml
index cd9eea5..b845d4a 100644
--- a/theme.toml
+++ b/theme.toml
@@ -37,6 +37,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