v5.3에 추가됨

색상 모드

// Color modes

Bootstrap은 이제 v5.3.0부터 색상 모드 또는 테마를 지원합니다. 기본값인 라이트 모드와 새로운 다크 모드를 살펴보거나 스타일을 템플릿으로 사용하여 나만의 모드를 만들어 보세요.

직접 사용해보세요! twbs/examples 저장소에서 Bootstrap과 Stylelint 및 색상 모드를 사용하기 위한 소스 코드와 작업 데모를 다운로드하세요. StackBlitz에서 예제를 열어볼 수도 있습니다.

다크 모드

이제 Bootstrap에서 어두운 모드부터 색상 모드를 지원합니다! v5.3.0에서는 자체 색상 모드 토글을 구현하고(아래 Bootstrap 문서에서 예시를 참조하세요) 원하는 대로 다양한 색상 모드를 적용할 수 있습니다. 기본값인 라이트 모드, 그리고 새로운 다크 모드가 지원됩니다. 색상 모드는 <html> 요소에서 전역적으로 토글하거나 ‘data-bs-theme’ 속성을 사용하여 특정 컴포넌트 및 요소에서 토글할 수 있습니다.

또는 컬러 모드 믹스인(자세한 내용은 사용 섹션 참조)(#building-with-sass) 덕분에 미디어 쿼리 구현으로 전환할 수도 있습니다. 주의할 점은 아래 그림과 같이 컴포넌트별로 테마를 변경할 수 없다는 점입니다.

예제

예를 들어 드롭다운 메뉴의 색상 모드를 변경하려면 data-bs-theme="light" 또는 data-bs-theme="dark"를 부모 .dropdown에 추가하면 됩니다. 이제 전역 색상 모드에 관계없이 이러한 드롭다운은 지정된 테마 값으로 표시됩니다.

html

<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>

작동 방식

위에 표시된 것처럼 색상 모드 스타일은 data-bs-theme 속성으로 제어됩니다. 이 속성은 <html> 요소 또는 다른 요소나 Bootstrap 컴포넌트에 적용할 수 있습니다. <html> 요소에 적용하면 모든 요소에 적용됩니다. 컴포넌트나 요소에 적용하면 해당 특정 컴포넌트나 요소로 범위가 지정됩니다.
지원하려는 각 색상 모드에 대해 공유 전역 CSS 변수에 대한 새로운 오버라이드를 추가해야 합니다. 다크 모드의 경우 _root.scss 스타일시트에서 이미 이 작업을 수행했으며 라이트 모드가 기본값으로 설정되어 있습니다. 컬러 모드별 스타일을 작성할 때는 믹스인을 사용하세요:
```
// Color mode variables in _root.scss
@include color-mode(dark) {
  // CSS variable overrides here...
}
```
사용자 정의 _variables-dark.scss를 사용하여 다크 모드에 대한 공유 전역 CSS 변수 오버라이드를 강화합니다. 이 파일은 사용자 정의 색상 모드에는 필요하지 않지만 두 가지 이유로 다크 모드에는 필요합니다. 첫째, 전역 색상을 재설정할 수 있는 단일 위치가 있는 것이 좋습니다. 둘째, 아코디언, 양식 컴포넌트 등을 위해 CSS에 포함된 배경 이미지에 대해 일부 Sass 변수를 재정의해야 했기 때문입니다.

사용법

다크 모드 활성화

<html> 요소에 data-bs-theme="dark" 속성을 추가하여 전체 프로젝트에서 기본 제공 어두운 색상 모드를 사용하도록 설정합니다. 이렇게 하면 특정 data-bs-theme 속성이 적용된 요소를 제외한 모든 컴포넌트와 요소에 어두운 색상 모드가 적용됩니다. 아래는 빠른 시작 템플릿을 기반으로 만들어진 예시입니다:

<!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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

Bootstrap에는 아직 내장된 색상 모드 선택기가 제공되지 않지만 원하는 경우 자체 문서에 있는 색상 모드 선택기를 사용할 수 있습니다. JavaScript 문단에서 자세히 확인해보세요.

Sass로 빌드하기

새로운 다크 모드 옵션은 Bootstrap의 모든 사용자가 사용할 수 있지만 미디어 쿼리 대신 데이터 속성을 통해 제어되며 프로젝트의 색상 모드를 자동으로 전환하지 않습니다. Sass를 통해 $enable-dark-mode를 false로 변경하여 다크 모드를 완전히 비활성화할 수 있습니다.

색상 모드가 어떻게 적용되는지 제어할 수 있도록 사용자 정의 Sass 믹스인 color-mode()를 사용합니다. 기본적으로 data 속성 접근 방식을 사용하여 (이 문서처럼) 방문자가 자동 다크 모드를 선택하거나 기본 설정을 제어할 수 있는 보다 사용자 친화적인 환경을 만들 수 있습니다. 또한 라이트/다크 외에도 다양한 테마와 사용자 정의 색상 모드를 추가할 수 있는 쉽고 확장 가능한 방법입니다.

미디어 쿼리를 사용하고 색상 모드만 자동으로 만들려면 Sass 변수를 통해 믹싱의 기본 유형을 변경할 수 있습니다. 다음 스니펫과 컴파일된 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);
  }
}

사용자 지정 색상 모드

색상 모드의 주요 사용 사례는 라이트/다크 모드이지만 사용자 정의 색상 모드도 가능합니다. 사용자 정의 값을 색상 모드의 이름으로 사용하여 나만의 data-bs-theme 선택기를 만든 다음 필요에 따라 Sass 및 CSS 변수를 수정합니다. 저희는 Bootstrap의 다크 모드 전용 Sass 변수를 저장하기 위해 별도의 _variables-dark.scss 스타일시트를 만들기로 선택했지만, 반드시 필요한 것은 아닙니다.

예를 들어 data-bs-theme="blue" 선택기를 사용하여 “파란색 테마"를 만들 수 있습니다. 사용자 정의 Sass 또는 CSS 파일에서 새 선택기를 추가하고 필요에 따라 전역 또는 컴포넌트 CSS 변수를 재정의합니다. Sass를 사용하는 경우 CSS 변수 오버라이드 내에서 Sass의 함수를 사용할 수도 있습니다.

site/assets/scss/_content.scss

[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);
  }
}

Example blue theme

Some paragraph text to show how the blue theme might look with written copy.

<div data-bs-theme="blue">
  ...
</div>

JavaScript

방문자나 사용자가 색상 모드를 전환할 수 있도록 하려면 루트 요소인 <html>의 data-bs-theme 속성을 제어하는 토글 요소를 만들어야 합니다. 처음에는 사용자의 현재 시스템 색상 모드를 따르지만, 이를 재정의하고 특정 색상 모드를 선택할 수 있는 옵션을 제공하는 토글러를 문서에 작성했습니다.

이 기능을 구동하는 JavaScript를 살펴보세요. 자체 컴포넌트에서 HTML과 CSS를 사용하여 어떻게 구현되었는지 보려면 자체 문서 내비게이션 바를 살펴보시기 바랍니다. 사이트 새로고침 시 발생할 수 있는 화면 깜박임을 줄이려면 페이지 상단에 JavaScript를 포함하는 것이 좋습니다. 색상 모드에 미디어 쿼리를 사용하기로 결정한 경우, 암시적 제어를 선호하는 경우 JavaScript를 수정하거나 제거해야 할 수 있습니다.

/*!
 * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
 * Copyright 2011-2024 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)
        })
      })
  })
})()

테마 색상 추가

경고창이나 목록 그룹과 같은 일부 컴포넌트의 경우 $theme-colors에 새 색상을 추가하는 것만으로는 충분하지 않습니다. 밝은 테마의 경우 $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

변수

수십 개의 루트 수준 CSS 변수가 다크 모드에 대한 오버라이드로 반복됩니다. 이러한 변수의 범위는 색상 모드 선택기에 한정되며, 기본값은 data-bs-theme이지만 직접 구성 가능한 미디어 쿼리에서 prefers-color-scheme을 사용하도록 설정할 수 있습니다. 이 변수를 새 색상 모드를 생성할 때 가이드라인으로 사용하세요.

scss/_root.scss

--#{$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 변수

다크 컬러 모드의 CSS 변수는 부분적으로 _variables-dark.scss의 다크 모드 전용 Sass 변수에서 생성됩니다. 여기에는 컴포넌트 전체에 사용되는 임베디드 SVG의 색상을 변경하기 위한 몇 가지 사용자 정의 오버라이드도 포함됩니다.

scss/_variables-dark.scss

$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;

$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);

$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;

$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>");

$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;


//
// 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-.708z'/></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-.708z'/></svg>");

Sass 믹스인

다크 모드의 스타일과 사용자가 만든 모든 사용자 정의 색상 모드는 사용자 정의 가능한 color-mode() 믹스인을 사용하여 data-bs-theme 속성 선택기 또는 미디어 쿼리에 적절하게 범위를 지정할 수 있습니다. 자세한 내용은 Sass 사용법 문단을 참조하세요.

scss/mixins/_color-mode.scss

@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;
    }
  }
}