Go to Qiita Advent Calendar 2024 Top
LoginSignup
7
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@epsilonGtmyon

bulmaのカスタマイズ 色の変更と追加

Last updated at Posted at 2021-04-29

bulma はJavaScript不要のcss(sass)オンリーのライブラリです。

今回はテーマカラーの変更とテーマカラーへの色追加を行ったのでその方法を記載します。

bulmaのバージョンは 0.9.2 です。 webpackを使ったプロジェクトでカスタマイズを行いました。

webpackの設定については省略します。

先に結論

こちらのWith webpackの内容に従い

こんな感じに記述すれば 色の変更とテーマカラーの追加が可能です

index.scss
@charset "utf-8";

//--------------------------------------
// utilities/_all.sassの中身を個別に設定したもの

// 〇primary カラーの設定
$primary: rgb(100, 200, 100);

@import "~bulma/sass/utilities/initial-variables.sass";
@import "~bulma/sass/utilities/functions.sass";

// 〇新しくsecondaryというテーマカラーを追加
$secondary: rgb(250, 200, 100);
$secondary-invert: findColorInvert($secondary) !default;
$secondary-light: findLightColor($secondary) !default;
$secondary-dark: findDarkColor($secondary) !default;

$custom-colors: (
    'secondary': ($secondary, $secondary-invert, $secondary-light, $secondary-dark)
);

@import "~bulma/sass/utilities/derived-variables.sass";
@import "~bulma/sass/utilities/mixins.sass";
@import "~bulma/sass/utilities/controls.sass";
@import "~bulma/sass/utilities/extends.sass";

//--------------------------------------
//
@import "~bulma/sass/base/_all.sass";
@import "~bulma/sass/elements/_all.sass";
@import "~bulma/sass/form/_all.sass";
@import "~bulma/sass/components/_all.sass";
@import "~bulma/sass/grid/_all.sass";
@import "~bulma/sass/helpers/_all.sass";
@import "~bulma/sass/layout/_all.sass";
  • primaryカラーの色変更
  • secondaryという名前のカラーを追加

の2点のカスタマイズを行いました。

<button class="button is-primary">primary</button>
<button class="button is-secondary">secondary</button>

このように記述すると

qiita01.png

このように表示されます。(わかりにくいですがprimaryの色がデフォルトから変わっていますね)

解説

カスタマイズをせずデフォルトのまま使う場合

index.scss
@charset "utf-8";

@import "~bulma/bulma";

このように記述します。

~bulma/bulma ですが このようになっています。

なので書き換えてみます。

index.scss
@charset "utf-8";

@import "~bulma/sass/utilities/_all.sass";
@import "~bulma/sass/base/_all.sass";
@import "~bulma/sass/elements/_all.sass";
@import "~bulma/sass/form/_all.sass";
@import "~bulma/sass/components/_all.sass";
@import "~bulma/sass/grid/_all.sass";
@import "~bulma/sass/helpers/_all.sass";
@import "~bulma/sass/layout/_all.sass";

(好みの都合上 sass 記法からscss 記法に書き換えています。)

~bulma/sass/utilities/_all には 変数や関数などを定義したファイルが取り込まれており、primaryのカラーや
テーマカラーの一覧もこのファイルに含まれています。

例えば primary の色はderived-variables.sass に含まれており

$primary: $turquoise !default

このように定義されています。

$turquoise はinitial-variables で定義されています。

いずれも !default 付きで変数が宣言されているので、これよりも前に変数に値がセットされていれば、その値を使うことができます。

色を変更してみる

先ほどの例から utilities/_all の部分をさらに書き換えてみます。

index.scss
@charset "utf-8";

//----------------
//utilities/_allの部分
@import "~bulma/sass/utilities/initial-variables.sass";
@import "~bulma/sass/utilities/functions.sass";
@import "~bulma/sass/utilities/derived-variables.sass";
@import "~bulma/sass/utilities/mixins.sass";
@import "~bulma/sass/utilities/controls.sass";
@import "~bulma/sass/utilities/extends.sass";

//----------------
@import "~bulma/sass/base/_all.sass";
@import "~bulma/sass/elements/_all.sass";
@import "~bulma/sass/form/_all.sass";
@import "~bulma/sass/components/_all.sass";
@import "~bulma/sass/grid/_all.sass";
@import "~bulma/sass/helpers/_all.sass";
@import "~bulma/sass/layout/_all.sass";

テーマの色は derived-variables.sass で定義されているので それよりも 前で変数を宣言します。

index.scss
@charset "utf-8";

//----------------
//utilities/_allの部分

//〇追加！
$primary: rgb(100, 200, 100);

@import "~bulma/sass/utilities/initial-variables.sass";
@import "~bulma/sass/utilities/functions.sass";
@import "~bulma/sass/utilities/derived-variables.sass";
@import "~bulma/sass/utilities/mixins.sass";
@import "~bulma/sass/utilities/controls.sass";
@import "~bulma/sass/utilities/extends.sass";

//----------------
@import "~bulma/sass/base/_all.sass";
@import "~bulma/sass/elements/_all.sass";
@import "~bulma/sass/form/_all.sass";
@import "~bulma/sass/components/_all.sass";
@import "~bulma/sass/grid/_all.sass";
@import "~bulma/sass/helpers/_all.sass";
@import "~bulma/sass/layout/_all.sass";

これで 最低限の変更は完了です。

primary の文字の色やis-light 適用時のスタイルの設定は自動的に値が計算されるようです。

こちら で自動的に $primary-invert, $primary-light, $primary-dark の値が $primary の値から計算されていることが確認できるかと思います。

これらで使われている関数は functions.sass で定義されています。

もしこれらの値では都合が悪い場合は、これらの変数も事前に定義すれば変更できます。

色を追加してみる

次に色の追加です。

derived-variables.sass のこの場所をみてみると ここでテーマの色の設定が行われているようです。

$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default

mergeColorMaps関数のソースを見た限りでは 第1引数に第2引数をマージしているようです。

つまり $custom-colors に値をセットすることで 色の追加ができそうです。

$custom-colors は少し手前で宣言されており null になっているので
ここにカスタマイズしたい値をセットすれば テーマカラーの追加ができそうです。(多分😅)

実際に追加してみる

index.scss
@charset "utf-8";

//----------------
//utilities/_allの部分

$primary: rgb(100, 200, 100);

@import "~bulma/sass/utilities/initial-variables.sass";
@import "~bulma/sass/utilities/functions.sass";

// 〇追加
$secondary: rgb(250, 200, 100);
$secondary-invert: findColorInvert($secondary) !default;
$secondary-light: findLightColor($secondary) !default;
$secondary-dark: findDarkColor($secondary) !default;

$custom-colors: (
    'secondary': ($secondary, $secondary-invert, $secondary-light, $secondary-dark)
);
@import "~bulma/sass/utilities/derived-variables.sass";
@import "~bulma/sass/utilities/mixins.sass";
@import "~bulma/sass/utilities/controls.sass";
@import "~bulma/sass/utilities/extends.sass";

//----------------
@import "~bulma/sass/base/_all.sass";
@import "~bulma/sass/elements/_all.sass";
@import "~bulma/sass/form/_all.sass";
@import "~bulma/sass/components/_all.sass";
@import "~bulma/sass/grid/_all.sass";
@import "~bulma/sass/helpers/_all.sass";
@import "~bulma/sass/layout/_all.sass";

関数を使いたいので functions.sass の後に記述しました。

このように記述することで $colors に secondary の色が追加されるので その他の部品でも利用できるようになります。

今回は説明のために一つのファイルに記述しましたが、アプリの規模によってはカスタマイズ用のファイル分割が必要になるかと思います。

おまけ：自作の部品にテーマカラーを適用する

自作の部品に button などのようなテーマカラーを適用したい場合もあると思います。
これも $colors を使うことで可能です

参考までにまずは button のソースを見てみます。

ここ で$button-colors に $colors がセットされており

こちら で色テーマの適用が行われていることが確認できます。 これを参考にしてみます。

hoge.scss
$hoge-colors: $colors !default;

.hoge {
  //hoge用のスタイルをここでいろいろ書いていく...

  //カラーテーマの適用
  @each $name, $pair in $hoge-colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);
    &.is-#{$name} {
      background-color: $color;
      color: $color-invert;
    }
  }
}

このように $hoge-colors に $colors の内容を設定し each でそれぞれのテーマ毎の設定をすることで 自作の部品にもテーマを適用することができます

<div class="hoge is-primary">hoge</div>
<div class="hoge is-secondary">hoge</div>

このように記述すると

qiita02.png

こんな感じになります。

おわりに

今回は色の変更と、色の追加についてのメモを書いてみました。

色の追加は やりすぎると 管理できなくなるのでほどほどしておいたほうが良いと思いましたとさ。

7
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
7
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?