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

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

Основы работы с темами

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

Настройка светлой и темной тем

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

Для начала нужно создать два набора CSS-правил. Они будут применяться к модальному окну в зависимости от выбранной темы.

/* Стили для светлой темы */
.lightbox-light {
    background-color: #fff;
    color: #000;
}

.lightbox-dark {
    background-color: #333;
    color: #fff;
}

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

Детали реализации

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

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

let themeToggleButton = document.querySelector('#theme-toggle'); // Кнопка для переключения темы
let lightbox = document.querySelector('.basicLightbox'); // Модальное окно

themeToggleButton.addEventListener('click', function() {
    if (document.body.classList.contains('light-theme')) {
        document.body.classList.remove('light-theme');
        document.body.classList.add('dark-theme');
        lightbox.classList.remove('lightbox-light');
        lightbox.classList.add('lightbox-dark');
    } else {
        document.body.classList.remove('dark-theme');
        document.body.classList.add('light-theme');
        lightbox.classList.remove('lightbox-dark');
        lightbox.classList.add('lightbox-light');
    }
});

Здесь осуществляется переключение классов light-theme и dark-theme для тела документа, а также для самого модального окна, которое получает соответствующий стиль. Для начала модального окна можно установить дефолтную тему, исходя из системных настроек пользователя или текущего состояния.

  1. Сохранение состояния темы

    Часто бывает полезно сохранить состояние темы, чтобы при следующем открытии страницы пользователь видел свою предпочтительную настройку. Это можно реализовать с помощью localStorage.

// При загрузке страницы проверяем сохраненную тему
window.addEventListener('load', function() {
    if (localStorage.getItem('theme') === 'dark') {
        document.body.classList.remove('light-theme');
        document.body.classList.add('dark-theme');
        lightbox.classList.remove('lightbox-light');
        lightbox.classList.add('lightbox-dark');
    } else {
        document.body.classList.remove('dark-theme');
        document.body.classList.add('light-theme');
        lightbox.classList.remove('lightbox-dark');
        lightbox.classList.add('lightbox-light');
    }
});

// Сохраняем тему в localStorage при переключении
themeToggleButton.addEventListener('click', function() {
    if (document.body.classList.contains('dark-theme')) {
        localStorage.setItem('theme', 'dark');
    } else {
        localStorage.setItem('theme', 'light');
    }
});

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

Работа с изображениями и анимациями

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

/* Светлая тема */
.lightbox-light img {
    content: url('image-light-theme.jpg');
}

/* Темная тема */
.lightbox-dark img {
    content: url('image-dark-theme.jpg');
}

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

/* Плавное изменение цветов */
.basicLightbox {
    transition: background-color 0.3s ease, color 0.3s ease;
}

Советы по адаптации к темам

  • Учет системных предпочтений. Современные браузеры поддерживают системные настройки тем, и можно автоматически подстраиваться под предпочтения пользователя, используя медиа-запросы:
@media (prefers-color-scheme: dark) {
    .basicLightbox {
        background-color: #333;
        color: #fff;
    }
}

@media (prefers-color-scheme: light) {
    .basicLightbox {
        background-color: #fff;
        color: #000;
    }
}

Этот подход позволит автоматически изменять стили в зависимости от того, использует ли пользователь темную или светлую тему на уровне операционной системы.

  • Использование переменных CSS. Переменные CSS позволяют легко управлять цветами и другими параметрами темы. Например:
:root {
    --background-light: #fff;
    --text-light: #000;
    --background-dark: #333;
    --text-dark: #fff;
}

.basicLightbox {
    background-color: var(--background-light);
    color: var(--text-light);
}

body.dark-theme .basicLightbox {
    background-color: var(--background-dark);
    color: var(--text-dark);
}

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

Заключение

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

Оглавление