Spec-Zone.ru › Bootstrap 5

Режим цвета

Попробуйте сами! Скачайте исходный код и рабочую демонстрацию для использования Bootstrap со Stylelint, и режимы цвета из репозитория twbs/examples. Также вы можете открыть пример в StackBlitz.

Темный режим

Bootstrap теперь поддерживает режимы цвета, начиная с темного режима! С версии v5.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">
    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 для тёмного режима. Этот файл не требуется для ваших собственных пользовательских режимов цвета, но он требуется для нашего тёмного режима по двум причинам. Во-первых, лучше иметь одно место для сброса глобальных цветов. Во-вторых, некоторые переменные Sass пришлось переопределить для фоновых изображений, встроенных в наш CSS для аккордеонов, компонентов форм и т. д.

Использование

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

Включите встроенный тёмный режим цвета во всём вашем проекте, добавив атрибут 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.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" 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 по мере необходимости. Мы решили создать отдельный _variables-dark.scss файл стилей для хранения специфичных переменных Sass для тёмного режима Bootstrap, но это необязательно.

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

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

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

JavaScript

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

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

/*!
 * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
 * Copyright 2011-2023 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' && 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, 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}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 для нашего тёмного режима частично генерируются из переменных Sass, специфичных для тёмного режима, в _variables-dark.scss. Это также включает некоторые пользовательские переопределения для изменения цветов встроенных 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%);


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

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

© 2011–2022 Twitter, Inc.
© 2011–2022 The Bootstrap Authors
Code licensed under the MIT License.
Documentation licensed under the Creative Commons Attribution License v3.0.
https://getbootstrap.com/docs/5.3/customize/color-modes/

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API