Saltar al contenido

# Personaliza el color de tabi y el tema predeterminado

- 9 ago 2023
- •5 mins de lectura
- •Etiquetas:
- funcionalidad,
- tutorial

- Actualizado el 12 sep 2024
- •Ver cambios

### Tabla de contenido

- Tema predeterminado
- Skins
  - Aguamarina
  - Lavanda
  - Rojo
  - Menta
  - Sakura
  - Azul
  - Lingote índigo
  - Evangelion
  - Monocromático
  - Naranja (bajo contraste)
  - Melocotón (bajo contraste)
  - Rosa (bajo contraste)
  - Crea tu propia skin

Aprende a personalizar tabi usando skins y estableciendo un tema predeterminado, haciendo que tu sitio sea único.

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

- Tema predeterminado
- Skins
  - Aguamarina
  - Lavanda
  - Rojo
  - Menta
  - Sakura
  - Azul
  - Lingote índigo
  - Evangelion
  - Monocromático
  - Naranja (bajo contraste)
  - Melocotón (bajo contraste)
  - Rosa (bajo contraste)
  - Crea tu propia skin

Copiado! Copiar código al portapapeles