Add files to repos

themes/tabi/content/blog/customise-tabi/index.ca.md

@@ -0,0 +1,204 @@
++++
+title = "Personalitza el color de tabi i el tema per defecte"
+date = 2023-08-09
+updated = 2024-09-12
+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
+social_media_card = "social_cards/ca_blog_customise_tabi.jpg"
++++
+
+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
+
+Utilitza `default_theme = "dark"` per establir el tema fosc com a predeterminat, o `default_theme = "light"` per establir el tema clar com a predeterminat.
+
+Establir `default_theme = ""` (o comentar la variable) seguirà la preferència del sistema de l'usuari (mode clar o fosc).
+
+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"
+```
+
+## 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="blog/customise-tabi/skins/teal_light.webp", toggled_src="blog/customise-tabi/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="blog/customise-tabi/skins/lavender_light.webp", toggled_src="blog/customise-tabi/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="blog/customise-tabi/skins/red_light.webp", toggled_src="blog/customise-tabi/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="blog/customise-tabi/skins/mint_light.webp", toggled_src="blog/customise-tabi/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="blog/customise-tabi/skins/sakura_light.webp", toggled_src="blog/customise-tabi/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="blog/customise-tabi/skins/blue_light.webp", toggled_src="blog/customise-tabi/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="blog/customise-tabi/skins/indigo_ingot_light.webp", toggled_src="blog/customise-tabi/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="blog/customise-tabi/skins/evangelion_light.webp", toggled_src="blog/customise-tabi/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="blog/customise-tabi/skins/monochrome_light.webp", toggled_src="blog/customise-tabi/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="blog/customise-tabi/skins/lowcontrast_orange_light.webp", toggled_src="blog/customise-tabi/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="blog/customise-tabi/skins/lowcontrast_peach_light.webp", toggled_src="blog/customise-tabi/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="blog/customise-tabi/skins/lowcontrast_pink_light.webp", toggled_src="blog/customise-tabi/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?
+
+Pots guardar la teva nova skin en qualsevol d'aquests dos directoris:
+1. Dins del directori del tema: `themes/tabi/sass/skins`
+2. Dins del directori principal del teu lloc: `sass/skins` (necessitaràs crear aquesta carpeta)
+
+Crea un nou arxiu `.scss` (per exemple, `la_teva_skin.scss`) a la ubicació que prefereixis. Aquest arxiu ha de contenir aquestes dues variables (aquesta és la skin predeterminada, "teal"):
+
+```scss
+// This defines theme-specific variables.
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        // Light theme colours.
+        --primary-color: #087e96; // Contrast ratio: 4.73:1
+    }
+    @else if $theme == 'dark' {
+        // Dark theme colours.
+        --primary-color: #91e0ee;  // Contrast ratio: 11.06:1
+    }
+}
+
+// Apply light theme variables by default.
+:root {
+    @include theme-variables('light');
+}
+
+[data-theme='dark'] {
+    @include theme-variables('dark');
+}
+
+// Apply dark theme variables when user's system prefers dark mode
+// and the theme is not explicitly set to light.
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
+}
+```
+
+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`.

themes/tabi/content/blog/customise-tabi/index.es.md

@@ -0,0 +1,207 @@
++++
+title = "Personaliza el color de tabi y el tema predeterminado"
+date = 2023-08-09
+updated = 2024-09-12
+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
+social_media_card = "social_cards/es_blog_customise_tabi.jpg"
++++
+
+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
+
+Usa `default_theme = "dark"` para establecer el tema oscuro como predeterminado, o `default_theme = "light"` para establecer el tema claro como predeterminado.
+
+Establecer `default_theme = ""` (o no especificar la variable) seguirá las preferencias del sistema del usuario (modo claro u oscuro).
+
+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"
+```
+
+## 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="blog/customise-tabi/skins/teal_light.webp", toggled_src="blog/customise-tabi/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="blog/customise-tabi/skins/lavender_light.webp", toggled_src="blog/customise-tabi/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="blog/customise-tabi/skins/red_light.webp", toggled_src="blog/customise-tabi/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="blog/customise-tabi/skins/mint_light.webp", toggled_src="blog/customise-tabi/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="blog/customise-tabi/skins/sakura_light.webp", toggled_src="blog/customise-tabi/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="blog/customise-tabi/skins/blue_light.webp", toggled_src="blog/customise-tabi/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="blog/customise-tabi/skins/indigo_ingot_light.webp", toggled_src="blog/customise-tabi/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="blog/customise-tabi/skins/evangelion_light.webp", toggled_src="blog/customise-tabi/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="blog/customise-tabi/skins/monochrome_light.webp", toggled_src="blog/customise-tabi/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="blog/customise-tabi/skins/lowcontrast_orange_light.webp", toggled_src="blog/customise-tabi/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="blog/customise-tabi/skins/lowcontrast_peach_light.webp", toggled_src="blog/customise-tabi/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="blog/customise-tabi/skins/lowcontrast_pink_light.webp", toggled_src="blog/customise-tabi/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?
+
+Puedes guardar tu nueva skin en cualquiera de estos dos directorios:
+1. Dentro del directorio del tema: `themes/tabi/sass/skins`
+2. Dentro del directorio principal de tu sitio: `sass/skins` (necesitarás crear esta carpeta)
+
+Crea un nuevo archivo `.scss` (por ejemplo, `tu_skin.scss`) en la ubicación que prefieras. Este archivo debe contener estas dos variables (esta es la skin predeterminada, "teal"):
+
+```scss
+// This defines theme-specific variables.
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        // Light theme colours.
+        --primary-color: #087e96; // Contrast ratio: 4.73:1
+    }
+    @else if $theme == 'dark' {
+        // Dark theme colours.
+        --primary-color: #91e0ee;  // Contrast ratio: 11.06:1
+    }
+}
+
+// Apply light theme variables by default.
+:root {
+    @include theme-variables('light');
+}
+
+// Apply dark theme variables when dark theme is explicitly set.
+[data-theme='dark'] {
+    @include theme-variables('dark');
+}
+
+// Apply dark theme variables when user's system prefers dark mode
+// and the theme is not explicitly set to light.
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
+}
+```
+
+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`.

themes/tabi/content/blog/customise-tabi/index.md

@@ -0,0 +1,216 @@
++++
+title = "Customise tabi with skins and a default theme"
+date = 2023-08-09
+updated = 2024-09-12
+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
+social_media_card = "social_cards/blog_customise_tabi.jpg"
++++
+
+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
+
+Use `default_theme = "dark"` to set the dark theme as the default, or `default_theme = "light"` to set the light theme as the default.
+
+Setting `default_theme = ""` (or commenting out the variable) will follow the user's system preference (light or dark mode).
+
+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"
+```
+
+## 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.
+
+<hr>
+
+### Teal
+
+The default skin. If the `skin` variable is unset (or set to `"teal"`), this is what tabi looks like:
+
+{{ image_toggler(default_src="blog/customise-tabi/skins/teal_light.webp", toggled_src="blog/customise-tabi/skins/teal_dark.webp", default_alt="teal skin in light mode", toggled_alt="teal skin in dark mode", full_width=true) }}
+
+<hr>
+
+### Lavender
+
+{{ image_toggler(default_src="blog/customise-tabi/skins/lavender_light.webp", toggled_src="blog/customise-tabi/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"`.
+
+
+<hr>
+
+### Red
+
+{{ image_toggler(default_src="blog/customise-tabi/skins/red_light.webp", toggled_src="blog/customise-tabi/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"`.
+
+
+<hr>
+
+### Mint
+
+A skin designed by 🅿️.
+
+{{ image_toggler(default_src="blog/customise-tabi/skins/mint_light.webp", toggled_src="blog/customise-tabi/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"`.
+
+
+<hr>
+
+### Sakura
+
+Inspired by the Japanese cherry blossom season.
+
+{{ image_toggler(default_src="blog/customise-tabi/skins/sakura_light.webp", toggled_src="blog/customise-tabi/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"`.
+
+
+<hr>
+
+### Blue
+
+{{ image_toggler(default_src="blog/customise-tabi/skins/blue_light.webp", toggled_src="blog/customise-tabi/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"`.
+
+
+<hr>
+
+### Indigo Ingot
+
+*Indigo* for blue (in light theme) and *ingot* for gold (in dark theme).
+
+{{ image_toggler(default_src="blog/customise-tabi/skins/indigo_ingot_light.webp", toggled_src="blog/customise-tabi/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"`.
+
+
+<hr>
+
+### Evangelion
+
+Inspired by the colours of Evangelion Unit-01 (in dark theme) and Unit-02 (in light theme).
+
+{{ image_toggler(default_src="blog/customise-tabi/skins/evangelion_light.webp", toggled_src="blog/customise-tabi/skins/evangelion_dark.webp", default_alt="evangelion skin in light mode", toggled_alt="evangelion skin in dark mode", full_width=true) }}
+
+
+<hr>
+
+### Monochrome
+
+{{ image_toggler(default_src="blog/customise-tabi/skins/monochrome_light.webp", toggled_src="blog/customise-tabi/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"`.
+
+
+<hr>
+
+### 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="blog/customise-tabi/skins/lowcontrast_orange_light.webp", toggled_src="blog/customise-tabi/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"`.
+
+
+<hr>
+
+### 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="blog/customise-tabi/skins/lowcontrast_peach_light.webp", toggled_src="blog/customise-tabi/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"`.
+
+
+<hr>
+
+### 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="blog/customise-tabi/skins/lowcontrast_pink_light.webp", toggled_src="blog/customise-tabi/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"`.
+
+
+<hr>
+
+### Create your own skin
+
+You're not just limited to predefined skins. Why not create a look that's distinctively tailored to your preferences?
+
+You can save your new skin it in either of these two directories:
+1. Inside the theme's directory: `themes/tabi/sass/skins`
+2. Inside your main site's directory: `sass/skins` (you'll need to create this folder)
+
+Create a new `.scss` file (for example, `your_skin.scss`) in your preferred location. This file needs to have these two variables (this is the default skin, "teal"):
+
+```scss
+// This defines theme-specific variables.
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        // Light theme colours.
+        --primary-color: #087e96; // Contrast ratio: 4.73:1
+    }
+    @else if $theme == 'dark' {
+        // Dark theme colours.
+        --primary-color: #91e0ee;  // Contrast ratio: 11.06:1
+    }
+}
+
+// Apply light theme variables by default.
+:root {
+    @include theme-variables('light');
+}
+
+// Apply dark theme variables when dark theme is explicitly set.
+[data-theme='dark'] {
+    @include theme-variables('dark');
+}
+
+// Apply dark theme variables when user's system prefers dark mode
+// and the theme is not explicitly set to light.
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
+}
+```
+
+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`.