Passen Sie Farben und Themen für Bulma an

Question

Ich versuche derzeit, ein Multi-Themen-Designsystem auf Basis von Bulma zu erstellen. Aber ich arbeite derzeit daran, ein Multi-Themen-System hinzuzufügen.

Ich habe dies zu meiner Customstyle-SCSS-Datei hinzugefügt, aber es scheint nicht zu funktionieren

@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";

Wenn ich den Node-Sass-Befehl ausführe, um eine CSS-Datei zu generieren Ich kann das generierte is-secondary-Attribut sehen, wenn ich die Variable nicht verwende, aber wenn ich die Variable zum Definieren meiner $secondary-Variable verwende, wird das is-secondary-Attribut nicht generiert

Answer 1

Bulma 当前的主版本不支持 css 变量。

我通过使用 css-variables 分支使其工作。 npm 我 https://github.com/jgthms/bulma/tree/bulma-v1-css-variables;

首先进行导入：

@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 使所有 css 变量基于 sass 变量。

之后你可以使用 CSS 变量来修改默认值，这样你就可以拥有黑暗模式、主题切换器和其他东西。

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