Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 В версии Bootstrap 5.3 появилась новая функция - возможность создавать светлую и темную темы для проекта. Теперь не нужно писать кастомные CSS-стили для создания нескольких тем. Всё настраивается через переменные.

2 В этом уроке мы разберем, как работает светлая и темная темы в Bootstrap. Так же изучим изменение темы и создание собственных.

3 <h2>Переключение светлой и темной тем</h2>

4 В Bootstrap 5.3 светлая и темная темы включены по умолчанию. Для них всё готово. Нужно лишь научится их переключать. Это можно сделать с помощью HTML-атрибута data-bs-theme, который принимает одно из двух значений:

5 <ul><li>light - светлая тема. Используется по умолчанию</li>

6 <li>dark - темная тема</li>

7 </ul>Использовать атрибут можно на любом теге HTML, но чаще всего его ставят на весь <body>. Это позволяет задать тему сразу для всего проекта.

8 В<a>примере</a>можно включать и выключать темную тему, чтобы посмотреть на все изменения.

9 Если посмотреть на изменения, можно заметить важную особенность - изменяется фон и цвет текста. Основные цвета, такие как primary и warning не изменяются, так как это основные цвета темы.

10 Также не изменяются размеры элементов, их расположение, внутренние и внешние отступы. Всё это не относится к изменениям темы, но можно влиять даже на это с помощью миксина color-mode.

11 Иногда возникает необходимость изменить не только фон и цвет текста, но и все основные цвета. Это может происходить по разным причинам, например, текущие цвета слишком яркие или тусклые для темной темы. Переопределим цвета для темной темы сайта.

12 <h2>Изменение темной темы</h2>

13 В уроке про изменение цветовой схемы мы создали новую пастельную схему. Вот как она выглядела:

14 Ее цвета не такие "агрессивные" для использования на темном фоне. Поэтому сделаем смену основных цветов только для темной темы. Для этого продолжим изменять файлbrand-color.scss, который был создан в уроке про цветовые схемы. Вот как он выглядел:

15 Чтобы переделать цвета только для темной темы, нужно будет пойти на небольшие хитрости:

16 <ol><li>Создать новые массивы $theme-colors и $theme-colors-rgb</li>

17 <li>Сгенерировать новые переменные цветовой схемы</li>

18 <li>Обернуть все переменные и функции в миксин color-mode с аргументом dark</li>

19 <li>Изменить порядок подключения файлов в файлеmain.scss</li>

20 </ol>Пойдем по порядку. Создадим массивы $theme-colors и $theme-colors-rgb. Это создаст новую цветовую схему, которую в последствии будем использовать только для элементов с атрибутом data-bs-theme="dark":

21 Важно, что мы создаем массив $theme-colors-rgb, где все цвета переводятся в модель rgb. В таком формате используются цвета в некоторых компонентах. Например, в формате RGB используются цвета в тексте:

22 Теперь используем новые массивы и сгенерируем цвета. Для этого используем два цикла, которые сгенерируют переменные:

23 Этот код сгенерирует 12 переменных:

24 Чтобы эти переменные использовались только на темной теме, весь написанный код нужно обернуть в миксин color-mode со значением dark. Это добавит переменные в CSS-селектор [data-bs-theme=dark]:

25 Осталось подключить файл с цветовой схемой. Тут есть хитрость - подключить файл уже после подключения фреймворка. В Bootstrap еще не отточена система с изменением темной цветовой схемы, так как нет отдельного массива $theme-colors в настройках проекта.

26 По этой причине вначале полностью подключается Bootstrap, а затем отдельно подключается новая темная цветовая схема.

27 После компиляции в CSS-файле появится следующий код:

28 Добавим этот CSS в наш первый пример. Теперь при переключении темы меняются и основные цвета<a>проекта</a>.

29 <h2>Выводы</h2>

30 В Bootstrap 5.3 появилась возможность использовать несколько цветовых схем. Главным мотиватором такого решения стала возможность добавлять светлую и темную тему для проекта.

31 Переключение тем происходит с помощью изменения атрибута data-bs-theme. Этот атрибут может использоваться как на отдельном компоненте, так и на всем проекте. Для всего проекта атрибут устанавливают для тега <html> или <body>. Чтобы установить темную тему, используется значение dark.

32 Чтобы добавить произвольные цвета в цветовую схему для темной темы, используется следующий алгоритм:

33 <ol><li>Создаются новые массивы $theme-colors и $theme-colors-rgb</li>

34 <li>С помощью циклов генерируются CSS-переменные из созданных массивов</li>

35 <li>Весь код оборачивается в миксин color-mode с аргументом dark. Это позволит сгенерировать переменные только для селектора [data-bs-theme=dark]</li>

36 <li>В основном файле проекта новые цвета подключаются уже после подключения всего фреймворка</li>

37 </ol>