Bootstrapの色を変える

LaravelでBootstrapの色を変更する方法を説明します。ただし、Laravel Mixのようなsassをコンパイルできる環境であることが前提です。sassをコンパイルできないと、cssで地道に直していくしかありません。

Laravel Mixについては、次のページを参照してください。
https://readouble.com/laravel/5.8/ja/mix.html

Laravel Mixが動作する状態になりましたら、次に色などの設定ができるファイルを開きます。
開くファイルは resouces/sass/_variables.scss です。
デフォルトでは下記のような内容になっています。

// Body
$body-bg: #f8fafc;

// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;

背景色を白(#ffffff)、bg-successやalert-successなどに適用される色を黒(#000000)、bg-dangerやalert-dangerなどに適用される色を青(#0000ff)にする場合は、次のように修正します。2行目と21行目以降が変更箇所です。

// Body
$body-bg: #ffffff;

// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;

$theme-colors: (
    "success": #000000,
    "danger": #0000ff,
);

変更するとコンパイラが動作し、cssに反映されるはずです。

Tweet