8.5 KiB
+++ 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:
[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.
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:
[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="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) }}
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".
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".
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".
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".
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".
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".
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".
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".
Naranja (bajo contraste)
¡ADVERTENCIA! El tema claro de esta skin podría tener poco contraste, 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".
Melocotón (bajo contraste)
¡ADVERTENCIA! El tema claro de esta skin podría tener poco contraste, 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.
Rosa (bajo contraste)
¡ADVERTENCIA! El tema claro de esta skin podría tener poco contraste, 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".
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:
- Dentro del directorio del tema:
themes/tabi/sass/skins - 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"):
// 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. El fondo del tema claro es #fff, y el del tema oscuro #1f1f1f.