Saltar al contingut

# Personalitza el color de tabi i el tema per defecte

- 9 d’ag. 2023
- •5 mins de lectura
- •Etiquetes:
- funcionalitat,
- tutorial

- Actualitzat el 12 de set. 2024
- •Veure canvis

### Taula de contingut

- Tema per defecte
- Skins
  - Aiguamarina
  - Lavanda
  - Vermell
  - Menta
  - Sakura
  - Blau
  - Lingot indigo
  - Evangelion
  - Monocromàtic
  - Taronja (baix contrast)
  - Préssec (baix contrast)
  - Rosa (baix contrast)
  - Crea la teva pròpia skin

Aprèn a personalitzar tabi fent servir skins i establint un tema per defecte, aconseguint un aspecte únic.

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

Utilitza `default_theme = "dark"` per establir el tema fosc com a predeterminat, o `default_theme = "light"` per establir el tema clar com a predeterminat.

Establir `default_theme = ""` (o comentar la variable) seguirà la preferència del sistema de l’usuari (mode clar o fosc).

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:

    [extra]
    theme_switcher = false
    default_theme = "dark"

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

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:

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

### Aiguamarina

La skin per defecte. Si la variable `skin` no està configurada (o és igual a `"teal"`), aquest és l’aspecte de tabi:

### Lavanda

Per aplicar-la, utilitza `skin = "lavender"`.

### Vermell

Canvia a aquesta skin establint `skin = "red"`.

### Menta

Una skin dissenyada per 🅿️.

Activa-la amb `skin = "mint"`.

### Sakura

Inspirat per la temporada de floració dels cirerers al Japó.

Per habilitar aquesta skin, ajusta `skin = "sakura"`.

### Blau

Per activar aquesta aparença, estableix `skin = "blue"`.

### Lingot indigo

Indigo pel blau (en el tema clar) i lingot pel daurat (en el tema fosc).

Per activar aquest tema, utilitza `skin = "indigo_ingot"`.

### Evangelion

Inspirat pels colors de la Unitat Evangelion-01 (en el tema fosc) i la Unitat-02 (en el tema clar).

### Monocromàtic

Per aconseguir aquesta aparença, estableix `skin = "monochrome"`.

### Taronja (baix contrast)

AVÍS! Aquesta skin en mode clar pot tenir baix contrast, afectant l’accessibilitat i la qualificació Lighthouse. (El mode fosc té bon contrast.)

Per utilitzar-la, estableix `skin = "lowcontrast_orange"`.

### Préssec (baix contrast)

AVÍS! Aquesta skin en mode clar pot tenir baix contrast, afectant l’accessibilitat i la qualificació Lighthouse. (El mode fosc té bon contrast.)

Especifica `skin = "lowcontrast_peach"` per utilitzar aquesta skin.

### Rosa (baix contrast)

AVÍS! Aquesta skin en mode clar pot tenir baix contrast, afectant l’accessibilitat i la qualificació Lighthouse. (El mode fosc té bon contrast.)

Per utilitzar aquests colors, assigna `skin = "lowcontrast_pink"`.

### Crea la teva pròpia skin

No estàs limitat a les skins predefinides. Per què no crees un disseny únic que et representi?

Pots guardar la teva nova skin en qualsevol d’aquests dos directoris:

1. Dins del directori del tema: `themes/tabi/sass/skins`
2. Dins del directori principal del teu lloc: `sass/skins` (necessitaràs crear aquesta carpeta)

Crea un nou arxiu `.scss` (per exemple, `la_teva_skin.scss`) a la ubicació que prefereixis. Aquest arxiu ha de contenir aquestes dues variables (aquesta és 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');
    }

    [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 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. El fondo del tema clar és `#fff`, i el del tema fosc `#1f1f1f`.

- Tema per defecte
- Skins
  - Aiguamarina
  - Lavanda
  - Vermell
  - Menta
  - Sakura
  - Blau
  - Lingot indigo
  - Evangelion
  - Monocromàtic
  - Taronja (baix contrast)
  - Préssec (baix contrast)
  - Rosa (baix contrast)
  - Crea la teva pròpia skin

Copiat! Copia el codi al porta-retalls