0
votes

Créer un dégradé personnalisé dans bootstrap 4 à l'aide de la fonction SASS theme-color-level

J'ai configuré les variables de thème Bootstrap 4 comme suit:

// myComponent.scss
@import "../custom-variables";

.myUserInfo {
    background-color: $idi-primary-12;
    color: color-yiq($idi-primary-12);
}

Ensuite, des variables personnalisées comme:

//main.scss,
@import "./bootstrap-theme";
@import "./custom-variables";
@import '~bootstrap/scss/bootstrap';

Ensuite, importez tout comme suit:

// custom-variables.scss
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

$idi-primary-12: theme-color-level(primary, -12);

Cela met à jour les classes d'amorçage comme btn-primary et text-secondary AS ATTENDU (sympa);

Mais la variable personnalisée ($ idi-primary-12) basée sur mon $ primary ne fonctionne pas. J'utilisais la fonction SASS au theme-color-level du theme-color-level comme indiqué ici dans la documentation officielle .

Lorsque j'utilise ceci dans mon composant,

// custom-theme.scss
$primary: green;
$secondary: purple;

J'obtiens l' ombre BLEUE (qui est la valeur par défaut dans le bootstrap / scss / variables.scss ). Source Github au lieu de mon remplacement ( vert - comme défini ci-dessus)

Question: Comment utiliser la fonction de niveau de couleur du thème pour utiliser ma variable $ primary (green) pour générer une version plus claire de ce vert? (et pas le bleu par défaut).

Informations complémentaires: documentation officielle des fonctions SASS

theme-color-level utilise la theme-color
theme-color extrait de l'objet $theme-colors par clé (j'utilise primaire )
$theme-colors clé primaire $theme-colors est définie sur $primary ( Github pour $ theme-colors )
$primary est défini sur bleu ( Github pour $ primary )
Cela aurait dû être remplacé par my $primary = green; à partir de custom-theme.scss . C'est pourquoi btn-primary fonctionne. (représenté en vert). Mais pourquoi n'utilise-t-il pas la même variable remplacée pour créer ma variable $idi-primary-12 ?

bootstrap-4 sass

0 commentaires

3 Réponses :

0
votes

Je pense que vous avez une faute de frappe, $ primary au lieu de primary

$idi-primary-12: theme-color-level($primary, -12);

1 commentaires

En fait, le niveau de couleur du thème prend une clé de thème, "primaire", "succès". $ Primary contient une valeur de couleur. : \

0
votes

Le niveau de couleur du thème, étonnamment, n'utilise pas en interne la valeur $ primary remplacée. Au lieu de cela, il prend la valeur par défaut $ primary (bleu).

J'ai pu utiliser une autre fonction, qui fonctionne directement sur ma valeur $ primaire remplacée.

// custom.scss
$primary: green;

darken($primary, 10% )
lighten($primary, 10% )

Référence

0 commentaires

0
votes

La fonction de niveau de couleur du thème AFAIK dans Bootstrap prendra 2 paramètres, le nom de la couleur du thème en chaîne (par exemple, 'primaire', 'info') et le niveau en nombre comme indiqué ci-dessous:

@function custom-color-level($color: pink, $level: 0) {
  $color-base: if($level > 0, $black, $white);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

et si nous voulons utiliser cette fonction pour certaines couleurs autres que les couleurs du thème (par exemple 'primaire'), nous pouvons peut-être écrire une autre fonction pour cela, par exemple:

// Request a theme color level
@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, $black, $white);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

avec cette fonction personnalisée, nous pouvons passer le premier paramètre comme couleur (par exemple # 007bff, orange)

0 commentaires