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

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

Настройка темы через CSS

Toastify использует встроенные классы для стилизации уведомлений. По умолчанию используется светлая тема, но можно определить темную тему через CSS:

/* Светлая тема (по умолчанию) */
.toastify-light {
    background: #ffffff;
    color: #333333;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Темная тема */
.toastify-dark {
    background: #2b2b2b;
    color: #f1f1f1;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

При этом ключевыми свойствами являются:

  • background — цвет фона уведомления.
  • color — цвет текста.
  • box-shadow — тень, которая помогает уведомлению выделяться на фоне страницы.

Применение темы через параметры Toastify

Toastify позволяет задавать тему при создании уведомления с помощью опции className:

Toastify({
    text: "Привет! Это уведомление с темной темой",
    duration: 3000,
    className: "toastify-dark",
    gravity: "top", 
    position: "right"
}).showToast();
  • className принимает имя CSS-класса, который будет применен к конкретному уведомлению.
  • Можно динамически менять тему, в зависимости от состояния интерфейса (например, текущей темы приложения).

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

Для веб-приложений, поддерживающих светлую и темную тему, можно реализовать динамическое переключение уведомлений:

function showToast(message) {
    const isDarkMode = document.body.classList.contains('dark-mode');
    Toastify({
        text: message,
        duration: 2500,
        className: isDarkMode ? "toastify-dark" : "toastify-light",
        gravity: "bottom",
        position: "center"
    }).showToast();
}
  • Проверяется наличие класса dark-mode на <body> и применяется соответствующая тема.
  • Такой подход позволяет сохранять единообразие интерфейса, не дублируя код для уведомлений.

Использование кастомных CSS-переменных

Для упрощения поддержания нескольких тем можно использовать CSS-переменные:

:root {
    --toast-bg-light: #ffffff;
    --toast-text-light: #333333;

    --toast-bg-dark: #2b2b2b;
    --toast-text-dark: #f1f1f1;
}

.toastify-light {
    background: var(--toast-bg-light);
    color: var(--toast-text-light);
}

.toastify-dark {
    background: var(--toast-bg-dark);
    color: var(--toast-text-dark);
}
  • Позволяет централизованно управлять цветами уведомлений.
  • Удобно для масштабируемых проектов с множеством элементов интерфейса.

Интеграция с системной темой

Toastify можно синхронизировать с предпочтением пользователя через prefers-color-scheme:

@media (prefers-color-scheme: dark) {
    .toastify-light {
        background: #2b2b2b;
        color: #f1f1f1;
    }
}
  • Автоматически применяет темную тему, если система пользователя установлена в режиме dark.
  • Позволяет не писать дополнительный JavaScript для отслеживания темы.

Важные нюансы

  • При использовании темной темы стоит проверить контраст текста и фона, чтобы уведомления были читаемы на любых фонах.
  • Не рекомендуется смешивать светлую и темную темы на одной странице, это может создавать визуальный хаос.
  • Темы можно комбинировать с кастомными анимациями и позиционированием, сохраняя гибкость библиотеки Toastify.

Совместное использование с другими стилями

Если проект использует CSS-фреймворки (например, Tailwind или Bootstrap), можно назначить классы фреймворка внутри className:

Toastify({
    text: "Уведомление с Tailwind темой",
    className: "bg-gray-800 text-white shadow-lg",
    duration: 3000
}).showToast();
  • Позволяет не создавать отдельные CSS-файлы для тем.
  • Полностью интегрируется с существующей системой стилей приложения.

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

Оглавление