Bootstrap - 테마 색상 커스터마이징

01.Bootstrap 커스터마이징

• 지난 시간에 Bootstrap을 npm을 통해 설치를 완료했습니다.
• 이러한 환경설정을 통해 Bootstrap에서 필요한 기능만을 가져와서 사용할 수 있습니다.
• 또한 Boostrap에서 제공하는 기본 테마를 취향에 따라 커스터마이징할 수 있습니다.

1-1.Customize - color

• Bootstrap의 button 등의 색을 커스터마이징하려면 Theme-colors에 나와있는 SCSS의 map의 문법으로 지정되어 있는 형식을 변경해야 합니다.
• 이를 위해서는 SCSS 내에 @import를 통해 Bootstrap 폴더 내에 있는 여러 파일을 가져와야 합니다.

• Theme-colors

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

1-2.Variable defaults

• 프로젝트 폴더 내에 있는 SCSS 파일로 이동하여 Variable defaults에서 반드시 필요한 Required부분을@import를 이용하여 필요한 파일들을 모두 가져옵니다.

// Required => 이 부분에 해당하는 코드 세 줄만 SCSS로 가져온다.
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

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

1-3.색상 변경

• 아래에 확인할 수 있는 것처럼 색상 변경을 원하는 개체가 html 내에서 btn-secondary로 명시되어 있습니다.
• 그러므로 SCSS theme-colors에 있는 "secondary"의 값을 변경해주도록 합니다.

• HTML

<div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>

• SCSS

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

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

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

1-4.화면 구현

• Bootstrap에서 지정해놓은 회색 색상이 아닌 변경된 yellowgreen으로 잘 변경된 것을 확인할 수 있습니다.

• "secondary": $secondary
  

• "secondary": $yellowgreen