✨ feat: introduce skins to customise the theme (#105)
Óscar
2 years ago
committed by
GitHub
parent
d2780f42a3
commit
f8cce3001c
@ -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`.
|
||||
@ -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`.
|
||||
@ -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`.
|
||||
@ -0,0 +1,7 @@
|
||||
:root {
|
||||
--primary-color: #3271E7; // Contrast ratio: 4.51:1
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--primary-color: #6cacff; // Contrast ratio: 7.05:1
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
:root {
|
||||
--primary-color: #1460bd; // Contrast ratio: 6.1:1
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--primary-color: #e6c212; // Contrast ratio: 9.48:1
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
:root {
|
||||
--primary-color: #9055d8; // Contrast ratio: 4.69:1
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--primary-color: #cba2e8; // Contrast ratio: 7.74:1
|
||||
}
|
||||
@ -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.
|
||||
}
|
||||
@ -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.
|
||||
}
|
||||
@ -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.
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
:root {
|
||||
--primary-color: #00804d; // Contrast ratio: 5:1
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--primary-color: #00b86e; // Contrast ratio: 6.34:1
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
:root {
|
||||
--primary-color: #727272; // Contrast ratio: 4.81:1
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--primary-color: #b3b3b3; // Contrast ratio: 7.86:1
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
:root {
|
||||
--primary-color: #ca4963; // Contrast ratio: 4.52:1.
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--primary-color: #ea535f; // Contrast ratio: 4.63:1.
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
:root {
|
||||
--primary-color: #D33C5C; // Contrast ratio: 4.61:1
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--primary-color: #fabed2; // Contrast ratio: 10.48:1
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Loading…
Reference in New Issue