Постало је популарно да апликације имају поставку која вам омогућава да прелазите између тамног и светлог режима. Можда је то због популарности тамних корисничких интерфејса, можда зато што апликације постепено постају све прилагодљивије.
Реацт контекст је једноставан начин глобалне дељења података, али може отежати поновну употребу компоненти. Као алтернативу, можете да направите компоненту дугмета тамног режима која користи кукице усеЕффецт и усеСтате уместо контекста. Он ће променити атрибут података на елементу тела који ЦСС стилови могу да циљају.
Шта ће вам требати
Да бисте пратили овај водич, требаће вам следеће:
- Најновија верзија Ноде-а инсталирана на вашој машини.
- Основно разумевање Реацт-а и Реаговати куке.
- Почетни Реацт пројекат. Само направите Реацт апликацију и спремни сте да кренете.
Направите компоненту дугмета
Компонента дугмета ће бити одговорна за пребацивање теме са тамне на светлу. У стварној апликацији, ово дугме може бити део Навбар компоненте.
У фасцикли срц креирајте нову датотеку под називом Буттон.јс и додајте следећи код.
увоз { усеСтате } из 'реаговати'извозУобичајенофункцијаДугме() {
цонст [тема, сеттхеме] = усеСтате("мрачно")
конст хандлеТоггле = () => {
цонст новаТема = тема "светлости"? "мрачно": "светлости"
сеттхеме (новаТхеме)
}
повратак (
<>
<дугме Име класе="тхемеБтн" онЦлицк={хандлеТоггле}>
{тхеме "светлости"? <спан>мрачно</span>: <спан>светлости</span>}
</button>
</>
)
}
Прво увезите усеСтате() куку из Реацт-а. Користићете га за праћење тренутне теме.
У компоненти дугмета иницијализујте стање на тамно. Функција хандлеТоггле() ће се побринути за функционалност пребацивања. Покреће се сваки пут када се кликне на дугме.
Ова компонента такође мења текст дугмета када мења тему.
Да бисте приказали компоненту дугмета, увезите је у Апп.јс.
увоз Дугме из './Буттон';
функцијаАпликација() {
повратак (
<див>
<Дугме/>
</div>
);
}
извозУобичајено Апликација;
Креирајте ЦСС стилове
Тренутно, кликом на дугме не мења се кориснички интерфејс апликације Реацт. За то ћете прво морати да креирате ЦСС стилове за тамни и светли режим.
У Апп.цсс додајте следеће.
тело {
--цолор-тект-примари: #131616;
--боја-текст-секундарни: #фф6б00;
--цолор-бг-примари: #Е6ЕДЕЕ;
--цолор-бг-сецондари: #7д86881ц;
позадина: вар(--цолор-бг-примари);
боја: вар(--боја-текст-примарни);
прелаз: позадини 0.25слакоћа уласка;
}
тело[подаци-тема="светлости"] {
--цолор-тект-примари: #131616;
--цолор-бг-примари: #Е6ЕДЕЕ;
}
тело[подаци-тема="мрачно"] {
--цолор-тект-примари: #Ф2Ф5Ф7;
--цолор-бг-примари: #0Е141Б;
}
Овде дефинишете стилове елемента тела користећи атрибуте података. Постоји атрибут података светле теме и атрибут података тамне теме. Свака од њих има ЦСС променљиве са различитим бојама. Коришћење ЦСС атрибута података ће вам омогућити да промените стилове у складу са подацима. Ако корисник одабере тамну тему, можете да подесите атрибут података о телу на тамну и кориснички интерфејс ће се променити.
Такође можете да измените стилове елемената дугмета да бисте их променили са темом.
.тхемеБтн {
паддинг: 10пк;
боја: вар(--боја-текст-примарни);
позадина: транспарентна;
граница: 1пк солид вар(--боја-текст-примарни);
курсор: показивач;
}
Измените компоненту дугмета да бисте укључили стилове
Да бисте променили стилове дефинисане у ЦСС датотеци, мораћете да подесите податке у елементу тела у функцији хандлеТоггле().
У Буттон.јс, измените хандлеТоггле() овако:
конст хандлеТоггле = () => {
цонст новаТема = тема "светлости"? "мрачно": "светлости"
сеттхеме (новаТхеме)
документ.боди.датасет.тхеме = тхеме
}
Ако кликнете на дугме, позадина би требало да се мења са тамне на светлу или светлу на тамну. Међутим, ако освежите страницу, тема се ресетује. Да бисте задржали подешавање теме, сачувајте жељену тему локално складиште.
Трајна корисничка подешавања у локалној меморији
Требало би да преузмете корисничка подешавања чим се компонента дугмета прикаже. УсеЕффецт() кука је савршена за ово јер се покреће након сваког рендеровања.
Пре него што преузмете тему из локалне меморије, прво је морате сачувати.
Креирајте нову функцију под називом стореУсерПреференце() у Буттон.јс.
конст стореУсерСетПреференце = (преф) => {
лоцалСтораге.сетИтем("тема", преф);
};
Ова функција прима преференцију корисника као аргумент и чува је као ставку која се зове тема.
Ову функцију ћете позвати сваки пут када корисник промени тему. Дакле, модификујте функцију хандлеТоггле() да изгледа овако:
конст хандлеТоггле = () => {
цонст новаТема = тема "светлости"? "мрачно": "светлости"
сеттхеме (новаТхеме)
стореУсерСетПреференце (новаТхеме)
документ.боди.датасет.тхеме = тхеме
}
Следећа функција преузима тему из локалне меморије:
конст гетУсерСетПреференце = () => {
ретурн лоцалСтораге.гетИтем("тема");
};
Користићете га у кукици усеЕффецт тако да сваки пут када се компонента рендерује, преузима преференцију из локалне меморије да ажурира тему.
усеЕффецт(() => {
конст усерСетПреференце = гетУсерСетПреференце();
иф (усерСетПреференце) {
сеттхеме (усерСетПреференце)
}
документ.боди.датасет.тхеме = тхеме
}, [тема])
Добијање корисничких преференција из подешавања претраживача
За још боље корисничко искуство, можете користити преферс-цолор-сцхеме ЦСС медијска функција за постављање теме. Ово би требало да одражава системске поставке корисника које могу да контролишу преко свог ОС-а или претраживача. Поставка може бити светла или тамна. У вашој апликацији, требало би да проверите ово подешавање одмах након што се компонента дугмета учита. То значи имплементацију ове функционалности у усеЕффецт() куку.
Прво, креирајте функцију која преузима корисничка подешавања.
У Буттон.јс додајте следеће.
конст гетМедиаКуериПреференце = () => {
цонст медиаКуери = "(преферира шему боја: тамна)";
конст мкл = прозор.матцхМедиа (медиаКуери);
конст хасПреференце = тип мкл.подудара "боолеан";
иф (хасПреференце) {
ретурн мкл.матцхес? "мрачно": "светлости";
}
};
Затим модификујте усеЕффецт() закачицу да бисте преузели преференцију упита медија и користите је ако ниједна тема није постављена у локалној меморији.
усеЕффецт(() => {
конст усерСетПреференце = гетУсерСетПреференце();
конст медиаКуериПреференце = гетМедиаКуериПреференце();иф (усерСетПреференце) {
сеттхеме (усерСетПреференце)
} друго {
сеттхеме (медиаКуериПреференце)
}
документ.боди.датасет.тхеме = тхеме
}, [тема])
Ако поново покренете апликацију, тема би требало да одговара подешавањима вашег система.
Коришћење Реацт Цонтект-а за укључивање/искључивање тамног режима
Можете да користите атрибуте података, ЦСС и Реацт куке да бисте променили тему Реацт апликације.
Други приступ руковању тамним режимом у Реацт-у је коришћење контекстног АПИ-ја. Реацт контекст вам омогућава да делите податке између компоненти без потребе да их преносите кроз пропс. Када га користите за пребацивање тема, креирате контекст теме којем можете приступити у целој апликацији. Затим можете да користите вредност теме да примените одговарајуће стилове.
Иако овај приступ функционише, коришћење ЦСС атрибута података је једноставније.