Bootstrap color customize(부트스트랩 색상 변경)
1. 단독 색상 변경
2. 전체 색상 변경
3. 사용자 색상 추가

단독 색상 변경

Bootstrap sass에 default map이 존재하는데,
사용자 변수를 생성하여 덮어씀.

🔍 사용자 변수가 @import ... bootstrap보다 위에 위치해야 함.
반대의 경우, 변수의 값이 업데이트 되지 않은 상태이기 때문에 새 값이 적용되지 않기 때문.

• main.scss 코드 추가

$primary: chocolate;
$danger: tomato;
@import "../node_modules/bootstrap//scss/bootstrap";

전체 색상 변경

default 색상을 전체 변경할 경우 아래와 같이 적용이 가능함.

$theme-colors: (
  "primary":    red,
  "secondary":  red,
  "success":    red,
  "info":       red,
  "warning":    red,
  "danger":     red,
  "light":      red,
  "dark":       red
);

@import "../node_modules/bootstrap//scss/bootstrap";

기존의 색상을 하나라도 남기고 싶을 경우,
default 값을 가져오기 위해 import 한 후에 색상 수정

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: (
  "primary":    red,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);
@import "../node_modules/bootstrap//scss/bootstrap";

사용자 색상 추가

custom-colors를 생성하고 Bootstrap default color map 변수에 Merge

// 사용자 변수를 생성(map type)
$custom-colors: (
  "custom-color": #900
);
// merge
$theme-colors: map-merge($theme-colors, $custom-colors);

• 참고 customize color
  https://getbootstrap.com/docs/5.0/customize/color/
• 참고 customize sass maps-and-loops
  https://getbootstrap.com/docs/5.0/customize/sass/#maps-and-loops

• 2021.04.23 - 최초 작성

댓글 환영 질문 환영
by.protect-me