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

Контекстът на React е лесен начин за глобално споделяне на данни, но може да направи повторното използване на компонентите по-трудно. Като алтернатива можете да създадете компонент на бутон за тъмен режим, който използва кукичките useEffect и useState вместо контекст. Той ще превключва атрибут на данни в елемента body, към който могат да се насочват CSS стиловете.

Какво ще ви е необходимо

За да следвате този урок, ще ви трябва следното:

  • Скорошна версия на Node, инсталирана на вашата машина.
  • Основно разбиране на React и Реагирайте куките.
  • Начален React проект. Просто създайте приложение React и сте готови да тръгнете.

Създайте компонент на бутон

Компонентът на бутона ще отговаря за превключването на темата от тъмна към светла. В реално приложение този бутон може да е част от компонента Navbar.

instagram viewer

В папката src създайте нов файл с име Button.js и добавете следния код.

импортиране {useState} от "реагира"
износпо подразбиранефункцияБутон() {
 const [тема, settheme] = useState("тъмно")
конст handleToggle = () => {
 const newTheme = тема "светлина"? "тъмно": "светлина"
 задаване на тема (нова тема)
 }
връщане (
<>
<бутон className="themeBtn" onClick={handleToggle}>
 {тема "светлина"? <педя>тъмно</span>: <педя>светлина</span>}
</button>
</>
 )
}

Първо импортирайте куката useState() от React. Ще го използвате, за да следите текущата тема.

В компонента Button инициализирайте състоянието на тъмно. Функцията handleToggle() ще се погрижи за функционалността за превключване. Той се изпълнява всеки път, когато се щракне върху бутона.

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

За да покажете компонента Button, импортирайте го в App.js.

импортиране Бутон от './Бутон';
функцияПриложение() {
връщане (
<див>
<Бутон/>
</div>
 );
}
износпо подразбиране Приложение;

Създайте CSS стилове

В момента щракването върху бутона не променя потребителския интерфейс на приложението React. За целта първо ще трябва да създадете CSS стилове за тъмен и светъл режим.

В App.css добавете следното.

тяло {
 --color-text-primary: #131616;
 --color-text-secondary: #ff6b00;
 --color-bg-primary: #E6EDEE;
 --color-bg-secondary: #7d86881c;
 заден план: вар(--color-bg-primary);
 цвят: вар(--цветен-текст-основен);
преход: заден план 0.25sлекота на влизане и излизане;
}
тяло [данни-тема="светлина"] {
 --color-text-primary: #131616;
 --color-bg-primary: #E6EDEE;
}
тяло [данни-тема="тъмно"] {
 --color-text-primary: #F2F5F7;
 --color-bg-primary: #0E141B;
}

Тук дефинирате стиловете на елемента body с помощта на атрибути на данни. Има атрибут за данни за светла тема и атрибут за данни за тъмна тема. Всеки от тях има CSS променливи с различни цветове. Използването на CSS атрибути на данни ще ви позволи да превключвате стиловете според данните. Ако потребител избере тъмна тема, можете да зададете атрибута за данни на тялото на тъмен и потребителският интерфейс ще се промени.

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

.themeBtn {
 подложка: 10px;
 цвят: вар(--цветен-текст-основен);
 фон: прозрачен;
 граница: 1px твърди вар(--цветен-текст-основен);
 курсор: показалец;
}

Промяна на компонента на бутона за превключване на стилове

За да превключите стиловете, дефинирани в CSS файла, ще трябва да зададете данните в елемента body във функцията handleToggle().

В Button.js променете handleToggle() по този начин:

конст handleToggle = () => {
 const newTheme = тема "светлина"? "тъмно": "светлина"
 задаване на тема (нова тема)
документ.body.dataset.theme = тема
}

Ако щракнете върху бутона, фонът трябва да се превключи от тъмен на светъл или светъл на тъмен. Ако обаче опресните страницата, темата се нулира. За да запазите настройката на темата, запазете предпочитанието за тема в локално хранилище.

Постоянни потребителски предпочитания в локално хранилище

Трябва да извлечете потребителското предпочитание веднага щом компонентът Button се изобрази. Куката useEffect() е идеална за това, тъй като се изпълнява след всяко изобразяване.

Преди да извлечете темата от локалното хранилище, първо трябва да я съхраните.

Създайте нова функция, наречена storeUserPreference() в Button.js.

конст storeUserSetPreference = (pref) => {
 localStorage.setItem("тема", предпочитание);
};

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

Ще извиквате тази функция всеки път, когато потребителят превключва темата. Така че, променете функцията handleToggle(), за да изглежда така:

конст handleToggle = () => {
 const newTheme = тема "светлина"? "тъмно": "светлина"
 задаване на тема (нова тема)
 storeUserSetPreference (нова тема)
документ.body.dataset.theme = тема
}

Следната функция извлича темата от локално хранилище:

конст getUserSetPreference = () => {
 връщане на localStorage.getItem("тема");
};

Ще го използвате в куката useEffect, така че всеки път, когато компонентът се изобразява, той извлича предпочитанията от локалното хранилище за актуализиране на темата.

useEffect(() => {
конст userSetPreference = getUserSetPreference();
if (userSetPreference) {
 settheme (userSetPreference)
 }
документ.body.dataset.theme = тема
}, [тема])

Получаване на потребителски предпочитания от настройките на браузъра

За още по-добро потребителско изживяване можете да използвате предпочита-цветова-схема CSS медийна функция за задаване на темата. Това трябва да отразява системните настройки на потребителя, които той може да контролира чрез своята операционна система или браузър. Настройката може да бъде светла или тъмна. Във вашето приложение ще трябва да проверите тази настройка веднага след зареждането на компонента на бутона. Това означава прилагане на тази функционалност в куката useEffect().

Първо създайте функция, която извлича потребителските предпочитания.

В Button.js добавете следното.

конст getMediaQueryPreference = () => {
 const mediaQuery = "(предпочита цветова схема: тъмен)";
конст mql = прозорец.matchMedia (mediaQuery);
конст hasPreference = тип mql.съвпада с "булев";
if (hasPreference) {
 връщане на mql.matches? "тъмно": "светлина";
 }
};

След това променете куката useEffect(), за да извлечете предпочитанието за медийна заявка и да го използвате, ако в локалното хранилище не е зададена тема.

useEffect(() => {
конст userSetPreference = getUserSetPreference();
конст mediaQueryPreference = getMediaQueryPreference();
if (userSetPreference) {
 settheme (userSetPreference)
 } друго {
 settheme (mediaQueryPreference)
 }
документ.body.dataset.theme = тема
}, [тема])

Ако рестартирате приложението си, темата трябва да съответства на настройките на вашата система.

Използване на React Context за превключване на тъмен режим

Можете да използвате атрибути на данни, CSS и React кукички, за да превключвате темата на React приложение.

Друг подход за работа с тъмен режим в React е използването на контекстния API. Контекстът на React ви позволява да споделяте данни между компоненти, без да се налага да ги предавате през подпори. Когато го използвате за превключване на теми, създавате контекст на тема, до който имате достъп в цялото приложение. След това можете да използвате стойността на темата, за да приложите съответстващи стилове.

Докато този подход работи, използването на CSS атрибути на данни е по-лесно.