Ccmmutty logo
Commutty IT
0 pv2 min read

Bulma1.0にアップデートしたら is-danger の色が変わったので CSS変数で戻した話

https://cdn.magicode.io/media/notebox/blob_E74F2Pb

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の幅が変わっているのは読み込むフォントの違いのようなので、今後調査して改善していきたいです。

Discussion

コメントにはログインが必要です。