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

Библиотека iziToast предоставляет гибкие возможности для создания уведомлений в веб-приложениях. Одной из полезных функций является поддержка динамического переключения тем, что позволяет изменять визуальное оформление уведомлений в зависимости от пользовательских настроек или состояния интерфейса.

Основные темы iziToast

По умолчанию библиотека предоставляет две предустановленные темы:

  • Light – светлая тема с прозрачным фоном и тёмным текстом.
  • Dark – тёмная тема с затемнённым фоном и светлым текстом.

Темы влияют на основные элементы уведомления:

  • Фон (background-color)
  • Цвет текста (color)
  • Цвет границы и тени (box-shadow)
  • Цвет кнопок действия

Подключение и использование тем

Для работы с темами необходимо подключить CSS библиотеки. Обычно это выглядит так:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast/dist/css/iziToast.min.css">
<script src="https://cdn.jsdelivr.net/npm/izitoast/dist/js/iziToast.min.js"></script>

Создание уведомления с определённой темой:

iziToast.show({
    title: 'Сообщение',
    message: 'Это уведомление в светлой теме',
    theme: 'light', // или 'dark'
    position: 'topRight'
});

Ключевой момент: свойство theme позволяет задать тему при создании каждого уведомления отдельно.

Динамическая смена темы на лету

Иногда требуется менять тему в зависимости от пользовательского выбора или текущего состояния интерфейса. Для этого можно хранить глобальный параметр темы и применять его при каждом вызове iziToast:

let currentTheme = 'light';

function showNotification(title, message) {
    iziToast.show({
        title: title,
        message: message,
        theme: currentTheme,
        position: 'topRight'
    });
}

// Переключение темы
function toggleTheme() {
    currentTheme = currentTheme === 'light' ? 'dark' : 'light';
    showNotification('Тема изменена', `Новая тема: ${currentTheme}`);
}

Такой подход позволяет:

  • Обеспечить единообразие уведомлений в приложении.
  • Изменять тему без перезагрузки страницы.
  • Поддерживать пользовательские настройки интерфейса.

Кастомизация тем

Помимо встроенных светлой и тёмной тем, iziToast позволяет создавать собственные темы с помощью CSS-перезаписи:

.iziToast.myCustomTheme {
    background: linear-gradient(45deg, #4caf50, #81c784);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.iziToast.myCustomTheme .iziToast-close {
    color: #ffffff;
}

Применение кастомной темы при уведомлении:

iziToast.show({
    title: 'Кастомная тема',
    message: 'Используется пользовательский стиль',
    theme: 'myCustomTheme', 
    position: 'bottomLeft'
});

Важно: theme может быть любым строковым идентификатором, если соответствующий CSS-класс определён.

Управление глобальной темой через iziToast settings

Для удобства можно установить тему глобально через iziToast.settings:

iziToast.settings({
    theme: 'dark', // применяется ко всем последующим уведомлениям
    position: 'topRight',
    timeout: 5000
});

iziToast.show({
    title: 'Уведомление',
    message: 'Использует глобальную тёмную тему'
});

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

Динамическое обновление темы существующих уведомлений

iziToast не предоставляет прямого API для изменения темы уже отображённого уведомления. Однако можно удалить текущее уведомление и создать новое с другой темой:

const toastId = iziToast.show({
    title: 'Исходная тема',
    message: 'Светлая тема',
    theme: 'light',
    id: 'uniqueToast'
});

// Смена темы через секунду
setTimeout(() => {
    iziToast.destroy('uniqueToast'); // удаляем старое
    iziToast.show({
        title: 'Новая тема',
        message: 'Тёмная тема',
        theme: 'dark',
        id: 'uniqueToast'
    });
}, 1000);

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

Выводы по практике динамических тем

  • Использовать theme при создании уведомления или глобально через iziToast.settings.
  • Для кастомных тем создавать CSS-классы с уникальными именами.
  • Для переключения темы на уже открытых уведомлениях использовать удаление и повторное создание.
  • Хранить текущую тему в глобальной переменной или в настройках пользователя для консистентного интерфейса.

Динамическое управление темами позволяет улучшить визуальную согласованность интерфейса и адаптировать уведомления под разные условия, включая светлые и тёмные режимы, предпочтения пользователей и состояние приложения.

Оглавление