Personaliza el color de tabi y el tema predeterminado

Tabla de contenido

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:

Lavanda

Aplica esta skin con skin = "lavender".

Rojo

Cambia a esta skin con la configuración skin = "red".

Menta

Una skin hecha por 🅿️.

Actívala con skin = "mint".

Sakura

Inspirada en la temporada de florecimiento de los cerezos en Japón.

Para activar esta skin, ajusta skin = "sakura".

Azul

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).

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).

Actívala con skin = "evangelion".

Monocromático

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.)

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.)

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.)

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:

  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”):

// 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.