IT Загрузка..
IT Загрузка..
Читать в Telegram

Dark Mode и тема: реализация на CSS и JS 🌙

IT Загрузка..

Мы просто и по делу рассказываем про ИИ-инструменты для работы: сравнения, пошаговые гайды, бесплатные альтернативы и реальные сценарии применения. Помогаем выбрать между ChatGPT, Gemini, Claude, локальными моделями и десятками узкоспециализированных сервисов — от дизайна и HR до аналитики и SEO. Меньше хайпа, больше практики и экономии времени каждый день.

Открыть в TelegramДругие публикации
dark modecssjavascript

Тёмная тема давно стала стандартом для сайтов и веб-приложений. Она снижает нагрузку на глаза при слабом освещении, экономит заряд на OLED-экранах и улучшает UX. Но правильная реализация — это не просто “перекрасить фон в чёрный”. Разберём, как сделать dark mode удобно и без багов. 🎯

Что важно учесть

  • • поддержка системной темы пользователя
  • • ручное переключение светлой и тёмной темы
  • • сохранение выбора между сессиями
  • • корректные цвета текста, фона, кнопок и бордеров
  • • отсутствие “мигания” при загрузке страницы

1. Основа на CSS-переменных

Лучший подход — использовать CSS custom properties. Тогда тема меняется централизованно.

:root {
  --bg: #ffffff;
  --text: #111111;
  --card: #f3f3f3;
}

[data-theme="dark"] {
  --bg: #121212;
  --text: #f5f5f5;
  --card: #1e1e1e;
}

body {
  background: var(--bg);
  color: var(--text);
}

.card {
  background: var(--card);
}

Такой способ упрощает поддержку, масштабирование и добавление новых тем. ⚙️

2. Поддержка системных настроек

Если пользователь ещё не выбирал тему вручную, стоит учитывать настройки ОС:

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --text: #f5f5f5;
    --card: #1e1e1e;
  }
}

Но у этого подхода есть ограничение: он не даёт гибкого ручного переключения без JS.

3. Переключение темы через JavaScript

Обычно тема задаётся через атрибут data-theme на html или body:

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

toggle.addEventListener('click', () => {
  const isDark = root.getAttribute('data-theme') === 'dark';
  root.setAttribute('data-theme', isDark ? 'light' : 'dark');
  localStorage.setItem('theme', isDark ? 'light' : 'dark');
});

4. Сохранение выбора пользователя

Чтобы тема не сбрасывалась после перезагрузки:

const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
  document.documentElement.setAttribute('data-theme', savedTheme);
}

Это обязательный минимум для современного UI. 💾

5. Как избежать “мигания” темы

Если JS применяется слишком поздно, страница сначала покажется в светлой теме, а потом переключится в тёмную. Чтобы этого не было, скрипт применения темы ставят в <head> до рендера контента. 🚀

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

  • • не используйте чисто чёрный #000 — лучше тёмно-серые оттенки
  • • проверяйте контраст текста по WCAG
  • • отдельно тестируйте иконки, SVG и изображения
  • • не забывайте про стили hover, focus и disabled
  • • если есть UI-библиотека, проверьте её поддержку theming

Вывод

Оптимальная реализация dark mode — это CSS-переменные + data-theme + localStorage + учёт prefers-color-scheme. Такой подход даёт гибкость, хорошую производительность и удобство для пользователя. 🌗

Подборку каналов про IT стоит посмотреть тем, кто следит за фронтендом, UX и практической веб-разработкой.

🗣 Подборки каналов
🧠 Каталог ботов и приложений
🗺 Навигация

Читайте так же