색상

색상

Bootstrap’s color palette has continued to expand and become more nuanced in v5.3.0. We’ve added new variables for secondary and tertiary text and background colors, plus {color}-bg-subtle, {color}-border-subtle, and {color}-text-emphasis for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on :root and are adapted for our new dark color mode while our original theme colors remain unchanged.

Colors ending in -rgb provide the red, green, blue values for use in rgb() and rgba() color modes. For example, rgba(var(--bs-secondary-bg-rgb), .5).

Using the new colors

These new colors are accessible via CSS variables and utility classes—like --bs-primary-bg-subtle and .bg-primary-subtle—allowing you to compose your own CSS rules with the variables, or to quickly apply styles via classes. The utilities are built with the color’s associated CSS variables, and since we customize those CSS variables for dark mode, they are also adaptive to color mode by default.

<div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">
  Example element with utilities
</div>

테마 색상

모든 색상의 자식 집합을 사용하여 색 구성표를 만들기 위한 더 작은 색상 팔레트를 만들며, Sass 변수와 Bootstrap의 scss/_variables.scss 파일의 Sass 맵으로도 사용할 수 있습니다.

이 색상들은 모두 Sass 맵인 $theme-colors로 이용할 수 있습니다.

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

이 색상을 변경하는 방법은 Sass 맵과 반복 문서를 확인해 주세요.

모든 색상

모든 Bootstrap 색상은 scss/_variables.scss 파일의 Sass 변수와 Sass 맵으로 이용할 수 있습니다. 파일 크기 증가를 막기 위해서 이런 변수마다 텍스트나 배경색 클래스를 만들지 않습니다. 그 대신에, 이런 색의 자식 집합을 테마 팔레트로 선택하고 있습니다.

색을 재정의할 때는 색상 대비에 주의해 주세요. 아래 표시된 것처럼 메인 색상에 현재 색상에 대해, 흰색에 대해, 검은색에 대해서 각각 세 가지 대비 비율을 추가했습니다.

Sass 참고 사항

Sass는 프로그램적으로 변수를 만들 수 없어서 모든 색상을 위한 변수를 수동으로 만듭니다. 중간 값을 지정하고 (예를 들어, $blue-500), Sass의 mix() 색상 함수로 색조(밝게) 혹은 음영(어둡게)의 사용자 정의 색상 함수를 사용하고 있습니다.

mix()의 사용은 lighten()과 darken() 조금 다릅니다. 전자는 지정한 색상을 흰색과 검은색으로 섞지만, 후자는 각 색의 밝기 값을 조정하기만 하면 됩니다. 그 결과, CodePen 데모에서 보이는 것처럼 더 완전한 색을 얻을 수 있습니다.

tint-color()와 shade-color() 함수에서는 mix()를 $theme-color-interval 변수와 함께 사용합니다. 전체 소스 코드는 scss/_functions.scss와 scss/_variables.scss 파일을 참조해 주세요.

색상 Sass 맵

Bootstrap의 소스 Sass 파일에는 색상과 그 16진수 값의 목록을 빠르고 쉽게 반복하기 위한 세가지 맵이 포함되어 있습니다.

• $colors는 이용 가능한 기본(500) 색상을 나열합니다.
• $theme-colors는 의미 있는 이름을 가진 테마 색상을 나열합니다.(아래 그림 참조)
• $grays는 모든 회색의 색조와 음영을 나열합니다.

scss/_variables.scss 안에는, Bootstrap의 색상 변수와 Sass 맵이 있습니다. 다음은 $colors Sass 맵의 예시입니다:

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "black":      $black,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

맵에서 값을 추가, 삭제, 수정하여 다른 많은 컴포넌트에서의 값을 사용하는 방법을 업데이트합니다. 안타깝게도 현시점에서는 모든 컴포넌트가 이 Sass 맵을 이용하고 있는 것은 아닙니다. 추후 업데이트 시, 이 점을 개선하도록 노력하겠습니다. 그때까지는 Sass 맵과 ${color} 변수를 이용해 주세요.

예시

당신의 Sass에서 이를 사용하는 방법입니다:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

Color and background utility classes are also available for setting color and background-color using the 500 color values.

유틸리티 생성하기

Bootstrap에는 모든 색상 변수에 대한 color 및 background-color 유틸리티가 포함되어 있지 않지만 유틸리티 API 및 확장된 v5.1.0에 Sass 맵이 추가되어 있습니다.

1. 시작하려면 함수, 변수, 믹스인, 유틸리티를 가져왔는지 확인하세요.
2. map-merge-multiple() 함수를 사용하여 여러 Sass 맵을 새 맵에서 빠르게 병합하세요.
3. 이 새로운 결합 맵을 병합하여 {color}-{level} 클래스 이름을 가진 유틸리티를 확장하세요.

다음은 위의 단계를 사용하여 텍스트 색상 유틸리티 (예: .text-purple-500)를 생성하는 예입니다.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

이렇게 하면 모든 색상과 레벨에 대해 새로운 .text-{color}-{level} 유틸리티가 생성됩니다. 다른 유틸리티 및 속성에 대해서도 동일한 작업을 수행할 수 있습니다.