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

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

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

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

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

## 先に結論

こちらの[With webpack](https://bulma.io/documentation/customize/with-webpack/#9-add-your-own-bulma-styles)の内容に従い

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

```scss: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点のカスタマイズを行いました。

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

このように記述すると

![qiita01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628749/92550cb4-7958-7c5f-3b04-107e48909893.png)

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

## 解説

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

```scss:index.scss
@charset "utf-8";

@import "~bulma/bulma";
```

このように記述します。

`~bulma/bulma` ですが [このように](https://github.com/jgthms/bulma/blob/0.9.2/bulma.sass)なっています。

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

```scss: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](https://github.com/jgthms/bulma/blob/0.9.2/sass/utilities/derived-variables.sass#L4) に含まれており

```sass
$primary: $turquoise !default
```

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

`$turquoise` は[initial-variables](https://github.com/jgthms/bulma/blob/0.9.2/sass/utilities/initial-variables.sass#L21) で定義されています。

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

## 色を変更してみる
先ほどの例から `utilities/_all` の部分をさらに書き換えてみます。

```scss: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` で定義されているので それよりも 前で変数を宣言します。


```scss: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` 適用時のスタイルの設定は自動的に値が計算されるようです。

[こちら](https://github.com/jgthms/bulma/blob/0.9.2/sass/utilities/derived-variables.sass#L25) で自動的に `$primary-invert`, `$primary-light`, `$primary-dark` の値が `$primary` の値から計算されていることが確認できるかと思います。

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

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

## 色を追加してみる
次に色の追加です。

[derived-variables.sass](https://github.com/jgthms/bulma/blob/0.9.2/sass/utilities/derived-variables.sass#L106) のこの場所をみてみると ここでテーマの色の設定が行われているようです。

```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](https://github.com/jgthms/bulma/blob/0.9.2/sass/utilities/functions.sass#L1)関数のソースを見た限りでは 第1引数に第2引数をマージしているようです。

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

$custom-colors は[少し手前](https://github.com/jgthms/bulma/blob/0.9.2/sass/utilities/derived-variables.sass#L103)で宣言されており `null` になっているので
ここにカスタマイズしたい値をセットすれば テーマカラーの追加ができそうです。(多分😅)

### 実際に追加してみる

```scss: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` のソースを見てみます。

[ここ](https://github.com/jgthms/bulma/blob/0.9.2/sass/elements/button.sass#L46) で`$button-colors` に `$colors` がセットされており

[こちら](https://github.com/jgthms/bulma/blob/0.9.2/sass/elements/button.sass#L140) で色テーマの適用が行われていることが確認できます。 これを参考にしてみます。

```scss: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` でそれぞれのテーマ毎の設定をすることで 自作の部品にもテーマを適用することができます

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

このように記述すると

![qiita02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628749/ab9bf432-3f5a-c2fd-d5f9-c4c47705332a.png)


こんな感じになります。

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

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