Bootstrap4のカラーバリエーションを増やしたい

Twitter Bootstrap 4 には、デフォルトで以下のカラーバリエーションがあります。でも、もっとバリエーション欲しくないですか？

SASS(SCSS) を使えば簡単に増やすことができます。

Laravel Mix上での方法になります。

/resources/sass/_variables.scss に $theme-colors を設定します。

追加する色は、Bootstrapの_variables.scssに デフォルトで設定されているものです。ただし、 デフォルトの$theme-colorsの中には入っていないのでカラーバリエーションとしては使えません。

それを使えるようにしてみましょう。

_variables.scss

$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #e83e8c;
$orange:  #fd7e14;
$teal:    #20c997;

$theme-colors: (
    "indigo":     $indigo,
    "purple":     $purple,
    "pink":       $pink,
    "orange":     $orange,
    "teal":       $teal
);

これで、コンパイルを実行して CSSファイルを作成します。

$ npm run dev

正常にコンパイルが終了したら、設定した色が使えるようになっています。

色を増やすことができましたが、「orange」だけ文字の色が黒になってます。これも気になります。白にしたいです。

/resources/sass/_variables.scss に $yiq-contrasted-threshold を設定します。

これは、Bootstrap内で背景色から前面のテキストカラーを黒系にするか白系にするかを決める境界値です。数値を大きくすると白系が選ばれるようになります。デフォルトは150で、0-255までの値をセットできます。

_variables.scss

$yiq-contrasted-threshold: 160;

160をセットしてコンパイル。

文字が白になりました！

「warning」も文字を白にしたい場合は、200をセットするとOKです。

_variables.scss

$yiq-contrasted-threshold: 200;

これはちょっと白では見にくいかな。。。