Тема

Тема задаёт светлое или тёмное оформление всего интерфейса. Без сохранённого выбора Framework следует системной настройке пользователя; кнопка темы позволяет выбрать схему явно.

Пример

<button class="sf-theme-button sf-icon-button sf-icon-button--icon sf-icon-button--default sf-icon-button--on-surface sf-icon-button--size-1" type="button" aria-label="Тёмная тема" aria-pressed="false"><i class="sf-icon" aria-hidden="true">dark_mode</i></button>

На этом сайте темой управляет панель настроек документации, поэтому в превью кнопки показывают разметку и не переключают тему. На обычной странице кнопки работают сразу после загрузки Core: дополнительный код не нужен.

Разметка

Минимальную разметку показывает пример выше: нативная кнопка с классом sf-theme-button, доступным именем и aria-pressed.

• Класс sf-theme-button можно добавить к любой кнопке Framework — обычной или кнопке-иконке; своего оформления у него нет.
• Кнопка без data-theme переключает светлую и тёмную тему.
• Кнопка с data-theme="system", "light" или "dark" выбирает этот режим.
• Тему Framework задаёт классом theme-light или theme-dark на элементе html; цвета компонентов и утилит следуют за ним.

Варианты

Выбор режима

Группа из трёх кнопок с data-theme даёт явный выбор: системная, светлая или тёмная тема. Нажата кнопка, чьё значение совпадает с выбранным режимом; без явного выбора это system. Одиночная кнопка без data-theme подходит для шапки сайта, группа — для страницы настроек.

<div class="flex flex-wrap gap-1" role="group" aria-label="Выбор темы">
 <button class="sf-theme-button sf-button sf-button--outline sf-button--on-surface sf-button--size-1" type="button" data-theme="system" aria-pressed="false"><span class="sf-button-text-container">Системная</span></button>
 <button class="sf-theme-button sf-button sf-button--outline sf-button--on-surface sf-button--size-1" type="button" data-theme="light" aria-pressed="false"><span class="sf-button-text-container">Светлая</span></button>
 <button class="sf-theme-button sf-button sf-button--outline sf-button--on-surface sf-button--size-1" type="button" data-theme="dark" aria-pressed="false"><span class="sf-button-text-container">Тёмная</span></button>
</div>

Доступность

• aria-pressed всех кнопок sf-theme-button ставит Framework при загрузке и после каждой смены темы, в том числе у кнопок, добавленных позже. Кнопка без data-theme нажата, когда действует тёмная тема.

• Группа выбора использует aria-pressed, а не радиокнопки: оберните её в элемент с role="group" и aria-label («Выбор темы»).

• Вместе с aria-pressed Framework ставит нажатой кнопке класс active (у Smart-кнопки — внутренней кнопке), поэтому выбранный режим виден и глазами.

• У кнопки-иконки доступное имя задаёт aria-label («Тёмная тема»); оно не меняется при переключении — состояние передаёт aria-pressed. Значок тоже не меняется; другой значок для тёмной темы ставит код проекта по событию sf-theme-change, которое приходит и при запуске:

  JavaScript

  content_copyCopy

  const glyph = document.querySelector('.sf-theme-button:not([data-theme]) .sf-icon');
  window.addEventListener('sf-theme-change', (event) => {
    glyph.textContent = event.detail.theme === 'dark' ? 'light_mode' : 'dark_mode';
  });
  

• Смена темы не перемещает фокус.

JavaScript

SF.Loader.setTheme(preference) принимает system, light или dark и возвращает false для другого значения. Явный выбор сохраняется на 30 дней в cookie sf-theme с путём / и без домена: выбор общий для всех страниц текущего хоста и не переходит на поддомены. setTheme('system') удаляет cookie и возвращает управление системной настройке, за изменением которой Framework следит. SF.Loader.changeTheme() переключает светлую и тёмную тему, как кнопка без data-theme.

После смены темы на window возникает событие sf-theme-change с полями theme (light или dark — действующая тема) и preference (system, light или dark — выбранный режим) в detail.

window.addEventListener('sf-theme-change', (event) => {
  chart.setColors(event.detail.theme);
});

Если тема страницы задаётся иначе, задайте SF_BOOT_CONFIG.theme = false до запуска Core: тогда Framework не меняет классы темы и не читает сохранённый выбор.

См. также

• Светлая и тёмная тема
• Все переменные