Темная тема

Темная тема в пользовательских интерфейсах на базе Slim Select строится вокруг переопределения стандартных CSS-стилей библиотеки и согласования цветовой палитры с общей дизайн-системой проекта. Поскольку Slim Select генерирует собственную DOM-структуру поверх стандартного <select>, контроль внешнего вида полностью сосредоточен в CSS-слое, что делает реализацию тёмного оформления гибкой и предсказуемой.

Slim Select использует набор классов, которые формируют визуальные части компонента:

  • .ss-main — основной контейнер
  • .ss-single — однострочный режим выбора
  • .ss-multi — мультивыбор
  • .ss-content — выпадающий список
  • .ss-list — список опций
  • .ss-option — отдельный элемент опции
  • .ss-value — выбранное значение
  • .ss-search — поле поиска внутри dropdown

Темная тема достигается переопределением именно этих классов.

Базовые принципы темной темы

Темная тема в UI-компонентах строится на трех ключевых параметрах:

  • фон элементов становится темным
  • текст становится светлым
  • акцентные состояния сохраняют контрастность

Для Slim Select важно дополнительно учитывать состояния:

  • hover
  • selected
  • disabled
  • focus
  • search input active

Базовая палитра темной темы

Типичная цветовая схема:

:root {
  --ss-bg: #1e1e2f;
  --ss-bg-light: #2a2a3d;
  --ss-border: #3a3a55;
  --ss-text: #e6e6f0;
  --ss-muted: #a0a0b3;
  --ss-accent: #6c7cff;
}

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

Основной контейнер

Главный элемент .ss-main определяет общий внешний вид селекта:

.ss-main {
  background-color: var(--ss-bg);
  border: 1px solid var(--ss-border);
  color: var(--ss-text);
  border-radius: 8px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

При фокусе важно усилить контраст:

.ss-main:focus,
.ss-main.ss-open {
  border-color: var(--ss-accent);
  box-shadow: 0 0 0 2px rgba(108, 124, 255, 0.25);
}

Выпадающий список

Контейнер .ss-content формирует dropdown-область:

.ss-content {
  background-color: var(--ss-bg-light);
  border: 1px solid var(--ss-border);
  border-radius: 8px;
  margin-top: 6px;
  overflow: hidden;
}

Список опций:

.ss-list {
  background-color: transparent;
}

Элементы опций

Каждая опция .ss-option требует отдельной стилизации состояний:

.ss-option {
  color: var(--ss-text);
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

Hover-состояние:

.ss-option:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

Выбранный элемент:

.ss-option.ss-selected {
  background-color: rgba(108, 124, 255, 0.2);
  color: #ffffff;
}

Неактивный элемент:

.ss-option.ss-disabled {
  color: var(--ss-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

Поле поиска внутри dropdown

Slim Select поддерживает встроенный search input, который требует отдельного оформления:

.ss-search input {
  width: 100%;
  padding: 10px 12px;
  background-color: var(--ss-bg);
  border: 1px solid var(--ss-border);
  color: var(--ss-text);
  outline: none;
  border-radius: 6px;
}

Фокус поиска:

.ss-search input:focus {
  border-color: var(--ss-accent);
  box-shadow: 0 0 0 2px rgba(108, 124, 255, 0.2);
}

Мультивыбор и теги

В режиме multi-select выбранные элементы отображаются как “теги”:

.ss-value {
  background-color: rgba(108, 124, 255, 0.15);
  color: var(--ss-text);
  padding: 4px 8px;
  border-radius: 6px;
  margin: 2px;
  display: inline-flex;
  align-items: center;
}

Кнопка удаления значения:

.ss-value-delete {
  margin-left: 6px;
  cursor: pointer;
  color: var(--ss-muted);
}

.ss-value-delete:hover {
  color: #ffffff;
}

Состояние disabled

Отключённый селект требует явного визуального снижения контраста:

.ss-main.ss-disabled {
  background-color: #151522;
  border-color: #2a2a3d;
  color: var(--ss-muted);
  opacity: 0.7;
  cursor: not-allowed;
}

Скролл внутри dropdown

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

.ss-content {
  max-height: 260px;
  overflow-y: auto;
}

Стилизация скроллбара в темной теме:

.ss-content::-webkit-scrollbar {
  width: 8px;
}

.ss-content::-webkit-scrollbar-track {
  background: #1a1a28;
}

.ss-content::-webkit-scrollbar-thumb {
  background: #3a3a55;
  border-radius: 4px;
}

.ss-content::-webkit-scrollbar-thumb:hover {
  background: #4a4a6a;
}

Анимации и плавность

Темная тема часто воспринимается “тяжелее”, поэтому важно сохранить лёгкие переходы:

.ss-content {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.ss-open .ss-content {
  opacity: 1;
  transform: translateY(0);
}

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

При наличии системного переключателя темы можно использовать data-атрибуты:

[data-theme="dark"] {
  --ss-bg: #1e1e2f;
  --ss-bg-light: #2a2a3d;
  --ss-border: #3a3a55;
  --ss-text: #e6e6f0;
  --ss-muted: #a0a0b3;
}

И переключение без изменения самих стилей Slim Select:

[data-theme="dark"] .ss-main {
  background-color: var(--ss-bg);
}

Поддержка компактных интерфейсов

В плотных интерфейсах темная тема часто требует уменьшения визуального шума:

.ss-main {
  border-width: 1px;
}

.ss-option {
  padding: 8px 10px;
}

.ss-content {
  border-radius: 6px;
}

Контраст и доступность

При проектировании темной темы важно удерживать минимальный коэффициент контрастности между текстом и фоном. Для Slim Select это особенно критично в элементах:

  • .ss-option
  • .ss-search input
  • .ss-value

Повышение читаемости достигается за счет:

  • увеличения яркости текста
  • уменьшения насыщенности фона
  • добавления мягких границ вместо плотных заливок

Расширяемая модель темной темы

Slim Select хорошо сочетается с модульной системой CSS, где каждая часть интерфейса управляется отдельной переменной или слоем:

.ss-main,
.ss-content,
.ss-option,
.ss-search input,
.ss-value {
  transition: all 0.2s ease;
}

Такой подход позволяет масштабировать тему без переработки структуры DOM и без вмешательства в JavaScript-логику компонента.

Оглавление