Темная и светлая темы

Библиотека iziToast поддерживает гибкое оформление уведомлений, позволяя применять как светлую, так и тёмную тему. Это особенно важно для современных интерфейсов, где пользователь может переключаться между режимами светлой и тёмной темы приложения или системы. Управление темами осуществляется через параметр theme, который принимает значения 'light' или 'dark'.

iziToast.show({
    title: 'Пример',
    message: 'Это уведомление с тёмной темой',
    theme: 'dark'
});

В данном примере уведомление будет отображено с тёмным фоном, светлым текстом и характерной подсветкой кнопок. Для светлой темы используется аналогичный синтаксис с theme: 'light'.

Настройка темы глобально

Помимо локальной установки темы для каждого уведомления, iziToast позволяет задать тему глобально через метод settings:

iziToast.settings({
    theme: 'dark', // или 'light'
    position: 'topRight',
    timeout: 5000
});

После такой настройки все последующие уведомления будут использовать выбранную тему по умолчанию, что упрощает поддержание единообразного стиля приложения.

Стилизация через CSS

Темы в iziToast реализованы через CSS-классы:

  • .iziToast-light — светлая тема с белым фоном и тёмным текстом.
  • .iziToast-dark — тёмная тема с чёрным или тёмно-серым фоном и светлым текстом.

Для расширенной кастомизации можно переопределить стили:

.iziToast-dark {
    background: #1f1f1f;
    color: #f5f5f5;
}

.iziToast-dark .iziToast-title {
    font-weight: bold;
}

.iziToast-light {
    background: #ffffff;
    color: #333333;
}

Таким образом, можно изменить цвет фона, текста, кнопок и иконок, сохранив базовую структуру уведомления.

Динамическое переключение темы

В веб-приложениях часто требуется менять тему уведомлений в зависимости от системных настроек пользователя или переключателя в интерфейсе. Для этого достаточно перед показом уведомления задавать параметр theme динамически:

let userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

iziToast.show({
    title: 'Системная тема',
    message: 'Уведомление под системную тему',
    theme: userPrefersDark ? 'dark' : 'light'
});

Такой подход позволяет уведомлениям автоматически подстраиваться под текущую тему приложения или системы.

Особенности работы с компонентами уведомления

В tёмной теме кнопки, progress bar и иконки автоматически адаптируются:

  • Кнопки используют светлый текст на тёмном фоне.
  • Progress bar отображается контрастным цветом для лучшей читаемости.
  • Иконки можно задавать отдельные цвета через параметр color, чтобы они гармонировали с фоном:
iziToast.show({
    title: 'Успех',
    message: 'Данные сохранены',
    theme: 'dark',
    color: 'green',
    icon: 'icon-check'
});

В светлой теме наоборот применяются тёмные цвета для элементов и текста.

Комбинирование с другими стилями

iziToast позволяет комбинировать темы с кастомными классами через параметр class. Например, можно создать отдельный CSS-класс для уведомлений в фирменном стиле и объединить его с тёмной или светлой темой:

iziToast.show({
    title: 'Фирменное уведомление',
    message: 'Тёмная тема + фирменный стиль',
    theme: 'dark',
    class: 'custom-brand-toast'
});

Это позволяет создавать сложные визуальные эффекты, сохраняя удобство смены базовой темы.

Оглавление