alexohneander/alexohneander-zola
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

✨ feat: introduce skins to customise the theme (#105)

Browse Source
This commit is contained in:
Óscar
2023-08-10 13:21:52 +02:00
committed by GitHub
parent d2780f42a3
commit f8cce3001c
45 changed files with 673 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
content/blog/customise-tabi.ca.md Normal file
View File

@@ -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`.

177
content/blog/customise-tabi.es.md Normal file
View File

@@ -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`.

186
content/blog/customise-tabi.md Normal file
View File

@@ -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.
<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="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>
### 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"`.
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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) }}
<hr>
### 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"`.
<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="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"`.
<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="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"`.
<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="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"`.
<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?
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`.