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

Gridstack.js предоставляет гибкие возможности для создания интерактивных сеточных интерфейсов с элементами, которые можно перетаскивать и изменять их размеры. Одной из важных особенностей современных UI является поддержка темной и светлой темы, что позволяет улучшить визуальное восприятие и адаптировать интерфейс под условия освещения или пользовательские предпочтения.

Принципы реализации тем в Gridstack.js

Gridstack.js изначально не содержит встроенной поддержки тем, однако структура библиотеки позволяет полностью контролировать стили сетки и виджетов. Основные подходы к внедрению тем:

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

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

:root {
  --grid-background: #ffffff;
  --grid-item-background: #f5f5f5;
  --grid-item-border: #cccccc;
  --grid-item-text: #333333;
}

[data-theme="dark"] {
  --grid-background: #1e1e1e;
  --grid-item-background: #2c2c2c;
  --grid-item-border: #444444;
  --grid-item-text: #e0e0e0;
}

.grid-stack {
  background-color: var(--grid-background);
}

.grid-stack-item-content {
  background-color: var(--grid-item-background);
  border: 1px solid var(--grid-item-border);
  color: var(--grid-item-text);
}

Этот метод позволяет мгновенно менять тему без необходимости перерисовывать сетку.

Добавление классов для тем
- Создаются CSS-классы .theme-light и .theme-dark.
- Переключение темы происходит через изменение класса контейнера сетки.
```
const gridContainer = document.querySelector('.grid-stack');
function setTheme(theme) {
  gridContainer.classList.remove('theme-light', 'theme-dark');
  gridContainer.classList.add(`theme-${theme}`);
}

setTheme('dark'); // активирует тёмную тему
```
В CSS определяется соответствующее оформление для каждой темы.

Настройка отдельных элементов сетки

Gridstack.js позволяет задавать индивидуальные стили для элементов, что особенно полезно при необходимости подсветки или визуального различия виджетов в разных темах.

const grid = GridStack.init({
  cellHeight: 80,
  verticalMargin: 10,
});

grid.addWidget({
  x: 0, y: 0, w: 2, h: 2,
  content: '<div class="grid-item">Тема-зависимый виджет</div>'
});

В CSS можно добавить:

[data-theme="dark"] .grid-item {
  background-color: #3a3a3a;
  border-color: #555555;
  color: #ffffff;
}

[data-theme="light"] .grid-item {
  background-color: #ffffff;
  border-color: #cccccc;
  color: #000000;
}

Использование атрибута data-theme обеспечивает единообразие оформления всех виджетов сетки.

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

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

const themeToggle = document.querySelector('#theme-toggle');

themeToggle.addEventListener('click', () => {
  const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
  const newTheme = currentTheme === 'light' ? 'dark' : 'light';
  document.documentElement.setAttribute('data-theme', newTheme);
});

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

Работа с виджетами и состояниями в разных темах

Перетаскиваемые и изменяемые элементы
- Цвет рамки при выделении (ui-resizable-helper) и при перетаскивании (ui-draggable-dragging) также можно адаптировать под тему:
```
[data-theme="dark"] .ui-draggable-dragging {
  border: 2px dashed #888888;
  background-color: rgba(60, 60, 60, 0.8);
}

[data-theme="light"] .ui-draggable-dragging {
  border: 2px dashed #333333;
  background-color: rgba(240, 240, 240, 0.8);
}
```
Интерактивные кнопки и элементы управления
- Gridstack.js позволяет встроить кнопки удаления, редактирования или закрепления виджетов.
- Их стили должны быть согласованы с темой сетки:
```
[data-theme="dark"] .grid-stack-item .btn {
  background-color: #555555;
  color: #ffffff;
}

[data-theme="light"] .grid-stack-item .btn {
  background-color: #eeeeee;
  color: #000000;
}
```

Поддержка пользовательских настроек и адаптивность

Gridstack.js в сочетании с темами позволяет создавать адаптивные панели управления и дашборды.
Можно комбинировать тёмную тему с анимацией перетаскивания или эффектами выделения, сохраняя удобство для глаз в ночное время.
Использование CSS-переменных обеспечивает легкое масштабирование дизайна при добавлении новых виджетов или изменении темы в реальном времени.