Personalitza el color de tabi i el tema per defecte

Taula de contingut

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.