Тёмная тема

В Bulma 1.0 тёмная тема встроена и включается сама: если в системе пользователя выбрано тёмное оформление, страница с Bulma тоже станет тёмной. Делать для этого ничего не нужно — фон, текст, карточки, поля и таблицы меняют цвета вместе. Ваша задача — не сломать это своими цветами и при желании дать пользователю выбор.

Как это работает

Все цвета Bulma хранятся в CSS-переменных. Файл стилей содержит два набора значений: для светлой темы и для тёмной. Набор выбирается медиазапросом prefers-color-scheme — он сообщает, какую тему выбрал пользователь в системе. Включите тёмную тему в настройках системы и обновите любую страницу с Bulma — она потемнеет.

Принудительная тема

Атрибут data-theme или класс theme-dark / theme-light выбирает тему независимо от системы. На тег <html> их ставят для всей страницы:

<!DOCTYPE html>
<html lang="ru" data-theme="dark">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
  </head>
  <body>
    <section class="section">
      <h1 class="title">Винная карта</h1>
      <div class="box">Кьянти Классико — €32</div>
      <button class="button is-primary">Заказать</button>
    </section>
  </body>
</html>

Тёмный фон, светлый заголовок, тёмно-серый box и бирюзовая кнопка — даже если в системе светлая тема. Значение data-theme="light" наоборот закрепляет светлую тему.

Тема для части страницы

Класс theme-dark можно поставить на любой блок — тогда тёмными станут элементы Bulma внутри него:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="columns is-mobile">
  <div class="column theme-light">
    <div class="box">Обед: светлая карточка</div>
  </div>
  <div class="column theme-dark">
    <div class="box">Ужин: тёмная карточка</div>
  </div>
</div>

Две карточки рядом: светлая и тёмная. Сам блок с классом фон не получает — тёмные здесь именно box внутри.

Кнопка переключения

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<section class="section">
  <button class="button" id="theme-toggle">Сменить тему</button>
  <div class="box mt-4">Trattoria Oliva — ждём вас с 12:00.</div>
</section>
 
<script>
  const root = document.documentElement;
  document.getElementById('theme-toggle').addEventListener('click', () => {
    const isDark = root.dataset.theme
      ? root.dataset.theme === 'dark'
      : matchMedia('(prefers-color-scheme: dark)').matches;
    root.dataset.theme = isDark ? 'light' : 'dark';
    console.log('Тема:', root.dataset.theme);
  });
</script>

Каждое нажатие меняет data-theme у <html>, страница переключается между светлой и тёмной темой, а под примером появляется название новой темы. Пока атрибута нет, текущую тему подсказывает системная настройка — её читает matchMedia. Чтобы выбор сохранялся между визитами, записывайте его в localStorage и читайте при загрузке.

Если тёмная тема не нужна

Возьмите сборку без неё: https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/versions/bulma-no-dark-mode.min.css. Или поставьте data-theme="light" на <html>.

Частая ошибка

Задавать цвета в своём CSS обычными значениями: .price { color: #333; }. В тёмной теме такой текст почти пропадает на тёмном фоне. Берите переменные Bulma, которые меняются вместе с темой: color: var(--bulma-text-strong) или background: var(--bulma-scheme-main).