Bootstrap 커스터마이징

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

그렇다면 본격적으로 Bootstrap의 기본 테마를 커스터마이징하는 방법에 대해 살펴봅시다.

출처: Bootstrap Custimoize
출처: Bootstrap Custimoize-Sass

1.1 Customize - color

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

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

1.2 main.scss

프로젝트 폴더 내에 있는 SCSS 파일로 이동하여 @import로 필요한 파일들을 가져옵니다. 이후 본인이 원하는 색상으로 덮어써주면 완성됩니다.

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

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

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

1.3 theme-colors

@import로 명시해준 후, variables로 지정되어 있는 theme-colors를 아래에 코딩해줍니다.

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

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

1.4 색상 변경

아래에 확인할 수 있는 것처럼 색상 변경을 원하는 개체가 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>

SCSS

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

1.5 화면 구현

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