Color modes
Color modes (색상 모드)
Bootstrap은 v5.3.0부터 색상 모드, 즉 테마를 지원합니다. 기본 light 색상 모드와 새 dark 모드를 살펴보거나, 우리 스타일을 템플릿으로 사용해 자신만의 모드를 만들 수 있습니다.
출처: 문서
본문
직접 해보세요! Stylelint와 함께 Bootstrap을 사용하는 소스 코드와 작업 데모, 그리고 twbs/examples 저장소의 색상 모드를 다운로드하세요. StackBlitz에서 예시를 열 수도 있습니다.
다크 모드 (Dark mode)
Bootstrap은 이제 다크 모드부터 시작해 색상 모드를 지원합니다! v5.3.0에서는 자신만의 색상 모드 토글러를 구현하고(Bootstrap 문서의 아래 예시 참고) 원하는 대로 다른 색상 모드를 적용할 수 있습니다. 우리는 light 모드(기본)와 이제 dark 모드를 지원합니다. 색상 모드는 data-bs-theme 속성 덕분에 <html> 요소에 전역으로, 또는 특정 컴포넌트와 요소에 토글할 수 있습니다.
또는 색상 모드 mixin 덕분에 미디어 쿼리 구현으로 전환할 수도 있습니다 — 자세한 내용은 사용법 섹션을 참고하세요. 단, 이렇게 하면 아래에 보이는 것처럼 컴포넌트별로 테마를 바꾸는 기능이 사라집니다.
예시 (Example)
예를 들어 드롭다운 메뉴의 색상 모드를 바꾸려면 부모 .dropdown에 data-bs-theme="light" 또는 data-bs-theme="dark"를 추가하세요. 그러면 전역 색상 모드와 무관하게 이 드롭다운들이 지정된 테마 값으로 표시됩니다.
<div class="dropdown" data-bs-theme="light">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
<li><a class="dropdown-item active" href="#">Action</a></li>
<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>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div class="dropdown" data-bs-theme="dark">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
Dark dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
<li><a class="dropdown-item active" href="#">Action</a></li>
<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>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
동작 원리 (How it works)
- 위에 보인 것처럼, 색상 모드 스타일은
data-bs-theme속성으로 제어됩니다. 이 속성은<html>요소 또는 어떤 다른 요소나 Bootstrap 컴포넌트에 적용할 수 있습니다.<html>요소에 적용하면 모든 것에 적용됩니다. 컴포넌트나 요소에 적용하면 해당 특정 컴포넌트나 요소로 범위가 지정됩니다. - 지원하려는 각 색상 모드에 대해 공유 전역 CSS 변수의 새 오버라이드(overrides)를 추가해야 합니다. 우리는 light 모드를 기본값으로 하여 dark 모드용
_root.scss스타일시트에서 이미 이렇게 하고 있습니다. 색상 모드별 스타일을 작성할 때는 mixin을 사용하세요:
// Color mode variables in _root.scss
@include color-mode(dark) {
// CSS variable overrides here...
}
- dark 모드용 공유 전역 CSS 변수 오버라이드를 지원하는 데 커스텀
_variables-dark.scss를 사용합니다. 이 파일은 자신만의 커스텀 색상 모드에는 필요하지 않지만, 두 가지 이유로 dark 모드에는 필요합니다. 첫째, 전역 색상을 재설정할 단일 장소를 갖는 것이 더 낫습니다. 둘째, 아코디언, 폼 컴포넌트 등에 사용되는 CSS에 임베디드된 배경 이미지를 위해 일부 Sass 변수를 덮어써야 했습니다.
사용법 (Usage)
다크 모드 활성화 (Enable dark mode)
<html> 요소에 data-bs-theme="dark" 속성을 추가해 프로젝트 전체에서 내장 다크 색상 모드를 활성화하세요. 이것은 특정 data-bs-theme 속성이 적용된 것들을 제외한 모든 컴포넌트와 요소에 다크 색상 모드를 적용합니다. quick start 템플릿을 기반으로 하면:
<!doctype html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
</html>
Bootstrap은 아직 색상 모드 선택기를 내장으로 제공하지 않지만, 원한다면 우리 문서의 것을 사용할 수 있습니다. JavaScript 섹션에서 자세히 알아보세요.
Sass로 빌드하기 (Building with Sass)
새 다크 모드 옵션은 모든 Bootstrap 사용자가 사용할 수 있지만, 미디어 쿼리가 아닌 data 속성으로 제어되며 프로젝트의 색상 모드를 자동으로 토글하지는 않습니다. $enable-dark-mode를 false로 변경해 다크 모드를 완전히 비활성화할 수 있습니다.
커스텀 Sass mixin인 color-mode()를 사용해 색상 모드가 적용되는 방식을 제어할 수 있습니다. 기본적으로 data 속성 접근 방식을 사용하여 방문자가 자동 다크 모드를 선택하거나 자신의 선호를 제어할 수 있는(우리 문서처럼) 더 사용자 친화적 경험을 만들 수 있게 해 줍니다. 이것은 light와 dark를 넘어 다른 테마와 더 많은 커스텀 색상 모드를 추가하는 쉽고 확장 가능한 방법이기도 합니다.
미디어 쿼리를 사용하고 색상 모드를 자동으로만 만들고 싶다면 Sass 변수로 mixin의 기본 타입을 변경할 수 있습니다. 다음 스니펫과 그 컴파일된 CSS 출력을 고려하세요.
$color-mode-type: data;
@include color-mode(dark) {
.element {
color: var(--bs-primary-text-emphasis);
background-color: var(--bs-primary-bg-subtle);
}
}
다음으로 출력됩니다:
[data-bs-theme=dark] .element {
color: var(--bs-primary-text-emphasis);
background-color: var(--bs-primary-bg-subtle);
}
그리고 media-query로 설정하면:
$color-mode-type: media-query;
@include color-mode(dark) {
.element {
color: var(--bs-primary-text-emphasis);
background-color: var(--bs-primary-bg-subtle);
}
}
다음으로 출력됩니다:
@media (prefers-color-scheme: dark) {
.element {
color: var(--bs-primary-text-emphasis);
background-color: var(--bs-primary-bg-subtle);
}
}
커스텀 색상 모드 (Custom color modes)
색상 모드의 주요 사용 사례는 light와 dark 모드이지만, 커스텀 색상 모드도 가능합니다. 자신의 색상 모드 이름을 값으로 하는 커스텀 data-bs-theme 선택자를 만든 다음, 필요에 따라 Sass와 CSS 변수를 수정하세요. 우리는 Bootstrap의 dark 모드별 Sass 변수를 담을 별도의 _variables-dark.scss 스타일시트를 만들기로 선택했지만, 여러분에게 그것은 필수는 아닙니다.
예를 들어 data-bs-theme="blue" 선택자로 "blue theme"을 만들 수 있습니다. 커스텀 Sass 또는 CSS 파일에서 새 선택자를 추가하고 필요에 따라 전역 또는 컴포넌트 CSS 변수를 덮어쓰세요. Sass를 사용한다면 CSS 변수 오버라이드 안에서 Sass 함수도 사용할 수 있습니다.
[data-bs-theme="blue"] {
--bs-body-color: var(--bs-white);
--bs-body-color-rgb: #{to-rgb($white)};
--bs-body-bg: var(--bs-blue);
--bs-body-bg-rgb: #{to-rgb($blue)};
--bs-tertiary-bg: #{$blue-600};
.dropdown-menu {
--bs-dropdown-bg: #{mix($blue-500, $blue-600)};
--bs-dropdown-link-active-bg: #{$blue-700};
}
.btn-secondary {
--bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
--bs-btn-border-color: #{rgba($white, .25)};
--bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
--bs-btn-hover-border-color: #{rgba($white, .25)};
--bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
--bs-btn-active-border-color: #{rgba($white, .5)};
--bs-btn-focus-border-color: #{rgba($white, .5)};
--bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
}
}
<div data-bs-theme="blue">
...
</div>
JavaScript
방문자나 사용자가 색상 모드를 토글할 수 있게 하려면 루트 요소 <html>의 data-bs-theme 속성을 제어하는 토글 요소를 만들어야 합니다. 문서에서 처음에는 사용자의 현재 시스템 색상 모드를 따르되, 그것을 덮어쓰고 특정 색상 모드를 선택할 수 있는 옵션을 제공하는 토글러를 만들었습니다.
여기 그 기능을 담당하는 JavaScript가 있습니다. 우리 컴포넌트의 HTML과 CSS를 사용해 구현된 방식을 보려면 우리 문서 navbar를 자유롭게 살펴보세요. 사이트 재로딩 중 잠재적인 화면 깜빡임을 줄이기 위해 페이지 상단에 JavaScript를 포함할 것을 권장합니다. 색상 모드에 미디어 쿼리를 사용하기로 했다면, 암시적 제어를 선호하는 경우 JavaScript를 수정하거나 제거해야 할 수도 있습니다.
/*!
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2011-2025 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
*/
(() => {
'use strict'
const getStoredTheme = () => localStorage.getItem('theme')
const setStoredTheme = theme => localStorage.setItem('theme', theme)
const getPreferredTheme = () => {
const storedTheme = getStoredTheme()
if (storedTheme) {
return storedTheme
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}
const setTheme = theme => {
if (theme === 'auto') {
document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
} else {
document.documentElement.setAttribute('data-bs-theme', theme)
}
}
setTheme(getPreferredTheme())
const showActiveTheme = (theme, focus = false) => {
const themeSwitcher = document.querySelector('#bd-theme')
if (!themeSwitcher) {
return
}
const themeSwitcherText = document.querySelector('#bd-theme-text')
const activeThemeIcon = document.querySelector('.theme-icon-active use')
const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
element.classList.remove('active')
element.setAttribute('aria-pressed', 'false')
})
btnToActive.classList.add('active')
btnToActive.setAttribute('aria-pressed', 'true')
activeThemeIcon.setAttribute('href', svgOfActiveBtn)
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
if (focus) {
themeSwitcher.focus()
}
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
const storedTheme = getStoredTheme()
if (storedTheme !== 'light' && storedTheme !== 'dark') {
setTheme(getPreferredTheme())
}
})
window.addEventListener('DOMContentLoaded', () => {
showActiveTheme(getPreferredTheme())
document.querySelectorAll('[data-bs-theme-value]')
.forEach(toggle => {
toggle.addEventListener('click', () => {
const theme = toggle.getAttribute('data-bs-theme-value')
setStoredTheme(theme)
setTheme(theme)
showActiveTheme(theme, true)
})
})
})
})()
테마 색상 추가하기 (Adding theme colors)
$theme-colors에 새 색상을 추가하는 것만으로는 alerts와 list groups 같은 일부 컴포넌트에 충분하지 않습니다. 새 색상은 라이트 테마용 $theme-colors-text, $theme-colors-bg-subtle, $theme-colors-border-subtle에도 정의되어야 하며, 다크 테마용 $theme-colors-text-dark, $theme-colors-bg-subtle-dark, $theme-colors-border-subtle-dark에도 정의되어야 합니다.
이것은 수동 프로세스입니다. Sass는 기존 변수나 맵에서 자신의 Sass 변수를 생성할 수 없기 때문입니다. Bootstrap의 향후 버전에서 이 중복을 줄이도록 이 설정을 다시 검토할 것입니다.
// Required
@import "functions";
@import "variables";
@import "variables-dark";
// Add a custom color to $theme-colors
$custom-colors: (
"custom-color": #712cf9
);
$theme-colors: map-merge($theme-colors, $custom-colors);
@import "maps";
@import "mixins";
@import "utilities";
// Add a custom color to new theme maps
// Light mode
$custom-colors-text: ("custom-color": #712cf9);
$custom-colors-bg-subtle: ("custom-color": #e1d2fe);
$custom-colors-border-subtle: ("custom-color": #bfa1fc);
$theme-colors-text: map-merge($theme-colors-text, $custom-colors-text);
$theme-colors-bg-subtle: map-merge($theme-colors-bg-subtle, $custom-colors-bg-subtle);
$theme-colors-border-subtle: map-merge($theme-colors-border-subtle, $custom-colors-border-subtle);
// Dark mode
$custom-colors-text-dark: ("custom-color": #e1d2f2);
$custom-colors-bg-subtle-dark: ("custom-color": #8951fa);
$custom-colors-border-subtle-dark: ("custom-color": #e1d2f2);
$theme-colors-text-dark: map-merge($theme-colors-text-dark, $custom-colors-text-dark);
$theme-colors-bg-subtle-dark: map-merge($theme-colors-bg-subtle-dark, $custom-colors-bg-subtle-dark);
$theme-colors-border-subtle-dark: map-merge($theme-colors-border-subtle-dark, $custom-colors-border-subtle-dark);
// Remainder of Bootstrap imports
@import "root";
@import "reboot";
// etc
CSS
변수 (Variables)
수십 개의 루트 레벨 CSS 변수가 dark 모드용 오버라이드로 반복됩니다. 이것들은 기본적으로 data-bs-theme인 색상 모드 선택자로 범위가 지정되며, prefers-color-scheme 미디어 쿼리를 사용하도록 구성할 수도 있습니다. 이 변수들을 자신만의 새 색상 모드를 생성하기 위한 지침으로 사용하세요.
--#{$prefix}body-color: #{$body-color-dark};
--#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
--#{$prefix}body-bg: #{$body-bg-dark};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
--#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
--#{$prefix}secondary-color: #{$body-secondary-color-dark};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
--#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
--#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
@each $color, $value in $theme-colors-text-dark {
--#{$prefix}#{$color}-text-emphasis: #{$value};
}
@each $color, $value in $theme-colors-bg-subtle-dark {
--#{$prefix}#{$color}-bg-subtle: #{$value};
}
@each $color, $value in $theme-colors-border-subtle-dark {
--#{$prefix}#{$color}-border-subtle: #{$value};
}
--#{$prefix}heading-color: #{$headings-color-dark};
--#{$prefix}link-color: #{$link-color-dark};
--#{$prefix}link-hover-color: #{$link-hover-color-dark};
--#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
--#{$prefix}code-color: #{$code-color-dark};
--#{$prefix}highlight-color: #{$mark-color-dark};
--#{$prefix}highlight-bg: #{$mark-bg-dark};
--#{$prefix}border-color: #{$border-color-dark};
--#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
--#{$prefix}form-valid-color: #{$form-valid-color-dark};
--#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
--#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
Sass 변수
dark 색상 모드용 CSS 변수는 _variables-dark.scss의 dark 모드별 Sass 변수에서 부분적으로 생성됩니다. 여기에는 컴포넌트 전반에 사용되는 임베디드 SVG의 색상을 변경하기 위한 몇 가지 커스텀 오버라이드도 포함됩니다.
// scss-docs-start theme-text-dark-variables
$primary-text-emphasis-dark: tint-color($primary, 40%);
$secondary-text-emphasis-dark: tint-color($secondary, 40%);
$success-text-emphasis-dark: tint-color($success, 40%);
$info-text-emphasis-dark: tint-color($info, 40%);
$warning-text-emphasis-dark: tint-color($warning, 40%);
$danger-text-emphasis-dark: tint-color($danger, 40%);
$light-text-emphasis-dark: $gray-100;
$dark-text-emphasis-dark: $gray-300;
// scss-docs-end theme-text-dark-variables
// scss-docs-start theme-bg-subtle-dark-variables
$primary-bg-subtle-dark: shade-color($primary, 80%);
$secondary-bg-subtle-dark: shade-color($secondary, 80%);
$success-bg-subtle-dark: shade-color($success, 80%);
$info-bg-subtle-dark: shade-color($info, 80%);
$warning-bg-subtle-dark: shade-color($warning, 80%);
$danger-bg-subtle-dark: shade-color($danger, 80%);
$light-bg-subtle-dark: $gray-800;
$dark-bg-subtle-dark: mix($gray-800, $black);
// scss-docs-end theme-bg-subtle-dark-variables
// scss-docs-start theme-border-subtle-dark-variables
$primary-border-subtle-dark: shade-color($primary, 40%);
$secondary-border-subtle-dark: shade-color($secondary, 40%);
$success-border-subtle-dark: shade-color($success, 40%);
$info-border-subtle-dark: shade-color($info, 40%);
$warning-border-subtle-dark: shade-color($warning, 40%);
$danger-border-subtle-dark: shade-color($danger, 40%);
$light-border-subtle-dark: $gray-700;
$dark-border-subtle-dark: $gray-800;
// scss-docs-end theme-border-subtle-dark-variables
$body-color-dark: $gray-300;
$body-bg-dark: $gray-900;
$body-secondary-color-dark: rgba($body-color-dark, .75);
$body-secondary-bg-dark: $gray-800;
$body-tertiary-color-dark: rgba($body-color-dark, .5);
$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%);
$body-emphasis-color-dark: $white;
$border-color-dark: $gray-700;
$border-color-translucent-dark: rgba($white, .15);
$headings-color-dark: inherit;
$link-color-dark: tint-color($primary, 40%);
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage);
$code-color-dark: tint-color($code-color, 40%);
$mark-color-dark: $body-color-dark;
$mark-bg-dark: $yellow-800;
//
// Forms
//
$form-select-indicator-color-dark: $body-color-dark;
$form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
$form-switch-color-dark: rgba($white, .25);
$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>");
// scss-docs-start form-validation-colors-dark
$form-valid-color-dark: $green-300;
$form-valid-border-color-dark: $green-300;
$form-invalid-color-dark: $red-300;
$form-invalid-border-color-dark: $red-300;
// scss-docs-end form-validation-colors-dark
//
// Accordion
//
$accordion-icon-color-dark: $primary-text-emphasis-dark;
$accordion-icon-active-color-dark: $primary-text-emphasis-dark;
$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>");
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>");
Sass mixins
dark 모드와 자신이 만든 커스텀 색상 모드의 스타일은 커스터마이즈 가능한 color-mode() mixin으로 data-bs-theme 속성 선택자 또는 미디어 쿼리에 적절히 범위를 지정할 수 있습니다. 더 자세한 내용은 Sass 사용법 섹션을 참고하세요.
@mixin color-mode($mode: light, $root: false) {
@if $color-mode-type == "media-query" {
@if $root == true {
@media (prefers-color-scheme: $mode) {
:root {
@content;
}
}
} @else {
@media (prefers-color-scheme: $mode) {
@content;
}
}
} @else {
[data-bs-theme="#{$mode}"] {
@content;
}
}
}