Нема сумње да је мрачни мод ових дана у моди. Све више апликација нуди могућност преласка на тамну тему, и то са добрим разлогом. Ако желите да својој Реацт апликацији додате тамни режим, потребно је да урадите неколико ствари. У овом чланку ћете научити како да додате тамни режим у Реацт апликацију помоћу кукица усеСтате и усеЕффецт.

Шта је мрачни режим?

Тамни режим је тема која мења палету боја апликације са светле на тамну. Данас већина апликација има могућност пребацивања између светлих и тамних режима. Ово може бити од помоћи онима који више воле да раде у мрачном окружењу или онима којима је лакше за очи.

Зашто користити тамни режим?

Постоји неколико разлога зашто бисте можда желели да користите тамни режим у вашој Реацт апликацији. Хајде да погледамо неколико најпопуларнијих.

1. Побољшајте трајање батерије

Једна од предности тамног режима је та што може помоћи у побољшању трајања батерије на уређајима са ОЛЕД или АМОЛЕД екранима. То је зато што тамнији пиксели захтевају мање енергије за приказ.

instagram viewer

2. Смањите напрезање очију

Ако ноћу претражујете веб или користите апликације, тамни режим може помоћи у смањењу напрезања очију. То је зато што смањује количину јарке беле или плаве светлости која се емитује са екрана.

3. Створите још импресивније искуство

Неки људи сматрају да тамни режим ствара импресивније искуство. Ово може бити посебно тачно када користите апликације или веб локације са пуно садржаја, као што су апликације за вести или друштвени медији.

Како додати тамни режим у Реацт апликацију

Додавање тамног режима у Реацт апликацију је релативно једноставно. Кораци неопходни за додавање тамног режима вашој Реацт апликацији су наведени у наставку.

Пре него што почнемо, мораћете да се уверите да имате Реацт апликација је подешена.

1. Користите усеСтате Хоок

Прва ствар коју ћете морати да урадите је да креирате променљиву стања да бисте пратили тренутну тему ваше апликације. Ово се може урадити помоћу куке усеСтате. За ово би требало да имате основно разумевање како радити са куком усеСтате.

увоз Реагујте, { усеСтате } из 'реаговати';
функцијаАпликација() {
 цонст [тема, сетТхеме] = усеСтате('светлости');
повратак (
`Апп ${тхеме}`}>
<х1>Здраво Свете!</h1>
</div>
 );
}
извозУобичајено Апликација;

Исечак кода увози усеСтате куку из Реацт-а и креира променљиву стања која се зове тема. Променљива теме прати тренутну тему апликације, коју код подразумевано поставља на 'лигхт'.

2. Додајте дугме за укључивање/искључивање

Затим додајте дугме за пребацивање у апликацију тако да корисници могу да прелазе између светлих и тамних режима. Ово се може урадити помоћу следећег кода:

увоз Реагујте, { усеСтате } из 'реаговати';
функцијаАпликација() {
 цонст [тема, сетТхеме] = усеСтате('светлости');
конст тогглеТхеме = () => {
 ако (тема 'светлости') {
 сетТхеме('мрачно');
 } друго {
 сетТхеме('светлости');
 }
 };
повратак (
`Апп ${тхеме}`}>
<дугме онЦлицк={тогглеТхеме}>Пребаци тему</button>
<х1>Здраво Свете!</h1>
</div>
 );
}
извозУобичајено Апликација;

Исечак кода изнад укључује функцију тогглеТхеме за промену променљиве стања теме између „светло“ и „тамно“, као и дугме за позивање функције тогглеТхеме када се кликне.

3. Користите усеЕффецт Хоок

Затим користите усеЕффецт куку да динамички ажурирате тему апликације на основу променљиве стања теме.

увоз Реагујте, { усеСтате, усеЕффецт } из 'реаговати';
функцијаАпликација() {
 цонст [тема, сетТхеме] = усеСтате('светлости');
конст тогглеТхеме = () => {
 ако (тема 'светлости') {
 сетТхеме('мрачно');
 } друго {
 сетТхеме('светлости');
 }
 };
 усеЕффецт(() => {
документ.боди.цлассНаме = тема;
 }, [тема]);
повратак (
`Апп ${тхеме}`}>
<дугме онЦлицк={тогглеТхеме}>Пребаци тему</button>
<х1>Здраво Свете!</h1>
</div>
 );
}
извозУобичајено Апликација;

Исечак кода изнад користи усеЕффецт куку за ажурирање цлассНаме елемента доцумент.боди на основу променљиве стања теме. Ово вам омогућава да динамички ажурирате ЦСС апликације на основу теме.

4. Додавање ЦСС-а за тамне и светле режиме

Затим додајте ЦСС за тамни и светли режим. То можете учинити тако што ћете креирати датотеку под називом 'даркМоде.цсс' и додати следећи ЦСС:

.тамно {
 боја позадине: #333;
 боја: #ффф;
}
.лигхт {
 боја позадине: #ффф;
 боја: #333;
}

Након тога, мораћете да увезете ЦСС датотеку у своју апликацију. Ово се може урадити помоћу следећег кода:

увоз Реагујте, { усеСтате, усеЕффецт } из 'реаговати';
увоз './даркМоде.цсс';
функцијаАпликација() {
 цонст [тема, сетТхеме] = усеСтате('светлости');
конст тогглеТхеме = () => {
 ако (тема 'светлости') {
 сетТхеме('мрачно');
 } друго {
 сетТхеме('светлости');
 }
 };
 усеЕффецт(() => {
документ.боди.цлассНаме = тема;
 }, [тема]);
повратак (
`Апп ${тхеме}`}>
<дугме онЦлицк={тогглеТхеме}>Пребаци тему</button>
<х1>Здраво Свете!</h1>
</div>
 );
}
извозУобичајено Апликација;

5. Пребаците се на различите режиме

Сада када сте додали ЦСС за тамни и светли режим, можете да прелазите између њих кликом на дугме за пребацивање. Да бисте то урадили, прво морате да покренете развојни сервер. То можете учинити тако што ћете покренути следећу наредбу терминала:

нпм почетак

Након тога, можете отворити апликацију у претраживачу и кликнути на дугме за пребацивање између тамног и светлог режима.

Додатне опције за тамни режим у Реацт-у

Ако желите да тема траје током освежавања странице, можете користите локалниСтораге АПИ за складиштење података. Да бисте то урадили, прво ћете морати да додате следећи код у своју апликацију:

увоз Реагујте, { усеСтате, усеЕффецт } из 'реаговати';
увоз './даркМоде.цсс';
функцијаАпликација() {
конст [тема, сетТхеме] = усеСтате(
 лоцалСтораге.гетИтем('тема') || 'светлости'
 );
конст тогглеТхеме = () => {
 ако (тема 'светлости') {
 сетТхеме('мрачно');
 } друго {
 сетТхеме('светлости');
 }
 };
 усеЕффецт(() => {
 лоцалСтораге.сетИтем('тема', тема);
документ.боди.цлассНаме = тема;
 }, [тема]);
повратак (
`Апп ${тхеме}`}>
<дугме онЦлицк={тогглеТхеме}>Пребаци тему</button>
<х1>Здраво Свете!</h1>
</div>
 );
}
извозУобичајено Апликација;

Исечак кода изнад укључује могућност да се тема задржи након освежавања странице. Ово се ради коришћењем локалногСтораге АПИ-ја. Прво, проверава да ли постоји тема ускладиштена у лоцалСтораге.

Ако постоји тема, она се користи. Ако није, користи се 'светла' тема. Затим, код се додаје у усеЕффецт куку за чување теме у лоцалСтораге. Ово осигурава да се тема задржи током освежавања странице.

Тамни режим се не завршава у Реацт-у

Постоји много начина на које можете додати тамни режим у своју Реацт апликацију. У овом чланку је приказан један начин да се то уради помоћу кукица усеСтате и усеЕффецт. Међутим, постоји много других начина на које то можете учинити.

На пример, можете користити Реацт Цонтект АПИ да креирате добављача теме. Ово би вам омогућило да умотате целу апликацију у компоненту добављача теме и приступите теми било где у вашој апликацији.

Такође можете да омогућите тамни режим у свом претраживачу и да користите ЦСС медијске упите за примену различитих стилова у зависности од теме прегледача.