Change Bootstrap colors in Laravel

By | 2019年8月21日

I will explain how to change Bootstrap color in Laravel.
However, it is assumed that the environment can compile sass like Laravel Mix.
If you can’t compile sass, you can only fix it with css.

For the Laravel Mix, see the next page.
https://readouble.com/laravel/5.8/ja/mix.html

Once Laravel Mix is ​​working, open the file you can set the color.
The file to open is resouces / sass / _variables.scss.
The default contents are as follows.

// 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;

Set the background color to white (#ffffff), the color applied to bg-success, alert-success, etc. to black (# 000000), and the color applied to bg-danger, alert-danger, etc. to blue (# 0000ff) If so, correct it as follows.
Lines 2 and 21 and after are the changes.

// 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,
);

If you change it, the compiler will work and it should be reflected in css.