Изменение цветов

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

Опции для изменения цвета

В Noty основными элементами, которые можно стилизовать через цвета, являются:

  1. Фон уведомления – управляется с помощью CSS-класса noty_type.
  2. Текст уведомления – цвет текста можно задавать через CSS или встроенные опции.
  3. Кнопки и элементы управления – применяются отдельные стили через класс noty_buttons.

Стандартная структура уведомления позволяет добавлять собственные CSS-классы через параметр theme или className при создании экземпляра Noty:

new Noty({
    text: 'Пример уведомления с кастомным цветом',
    type: 'alert',
    theme: 'sunset', // стандартная тема
    layout: 'topRight',
    timeout: 3000,
    className: 'custom-noty'
}).show();

Изменение цвета через CSS

Чтобы изменить цвет уведомления, создаётся CSS-класс с нужными параметрами. Например:

.custom-noty {
    background-color: #1e1e2f; /* темный фон */
    color: #ffffff; /* светлый текст */
    border: 2px solid #ff6f61; /* рамка для акцента */
}

.custom-noty .noty_bar {
    background-color: #1e1e2f;
}

.custom-noty .noty_text {
    color: #ffffff;
}

После подключения такого CSS все уведомления с className: 'custom-noty' будут использовать заданную цветовую схему.

Использование встроенных типов Noty

Noty поддерживает стандартные типы уведомлений, которые уже имеют свои цветовые схемы:

  • alert – нейтральное уведомление
  • success – зелёный оттенок для успешных действий
  • error – красный для ошибок
  • warning – оранжевый для предупреждений
  • information – синий для информационных сообщений

Каждый тип соответствует классу .noty_type_alert, .noty_type_success и так далее. Эти классы можно переопределять в CSS:

.noty_type_success {
    background-color: #28a745;
    color: #ffffff;
}

.noty_type_error {
    background-color: #dc3545;
    color: #ffffff;
}

Динамическое изменение цвета

Можно изменять цвета уведомления прямо при создании, без создания CSS-классов, через объект callbacks и метод setTimeout:

let n = new Noty({
    text: 'Динамическое изменение цвета',
    type: 'alert',
    layout: 'topRight',
    timeout: 5000,
    callbacks: {
        onShow: function() {
            this.barDom.style.backgroundColor = '#6f42c1';
            this.barDom.style.color = '#ffffff';
        }
    }
}).show();

В этом примере barDom — это основной DOM-элемент уведомления, к которому можно применять любые CSS-свойства напрямую.

Комбинирование тем и кастомных цветов

Noty позволяет использовать встроенные темы (mint, sunset, relax, metroui) и одновременно накладывать собственные цвета. Порядок применения стилей важен: сначала подключается тема, затем переопределяются цвета через CSS или динамически через JS.

new Noty({
    text: 'Комбинация темы и кастомного цвета',
    type: 'information',
    theme: 'relax',
    layout: 'topCenter',
    className: 'info-custom',
    timeout: 4000
}).show();
.info-custom {
    background-color: #0d6efd !important; /* перекрываем фон темы */
    color: #ffffff !important;
}

Использование !important иногда необходимо для перекрытия стандартных стилей темы.

Цвета кнопок уведомлений

Для уведомлений с кнопками (buttons) можно отдельно задавать стиль кнопок:

new Noty({
    text: 'Выберите действие',
    layout: 'topRight',
    theme: 'metroui',
    buttons: [
        Noty.button('Подтвердить', 'btn btn-success', function() {
            console.log('Подтверждено');
        }),
        Noty.button('Отмена', 'btn btn-danger', function() {
            console.log('Отменено');
        })
    ]
}).show();

CSS для кнопок может включать градиенты, тени и изменения цвета при наведении:

.btn-success {
    background-color: #28a745;
    color: #ffffff;
    border-radius: 4px;
    padding: 5px 12px;
}

.btn-danger:hover {
    background-color: #c82333;
}

Практические советы по цвету

  • Цвет уведомления должен контрастировать с фоном страницы для лучшей читаемости.
  • Для критических ошибок используйте насыщенные красные оттенки, а для успеха — зелёные.
  • Для информационных сообщений лучше использовать мягкие цвета, не раздражающие глаза.
  • Динамическое изменение цвета через JS полезно для временных состояний, например, при прогрессе загрузки.

Эти методы позволяют полностью контролировать визуальную составляющую уведомлений Noty, обеспечивая единый стиль интерфейса и улучшая восприятие пользователем.

Оглавление