Як створити та налаштувати темну тему з CSS Variables

Веб-розробка, CSS  · 

Темна тема стала популярною серед користувачів завдяки її здатності зменшувати навантаження на очі, особливо в умовах низького освітлення. З CSS Variables створення та налаштування темної теми стало набагато простішим. Це дозволяє розробникам легко керувати кольоровими схемами без необхідності повторного написання стилів для кожного елемента.

CSS Variables: Основи

CSS Variables, також відомі як кастомні властивості, дозволяють зберігати значення в змінних, які потім можна використовувати в стилях. Вони визначаються за допомогою двох дефісів перед назвою змінної, наприклад, --primary-color. Це особливо корисно для створення тем, оскільки всі кольорові значення можна зберігати в одному місці і легко змінювати.

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

У цьому прикладі ми оголошуємо дві змінні: --background-color і --text-color, які визначають кольорову гаму для світлої теми.

Створення темної теми

Щоб створити темну тему, ми можемо визначити інший набір змінних, які будуть використовуватися при активації темної теми. Це дозволяє легко перемикатися між темами, змінюючи лише значення змінних.

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

.dark-theme {
  --background-color: #333333;
  --text-color: #ffffff;
}

Тепер, коли клас dark-theme додається до елемента body, кольори змінюються відповідно до визначених змінних для темної теми.

Налаштування теми за допомогою JavaScript

Для динамічного перемикання між світлою та темною темами можна використовувати JavaScript. Це дозволяє користувачам самостійно обирати бажану тему.

const toggleThemeButton = document.querySelector('#toggle-theme');
toggleThemeButton.addEventListener('click', () => {
  document.body.classList.toggle('dark-theme');
});

У цьому прикладі, при натисканні на кнопку з ідентифікатором toggle-theme, клас dark-theme додається або видаляється з елемента body, активуючи відповідну тему.

Додаткові налаштування

Можна також додати збереження вибору теми користувача в localStorage, щоб зберегти налаштування навіть після перезавантаження сторінки. Це покращує користувацький досвід, зберігаючи індивідуальні налаштування.

const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
  document.body.classList.add(currentTheme);
}

toggleThemeButton.addEventListener('click', () => {
  document.body.classList.toggle('dark-theme');
  const theme = document.body.classList.contains('dark-theme') ? 'dark-theme' : 'light-theme';
  localStorage.setItem('theme', theme);
});

Тепер після перезавантаження сторінки обрана користувачем тема буде автоматично застосована. Налаштування темної теми з CSS Variables та JavaScript є простим та ефективним способом покращити інтерфейс вебсайту.