Personnalisez les couleurs et les thèmes pour Bulma

Question

J'essaie actuellement de créer un système de conception multi-thème basé sur bulma. Mais je travaille actuellement sur l'ajout d'un système multi-thème.

J'ai ajouté ceci à mon fichier scss customstyle mais cela ne semble pas fonctionner

@charset "utf-8";


:root {
    --primary: red;
    --secondary: #068295;
}

body[class="light"] {
    --primary: #F7A800;
    --secondary: #068295;
}

body[class="dark"] {
    --primary: blue;
    --secondary: #068295;
}

$primary: var(--primary); // this works 
$background: blue;
$text-strong: red;

$secondary: #8BC91D; // this works but without theming
// $secondary: var(--secondary); // this doesn't work 
$secondary-invert: findColorInvert($secondary) !default;

$custom-colors: (
    "secondary":($secondary, $secondary-invert),
);

@import "../node_modules/bulma/sass/utilities/_all.sass";
@import "../node_modules/bulma/sass/base/_all.sass";
@import "../node_modules/bulma/sass/elements/button.sass";

Quand j'exécute la commande node sass pour générer un fichier CSS Je peux voir l'attribut is-secondary généré lorsque je n'utilise pas la variable, mais lorsque j'utilise la variable pour définir ma variable $secondary, l'attribut is-secondary n'est pas généré

Answer 1

La version majeure actuelle de Bulma ne prend pas en charge les variables CSS.

Je l'ai fait fonctionner en utilisant la branche css-variables. npm 我 https://github.com/jgthms/bulma/tree/bulma-v1-css-variables;

Première importation :

@import 'bulma/sass/utilities/_all';
@import 'bulma/sass/base/_all';
@import 'bulma/sass/elements/_all';
@import 'bulma/sass/form/_all';
@import 'bulma/sass/components/_all';
@import 'bulma/sass/grid/_all';
@import 'bulma/sass/helpers/_all';
@import 'bulma/sass/layout/_all';
@import 'bulma/sass/themes/default.scss';

themes/default.scss crée toutes les variables CSS basées sur des variables sass.

Vous pouvez ensuite utiliser des variables CSS pour modifier les valeurs par défaut afin d'avoir un mode sombre, des sélecteurs de thème et d'autres choses.

:root {
  --bulma-danger-h: 190;
}