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;

이것은 조금 흰색으로는 보기 어렵다. . .