Няма съмнение, че тъмният режим е на мода в наши дни. Все повече приложения предлагат възможност за превключване към тъмна тема и има защо. Ако искате да добавите тъмен режим към вашето приложение React, има няколко неща, които трябва да направите. В тази статия ще научите как да добавите тъмен режим към приложение на React с помощта на куките useState и useEffect.

Какво представлява тъмният режим?

Тъмният режим е тема, която превключва цветовата палитра на приложение от светла към тъмна. В днешно време повечето приложения имат възможност за превключване между светъл и тъмен режим. Това може да бъде полезно за тези, които предпочитат да работят в тъмна среда, или за тези, които смятат, че е по-лесно за очите.

Защо да използвате тъмен режим?

Има редица причини, поради които може да искате да използвате тъмен режим във вашето приложение React. Нека да разгледаме някои от най-популярните.

1. Подобрете живота на батерията

Едно от предимствата на тъмния режим е, че може да помогне за подобряване на живота на батерията на устройства с OLED или AMOLED дисплеи. Това е така, защото по-тъмните пиксели изискват по-малко енергия за показване.

instagram viewer

2. Намалете напрежението на очите

Ако откриете, че сърфирате в интернет или използвате приложения през нощта, тъмният режим може да помогне за намаляване на напрежението в очите. Това е така, защото намалява количеството ярка бяла или синя светлина, която се излъчва от екрана.

3. Създайте по-завладяващо изживяване

Някои хора смятат, че тъмният режим създава по-завладяващо изживяване. Това може да е особено вярно, когато използвате приложения или уебсайтове с много съдържание, като новинарски приложения или социални медии.

Как да добавите тъмен режим към приложение на React

Добавянето на тъмен режим към приложение на React е сравнително лесно. Стъпките, необходими за добавяне на тъмен режим към вашето приложение React, са изброени по-долу.

Преди да започнем, ще трябва да се уверите, че имате Приложението React е настроено.

1. Използвайте куката useState

Първото нещо, което трябва да направите, е да създадете променлива на състоянието, за да проследявате текущата тема на вашето приложение. Това може да стане с помощта на куката useState. За това трябва да имате основно разбиране за как да работите с куката useState.

импортиране Реагирайте, {useState} от 'реагира';
функцияПриложение() {
 const [тема, setTheme] = useState('светлина');
връщане (
`Приложение ${тема}`}>
<h1>Здравей свят!</h1>
</div>
 );
}
износпо подразбиране Приложение;

Кодовият фрагмент импортира куката useState от React и създава променлива на състоянието, наречена theme. Променливата на темата проследява текущата тема на приложението, която кодът задава на „светла“ по подразбиране.

2. Добавяне на бутон за превключване

След това добавете бутон за превключване към приложението, така че потребителите да могат да превключват между светъл и тъмен режим. Това може да стане със следния код:

импортиране Реагирайте, {useState} от 'реагира';
функцияПриложение() {
 const [тема, setTheme] = useState('светлина');
конст toggleTheme = () => {
 ако (тема 'светлина') {
 setTheme('тъмно');
 } друго {
 setTheme('светлина');
 }
 };
връщане (
`Приложение ${тема}`}>
<бутон onClick={toggleTheme}>Превключване на темата</button>
<h1>Здравей свят!</h1>
</div>
 );
}
износпо подразбиране Приложение;

Кодовият фрагмент по-горе включва функция toggleTheme за промяна на променливата на състоянието на темата между „светло“ и „тъмно“, както и бутон за извикване на функцията toggleTheme при щракване.

3. Използвайте useEffect Hook

След това използвайте куката useEffect, за да актуализирате динамично темата на приложението въз основа на променливата на състоянието на темата.

импортиране Реагирайте, {useState, useEffect} от 'реагира';
функцияПриложение() {
 const [тема, setTheme] = useState('светлина');
конст toggleTheme = () => {
 ако (тема 'светлина') {
 setTheme('тъмно');
 } друго {
 setTheme('светлина');
 }
 };
 useEffect(() => {
документ.body.className = тема;
 }, [тема]);
връщане (
`Приложение ${тема}`}>
<бутон onClick={toggleTheme}>Превключване на темата</button>
<h1>Здравей свят!</h1>
</div>
 );
}
износпо подразбиране Приложение;

Кодовият фрагмент по-горе използва куката useEffect, за да актуализира className на елемента document.body въз основа на променливата на състоянието на темата. Това ви позволява динамично да актуализирате CSS на приложението въз основа на темата.

4. Добавяне на CSS за тъмен и светъл режими

След това добавете CSS за тъмния и светлия режим. Можете да направите това, като създадете файл, наречен „darkMode.css“ и добавите следния CSS:

.тъмно {
 Цвят на фона: #333;
 цвят: #Ф ф ф;
}
.светлина {
 Цвят на фона: #Ф ф ф;
 цвят: #333;
}

След това ще трябва да импортирате CSS файла във вашето приложение. Това може да стане със следния код:

импортиране Реагирайте, {useState, useEffect} от 'реагира';
импортиране './darkMode.css';
функцияПриложение() {
 const [тема, setTheme] = useState('светлина');
конст toggleTheme = () => {
 ако (тема 'светлина') {
 setTheme('тъмно');
 } друго {
 setTheme('светлина');
 }
 };
 useEffect(() => {
документ.body.className = тема;
 }, [тема]);
връщане (
`Приложение ${тема}`}>
<бутон onClick={toggleTheme}>Превключване на темата</button>
<h1>Здравей свят!</h1>
</div>
 );
}
износпо подразбиране Приложение;

5. Превключване към различни режими

Сега, след като сте добавили CSS за тъмния и светлия режим, можете да превключвате между тях, като щракнете върху бутона за превключване. За да направите това, първо трябва да стартирате сървъра за разработка. Можете да направите това, като изпълните следната терминална команда:

npm започнете

След това можете да отворите приложението в браузъра и да щракнете върху бутона за превключване, за да превключвате между тъмен и светъл режим.

Допълнителни опции за тъмен режим в React

Ако искате темата да се запази при опресняване на страницата, можете използвайте API на localStorage за съхраняване на данните. За да направите това, първо трябва да добавите следния код към вашето приложение:

импортиране Реагирайте, {useState, useEffect} от 'реагира';
импортиране './darkMode.css';
функцияПриложение() {
конст [тема, setTheme] = useState(
 localStorage.getItem('тема') || 'светлина'
 );
конст toggleTheme = () => {
 ако (тема 'светлина') {
 setTheme('тъмно');
 } друго {
 setTheme('светлина');
 }
 };
 useEffect(() => {
 localStorage.setItem('тема', тема);
документ.body.className = тема;
 }, [тема]);
връщане (
`Приложение ${тема}`}>
<бутон onClick={toggleTheme}>Превключване на темата</button>
<h1>Здравей свят!</h1>
</div>
 );
}
износпо подразбиране Приложение;

Кодовият фрагмент по-горе включва възможността за запазване на темата след опресняване на страницата. Това се прави с помощта на API на localStorage. Първо, той проверява дали има тема, съхранена в localStorage.

Ако има тема, тя се използва. Ако не, се използва „светлата“ тема. След това се добавя код към куката useEffect за съхраняване на темата в localStorage. Това гарантира, че темата се запазва при опресняване на страницата.

Тъмният режим не свършва в React

Има много начини, по които можете да добавите тъмен режим към вашето приложение React. В тази статия е показан един начин да го направите с помощта на куките useState и useEffect. Има обаче и много други начини, по които можете да го направите.

Например, можете да използвате React Context API, за да създадете доставчик на тема. Това ще ви позволи да опаковате цялото си приложение в компонент на доставчик на тема и да имате достъп до темата навсякъде във вашето приложение.

Можете също да активирате тъмен режим на вашия браузър и да използвате CSS медийни заявки, за да приложите различни стилове в зависимост от темата на браузъра.