Перейти к основному содержанию Перейти к навигации по документации
Добавлено в v5.3 На GitHub

Цветовые режимы

Bootstrap теперь поддерживает цветовые режимы или темы, начиная с версии 5.3.0. Изучите наш светлый цветовой режим по умолчанию и новый темный режим или создайте свой собственный, используя наши стили в качестве шаблона.

Темный режим

Bootstrap теперь поддерживает цветовые режимы, начиная с темного режима! В версии 5.3.0 вы можете реализовать собственный переключатель цветового режима (см. ниже пример из документации Bootstrap) и применять различные цветовые режимы по своему усмотрению. Мы поддерживаем светлый режим (по умолчанию), а теперь и темный режим. Цветовые режимы можно переключать глобально для элемента <html> или для определенных компонентов и элементов благодаря атрибуту data-bs-theme.

Кроме того, вы также можете переключиться на реализацию медиа-запроса благодаря нашему миксину цветового режима — смотрите подробности в разделе об использовании. Однако обратите внимание — это лишает вас возможности изменять темы для каждого компонента, как показано ниже.

Пример

Например, чтобы изменить цветовой режим выпадающего меню, добавьте 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">
    Раскрывающийся список по умолчанию
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
    <li><a class="dropdown-item active" href="#">Действие</a></li>
    <li><a class="dropdown-item" href="#">Действие</a></li>
    <li><a class="dropdown-item" href="#">Другое действие</a></li>
    <li><a class="dropdown-item" href="#">Что-то еще здесь</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Отделенная ссылка</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">
    Темный раскрывающийся список
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
    <li><a class="dropdown-item active" href="#">Действие</a></li>
    <li><a class="dropdown-item" href="#">Действие</a></li>
    <li><a class="dropdown-item" href="#">Другое действие</a></li>
    <li><a class="dropdown-item" href="#">Что-то еще здесь</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Отделенная ссылка</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 для темного режима. Этот файл не требуется для ваших собственных пользовательских цветовых режимов, но он необходим для нашего темного режима по двум причинам. Во-первых, лучше иметь одно место для сброса глобальных цветов. Во-вторых, некоторые переменные Sass пришлось переопределить для фоновых изображений, встроенных в наш CSS для аккордеонов, компонентов форм и многого другого.

Вложенные цветовые режимы

Используйте data-bs-theme для вложенного элемента, чтобы изменить цветовой режим для группы элементов или компонентов. В приведенном ниже примере у нас есть внешний темный режим с вложенным светлым режимом. Вы заметите, что компоненты естественным образом адаптируют свой внешний вид, но вам может понадобиться добавить некоторые утилиты, чтобы использовать стили, характерные для каждого цветового режима.

Например, несмотря на использование data-bs-theme="dark" для случайного <div>, <div> не имеет background-color, поскольку он установлен для <body>. Таким образом, если вы хотите, чтобы color и background-color адаптировались, вам нужно добавить .text-body и .bg-body.

Это должно всегда отображаться в темной теме.

Это должно всегда отображаться в темной теме.

html
<div data-bs-theme="dark" class="p-3 text-body bg-body">
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Цветовые режимы</a></li>
      <li class="breadcrumb-item active" aria-current="page">Темный</li>
    </ol>
  </nav>

  <p>Это должно всегда отображаться в <strong>темной</strong> теме.</p>

  <div class="progress mb-4">
    <div class="progress-bar" role="progressbar" aria-label="Простой пример" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>

  <div class="dropdown mb-4">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark2" data-bs-toggle="dropdown" aria-expanded="false">
      Темный раскрывающийся список
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark2">
      <li><a class="dropdown-item active" href="#">Действие</a></li>
      <li><a class="dropdown-item" href="#">Действие</a></li>
      <li><a class="dropdown-item" href="#">Другое действие</a></li>
      <li><a class="dropdown-item" href="#">Что-то еще здесь</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Отделенная ссылка</a></li>
    </ul>
  </div>

  <div data-bs-theme="light" class="p-3 text-body bg-body rounded">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Цветовые режимы</a></li>
        <li class="breadcrumb-item"><a href="#">Темный</a></li>
        <li class="breadcrumb-item active" aria-current="page">Light</li>
      </ol>
    </nav>

    <p>Это должно всегда отображаться в <strong>темной</strong> теме.</p>

    <div class="progress mb-4">
      <div class="progress-bar" role="progressbar" aria-label="Простой пример" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight2" data-bs-toggle="dropdown" aria-expanded="false">
        Light dropdown
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight2">
        <li><a class="dropdown-item active" href="#">Действие</a></li>
        <li><a class="dropdown-item" href="#">Действие</a></li>
        <li><a class="dropdown-item" href="#">Другое действие</a></li>
        <li><a class="dropdown-item" href="#">Что-то еще здесь</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Отделенная ссылка</a></li>
      </ul>
    </div>
  </div>
</div>

Применение

Включить темный режим

Включите встроенный режим темного цвета во всем проекте, добавив атрибут data-bs-theme="dark" к элементу <html>. Это применит режим темного цвета ко всем компонентам и элементам, кроме тех, для которых применен определенный атрибут 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.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" 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);
    background-color: var(--bs-primary-bg-subtle);
  }
}

Outputs to:

[data-bs-theme=dark] .element {
  color: var(--bs-primary-text);
  background-color: var(--bs-primary-bg-subtle);
}

And when setting to media-query:

$color-mode-type: media-query;

@include color-mode(dark) {
  .element {
    color: var(--bs-primary-text);
    background-color: var(--bs-primary-bg-subtle);
  }
}

Outputs to:

@media (prefers-color-scheme: dark) {
  .element {
    color: var(--bs-primary-text);
    background-color: var(--bs-primary-bg-subtle);
  }
}

Пользовательские цветовые режимы

Хотя основной вариант использования цветовых режимов — это светлый и темный режимы, также возможны пользовательские цветовые режимы. Создайте свой собственный селектор data-bs-theme с пользовательским значением в качестве имени вашего цветового режима, а затем при необходимости измените наши переменные Sass и CSS. Мы решили создать отдельную таблицу стилей _variables-dark.scss для размещения переменных Sass, специфичных для темного режима Bootstrap, но это не обязательно для вас.

Например, вы можете создать «синюю тему» с помощью селектора data-bs-theme="blue". В свой пользовательский файл Sass или CSS добавьте новый селектор и при необходимости переопределите любые глобальные или компонентные переменные CSS. Если вы используете Sass, вы также можете использовать функции Sass в своих переопределениях переменных CSS.

[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

Чтобы разрешить посетителям или пользователям переключать цветовые режимы, вам необходимо создать элемент переключения для управления атрибутом data-bs-theme в корневом элементе <html>. В нашей документации мы создали переключатель, который изначально зависит от текущего системного цветового режима пользователя, но предоставляет возможность переопределить его и выбрать определенный цветовой режим.

Вот посмотрите на JavaScript, на котором он работает. Не стесняйтесь проверять нашу собственную панель навигации документации, чтобы увидеть, как она реализована с использованием HTML и CSS из наших собственных компонентов. Обратите внимание: если вы решите использовать медиа-запросы для своих цветовых режимов, возможно, потребуется изменить или удалить ваш JavaScript, если вы предпочитаете неявный контроль.

/*!
 * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
 * Copyright 2011-2022 The Bootstrap Authors
 * Licensed under the Creative Commons Attribution 3.0 Unported License.
 */

(() => {
  'use strict'

  const storedTheme = localStorage.getItem('theme')

  const getPreferredTheme = () => {
    if (storedTheme) {
      return storedTheme
    }

    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
  }

  const setTheme = function (theme) {
    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      document.documentElement.setAttribute('data-bs-theme', 'dark')
    } else {
      document.documentElement.setAttribute('data-bs-theme', theme)
    }
  }

  setTheme(getPreferredTheme())

  const showActiveTheme = theme => {
    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')
    })

    btnToActive.classList.add('active')
    activeThemeIcon.setAttribute('href', svgOfActiveBtn)
  }

  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
    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')
          localStorage.setItem('theme', theme)
          setTheme(theme)
          showActiveTheme(theme)
        })
      })
  })
})()

CSS

Переменные

Десятки переменных CSS корневого уровня повторяются как переопределения для темного режима. Они привязаны к селектору цветового режима, который по умолчанию имеет значение 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)};

    --#{$prefix}emphasis-color: #{$emphasis-color-dark};

    --#{$prefix}primary-text: #{$primary-text-dark};
    --#{$prefix}secondary-text: #{$secondary-text-dark};
    --#{$prefix}success-text: #{$success-text-dark};
    --#{$prefix}info-text: #{$info-text-dark};
    --#{$prefix}warning-text: #{$warning-text-dark};
    --#{$prefix}danger-text: #{$danger-text-dark};
    --#{$prefix}light-text: #{$light-text-dark};
    --#{$prefix}dark-text: #{$dark-text-dark};

    --#{$prefix}primary-bg-subtle: #{$primary-bg-subtle-dark};
    --#{$prefix}secondary-bg-subtle: #{$secondary-bg-subtle-dark};
    --#{$prefix}success-bg-subtle: #{$success-bg-subtle-dark};
    --#{$prefix}info-bg-subtle: #{$info-bg-subtle-dark};
    --#{$prefix}warning-bg-subtle: #{$warning-bg-subtle-dark};
    --#{$prefix}danger-bg-subtle: #{$danger-bg-subtle-dark};
    --#{$prefix}light-bg-subtle: #{$light-bg-subtle-dark};
    --#{$prefix}dark-bg-subtle: #{$dark-bg-subtle-dark};

    --#{$prefix}primary-border-subtle: #{$primary-border-subtle-dark};
    --#{$prefix}secondary-border-subtle: #{$secondary-border-subtle-dark};
    --#{$prefix}success-border-subtle: #{$success-border-subtle-dark};
    --#{$prefix}info-border-subtle: #{$info-border-subtle-dark};
    --#{$prefix}warning-border-subtle: #{$warning-border-subtle-dark};
    --#{$prefix}danger-border-subtle: #{$danger-border-subtle-dark};
    --#{$prefix}light-border-subtle: #{$light-border-subtle-dark};
    --#{$prefix}dark-border-subtle: #{$dark-border-subtle-dark};

    --#{$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}border-color: #{$border-color-dark};
    --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
    

Sass переменные

Переменные CSS для нашего темного цветового режима частично генерируются из переменных Sass, специфичных для темного режима, в _variables-dark.scss. Это также включает в себя некоторые пользовательские переопределения для изменения цветов встроенных SVG, используемых во всех наших компонентах.

$primary-text-dark:                 $blue-300;
$secondary-text-dark:               $gray-300;
$success-text-dark:                 $green-300;
$info-text-dark:                    $cyan-300;
$warning-text-dark:                 $yellow-300;
$danger-text-dark:                  $red-300;
$light-text-dark:                   $gray-100;
$dark-text-dark:                    $gray-300;

$primary-bg-subtle-dark:            $blue-900;
$secondary-bg-subtle-dark:          $gray-900;
$success-bg-subtle-dark:            $green-900;
$info-bg-subtle-dark:               $cyan-900;
$warning-bg-subtle-dark:            $yellow-900;
$danger-bg-subtle-dark:             $red-900;
$light-bg-subtle-dark:              $gray-800;
$dark-bg-subtle-dark:               mix($gray-800, $black);

$primary-border-subtle-dark:        $blue-700;
$secondary-border-subtle-dark:      $gray-700;
$success-border-subtle-dark:        $green-700;
$info-border-subtle-dark:           $cyan-800;
$warning-border-subtle-dark:        $yellow-800;
$danger-border-subtle-dark:         $red-700;
$light-border-subtle-dark:          $gray-700;
$dark-border-subtle-dark:           $gray-800;

$body-color-dark:                   $gray-500;
$body-bg-dark:                      $gray-900;
$body-emphasis-color-dark:          $gray-100;
$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%);
$emphasis-color-dark:               $white;
$border-color-dark:                 $gray-700;
$border-color-translucent-dark:     rgba($white, .15);
$headings-color-dark:               #fff;
$link-color-dark:                   $blue-300;
$link-hover-color-dark:             $blue-200;
$code-color-dark:                   $pink-300;


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


//
// Accordion
//

$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-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='#{$primary-text-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 миксины

Стили для темного режима и любые пользовательские цветовые режимы, которые вы создаете, могут быть соответствующим образом привязаны к селектору атрибута data-bs-theme или медиа-запросу с помощью настраиваемого миксина color-mode(). Подробнее смотрите в разделе Использование 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;
    }
  }
}