・0 pv・2 min read
Bulma1.0にアップデートしたら is-danger の色が変わったので CSS変数で戻した話
Bulmaのバージョンを0.7.5から1.0.4にアップデート
flexboxを縦に並べようとしたところ、0.7.5では
is-flex-direction-columnが使用できませんでした。
そのため、バージョンを最新の1.0.4(2025/11現在)にアップデートしました。レイアウト問題は解決した、が…
is-flex-direction-columnを使用可能となり、flexboxを縦に配置することが出来ましたが、他の部分で問題が発生。
Bulmaで定義されている色のdangerが変わってしまっていました。バージョン0.7.5のdanger
バージョン1.0.4のdanger
背景色どころか文字色まで変わっていますね。
こちらを前回のバージョンと同様にカスタマイズすることにしました。
CSS変数でdangerをカスタマイズ
headタグに以下を追加します。
<style>
:root {
--bulma-danger-h: 348deg;
--bulma-danger-s: 100%;
--bulma-danger-l: 61%;
--bulma-danger: hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l));
}
</style>文字色は対象のタグに
has-text-whiteを追加すれば白に戻ります。<div class="notification is-danger has-text-white">
dangerカラー比較
</div>修正結果
色が戻りましたね。
文字やnotificationの幅が変わっているのは読み込むフォントの違いのようなので、今後調査して改善していきたいです。