bulma でカスタムカラーを追加する

bulma.io

scss を css にコンパイルできる前提。idolColors.scss を idolColors.css にコンパイルして index.html で読み込む。

/* idolColors.scss */

/* findColorInvert, findLightColor, findDarkColor 関数を使えるように先にインポートしておく。 */
@import "bulma/sass/utilities/functions.sass";
$haruka: #e22b30;
$chihaya: #2743d2;
$miki: #b4e04b;
$custom-colors: (
  "haruka": ( /* クラス名 is-haruka で使えるようになる。以下同様。 */
    $haruka,
    findColorInvert($haruka),
    findLightColor($haruka),
    findDarkColor($haruka)
  ),
  "chihaya": (
    $chihaya,
    findColorInvert($chihaya),
    findLightColor($chihaya),
    findDarkColor($chihaya)
  ),
  "miki": (
    $miki,
    findColorInvert($miki),
    findLightColor($miki),
    findDarkColor($miki)
  )
);
@import "bulma";

<!-- index.html -->

<link rel="stylesheet" href="idolColors.css">
<button class="button is-haruka">is-haruka</button>
<button class="button is-chihaya">is-chihaya</button>
<button class="button is-miki">is-miki</button>