Dark Mode Toggle

Dark Mode Toggle - это удобный способ переключать на темную тему на сайте. Сниппет использует CSS-переменные и локальное хранилище для сохранения выбора темы.

function setupDarkModeToggle() {
  const toggleButton = document.querySelector('#theme-toggle');
  const root = document.documentElement;
  const isDark = localStorage.getItem('theme') === 'dark';

  // Устанавливаем начальную тему
  if (isDark) {
    root.classList.add('dark');
  }

  toggleButton.addEventListener('click', () => {
    root.classList.toggle('dark');
    const newTheme = root.classList.contains('dark') ? 'dark' : 'light';
    localStorage.setItem('theme', newTheme);
  });
}

document.addEventListener('DOMContentLoaded', setupDarkModeToggle);

:root {
  --background: #ffffff;
  --text-color: #333333;
}

.dark {
  --background: #1a1a1a;
  --text-color: #ffffff;
}

body {
  background: var(--background);
  color: var(--text-color);
  transition: background 0.3s, color 0.3s;
}

👉 @sWebDev | #полезные_сниппеты

И что делать в такой ситуации?

👍 - Сидеть и упорно делать задачу (до конца рабочего дня)

❤️ - До пятницы далеко, может и подождать

👉 @sWebDev

Quicklink

Небольшая JavaScript-библиотека, предназначенная для обнаружения ссылок, которые попадают в видимую область окна браузера (вьюпорт), и автоматической предзагрузки ресурсов, на которые эти ссылки указывают. Она анализирует DOM, определяет ссылки, находящиеся в зоне видимости пользователя, и инициирует загрузку связанных ресурсов (например, изображений, скриптов или других данных), кэшируя их для ускорения последующего доступа. Это особенно полезно для оптимизации производительности веб-страниц, так как уменьшает время загрузки при переходе по ссылкам.

👉 @sWebDev

Механизм spread-оператора

Что произойдет, если применить spread-оператор к значению false внутри объекта inline-стилей в React?

Посмотреть ответ.

👉 @sWebDev