Інтеграція режиму "Темна тема" у React додаток з CSS Custom Properties

Інтеграція режиму “Темна тема” у React додаток з CSS Custom Properties

5 Березня 2024 в 23:50 38

В останні роки інтерес до темної теми інтерфейсу зріс не лише серед користувачів, а й серед розробників веб-та мобільних додатків. Темна тема зменшує втому очей при роботі в темний час доби та споживання енергії на пристроях з OLED/AMOLED екранами. У цій статті розглянемо, як імплементувати темну тему в React додатку, використовуючи CSS змінні для динамічної зміни стилів.

Підготовка до роботи

Перед початком роботи переконайтеся, що у вашому проєкті встановлено React і що ви маєте базове розуміння роботи з компонентами React і CSS.

Визначення CSS змінних

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

:root {
  --bg-color-light: #fff;
  --text-color-light: #333;
  --bg-color-dark: #282c34;
  --text-color-dark: #c7c7c7;
}

:root {

--bg-color-light: #fff;

--text-color-light: #333;

--bg-color-dark: #282c34;

--text-color-dark: #c7c7c7;

}

Тут ми визначили змінні для фону і тексту для світлої та темної тем.

Додавання логіки перемикання теми в React

У нашому React додатку ми можемо використати хук useState для створення стану, який буде відслідковувати поточну тему. Також, нам потрібен метод для зміни цього стану, який буде викликатися при кліку на кнопку перемикання теми.

import React, { useState } from 'react';
function App() {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };
  return (
    <div className="App" data-theme={theme}>
      <button onClick={toggleTheme}>Перемкнути тему</button>
      {/* Решта компонента */}
    </div>
  );
}
export default App;

import React, { useState } from 'react';

function App() {

const [theme, setTheme] = useState('light');

const toggleTheme = () => {

setTheme(theme === 'light' ? 'dark' : 'light');

};

return (

<button onClick={toggleTheme}>Перемкнути тему</button>

{/* Решта компонента */}

</div>

);

}

export default App;

Ми додаємо атрибут data-theme до кореневого div, який буде використовувати значення стану theme для визначення поточної теми.

Застосування темних та світлих стилів через CSS

Наступним кроком є застосування різних стилів в залежності від поточної теми. Ми можемо зробити це, використовуючи селектори атрибутів у CSS.

[data-theme='light'] {
  --bg-color: var(--bg-color-light);
  --text-color: var(--text-color-light);
}
[data-theme='dark'] {
  --bg-color: var(--bg-color-dark);
  --text-color: var(--text-color-dark);
}
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

[data-theme='light'] {

--bg-color: var(--bg-color-light);

--text-color: var(--text-color-light);

}

[data-theme='dark'] {

--bg-color: var(--bg-color-dark);

--text-color: var(--text-color-dark);

}

body {

background-color: var(--bg-color);

color: var(--text-color);

}

Тут ми змінюємо значення CSS змінних в залежності від атрибуту data-theme, що дозволяє нам динамічно змінювати кольорову схему.

Збереження вибору теми

Для покращення користувацького досвіду ми можемо зберегти вибір теми користувача у локальному сховищі браузера, щоб тема зберігалася при повторних відвідуваннях додатку.

const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
if (currentTheme) {
  document.documentElement.setAttribute('data-theme', currentTheme);
  if (currentTheme === 'dark') {
    setTheme('dark');
  }
}

const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;

if (currentTheme) {

document.documentElement.setAttribute('data-theme', currentTheme);

if (currentTheme === 'dark') {

setTheme('dark');

}

Додайте цей код у компонент App для ініціалізації теми з локального сховища при завантаженні додатку.

Висновок

Інтеграція темної теми в React додаток не є складним процесом, якщо використовувати CSS змінні та контролювати їх значення за допомогою React стану. Такий підхід дозволяє з легкістю перемикатися між темами, покращуючи користувацький досвід і адаптивність додатку. Крім того, збереження вибору теми користувача забезпечує зручність і персоналізацію, яка цінується сучасними користувачами.