Karanlık modun bu günlerde tüm öfke olduğuna şüphe yok. Gittikçe daha fazla uygulama karanlık bir temaya geçme yeteneği sunuyor ve bunun iyi bir nedeni var. React uygulamanıza karanlık mod eklemek istiyorsanız yapmanız gereken birkaç şey var. Bu makalede, useState ve useEffect kancalarını kullanarak bir React uygulamasına karanlık modu nasıl ekleyeceğinizi öğreneceksiniz.

Karanlık Mod Nedir?

Karanlık mod, bir uygulamanın renk paletini açıktan koyuya geçiren bir temadır. Günümüzde çoğu uygulama, aydınlık ve karanlık modlar arasında geçiş yapma yeteneğine sahiptir. Bu, karanlık bir ortamda çalışmayı tercih edenler veya gözleri daha kolay bulanlar için yararlı olabilir.

Neden Karanlık Modu Kullanmalı?

React uygulamanızda karanlık modu kullanmak istemenizin birkaç nedeni olabilir. En popüler olanlardan birkaçına göz atalım.

1. Pil Ömrünü İyileştirin

Karanlık modun faydalarından biri, OLED veya AMOLED ekranlı cihazlarda pil ömrünü iyileştirmeye yardımcı olabilmesidir. Bunun nedeni, daha koyu piksellerin görüntülenmesi için daha az güç gerektirmesidir.

instagram viewer

2. Göz Yorgunluğunu Azaltın

Kendinizi geceleri internette gezinirken veya uygulamaları kullanırken bulursanız, karanlık mod göz yorgunluğunu azaltmaya yardımcı olabilir. Bunun nedeni, ekrandan yayılan parlak beyaz veya mavi ışık miktarını azaltmasıdır.

3. Daha Sürükleyici Bir Deneyim Yaratın

Bazı insanlar karanlık modun daha sürükleyici bir deneyim yarattığını düşünüyor. Bu, özellikle haber uygulamaları veya sosyal medya gibi çok sayıda içeriğe sahip uygulamaları veya web sitelerini kullanırken doğru olabilir.

Bir React Uygulamasına Karanlık Mod Nasıl Eklenir

Bir React uygulamasına karanlık mod eklemek nispeten basittir. React uygulamanıza karanlık mod eklemek için gerekli adımlar aşağıda listelenmiştir.

Başlamadan önce, bir React uygulaması kurulumu.

1. useState Kancasını kullanın

Yapmanız gereken ilk şey, uygulamanızın mevcut temasını izlemek için bir durum değişkeni oluşturmaktır. Bu, useState kancası kullanılarak yapılabilir. Bunun için temel bir anlayışa sahip olmalısınız. useState kancasıyla nasıl çalışılır.

içe aktarmak Tepki, { useState } itibaren 'tepki';
işlevUygulama() {
 const [tema, setTheme] = useState('ışık');
dönüş (
`Uygulama ${tema}`}>
<h1>Selam Dünya!</h1>
</div>
 );
}
ihracatvarsayılan Uygulama;

Kod parçacığı, useState kancasını React'ten içe aktarır ve theme adında bir durum değişkeni oluşturur. Tema değişkeni, kodun varsayılan olarak 'hafif' olarak ayarladığı uygulamanın mevcut temasını izler.

2. Geçiş Düğmesi Ekle

Ardından, kullanıcıların aydınlık ve karanlık mod arasında geçiş yapabilmesi için uygulamaya bir geçiş düğmesi ekleyin. Bu, aşağıdaki kodla yapılabilir:

içe aktarmak Tepki, { useState } itibaren 'tepki';
işlevUygulama() {
 const [tema, setTheme] = useState('ışık');
const toggleTheme = () => {
 eğer (tema 'ışık') {
 setTheme('karanlık');
 } başka {
 setTheme('ışık');
 }
 };
dönüş (
`Uygulama ${tema}`}>
<buton onClick={toggleTheme}>Temayı Aç/Kapat</button>
<h1>Selam Dünya!</h1>
</div>
 );
}
ihracatvarsayılan Uygulama;

Yukarıdaki kod parçacığı, tema durumu değişkenini 'açık' ve 'karanlık' arasında değiştirmek için bir toggleTheme işlevinin yanı sıra tıklandığında toggleTheme işlevini çağırmak için bir düğme içerir.

3. useEffect Hook'u kullanın

Ardından, tema durumu değişkenine göre uygulamanın temasını dinamik olarak güncellemek için useEffect kancasını kullanın.

içe aktarmak Tepki, { useState, useEffect } itibaren 'tepki';
işlevUygulama() {
 const [tema, setTheme] = useState('ışık');
const toggleTheme = () => {
 eğer (tema 'ışık') {
 setTheme('karanlık');
 } başka {
 setTheme('ışık');
 }
 };
 useEffect(() => {
belge.body.className = tema;
 }, [tema]);
dönüş (
`Uygulama ${tema}`}>
<buton onClick={toggleTheme}>Temayı Aç/Kapat</button>
<h1>Selam Dünya!</h1>
</div>
 );
}
ihracatvarsayılan Uygulama;

Yukarıdaki kod parçacığı, tema durumu değişkenine dayalı olarak document.body öğesinin className öğesini güncellemek için useEffect kancasını kullanır. Bu, uygulamanın CSS'sini temaya göre dinamik olarak güncellemenizi sağlar.

4. Karanlık ve Açık Modlar için CSS Ekleme

Ardından, karanlık ve aydınlık modlar için CSS'yi ekleyin. Bunu, 'darkMode.css' adlı bir dosya oluşturarak ve aşağıdaki CSS'yi ekleyerek yapabilirsiniz:

.karanlık {
 arka plan rengi: #333;
 renk: #fff;
}
.ışık {
 arka plan rengi: #fff;
 renk: #333;
}

Bundan sonra, CSS dosyasını uygulamanıza aktarmanız gerekir. Bu, aşağıdaki kodla yapılabilir:

içe aktarmak Tepki, { useState, useEffect } itibaren 'tepki';
içe aktarmak './darkMode.css';
işlevUygulama() {
 const [tema, setTheme] = useState('ışık');
const toggleTheme = () => {
 eğer (tema 'ışık') {
 setTheme('karanlık');
 } başka {
 setTheme('ışık');
 }
 };
 useEffect(() => {
belge.body.className = tema;
 }, [tema]);
dönüş (
`Uygulama ${tema}`}>
<buton onClick={toggleTheme}>Temayı Aç/Kapat</button>
<h1>Selam Dünya!</h1>
</div>
 );
}
ihracatvarsayılan Uygulama;

5. Farklı Modlara Geç

Artık karanlık ve aydınlık modlar için CSS'yi eklediğinize göre, geçiş düğmesine tıklayarak bunlar arasında geçiş yapabilirsiniz. Bunu yapmak için önce geliştirme sunucusunu başlatmanız gerekir. Aşağıdaki terminal komutunu çalıştırarak bunu yapabilirsiniz:

npm Başlat

Bundan sonra, uygulamayı tarayıcıda açabilir ve karanlık ve aydınlık modlar arasında geçiş yapmak için geçiş düğmesine tıklayabilirsiniz.

React'te Karanlık Mod için Ek Seçenekler

Temanın sayfa yenilemelerinde kalıcı olmasını istiyorsanız, şunları yapabilirsiniz: verileri depolamak için localStorage API'sini kullanın. Bunu yapmak için önce aşağıdaki kodu uygulamanıza eklemeniz gerekir:

içe aktarmak Tepki, { useState, useEffect } itibaren 'tepki';
içe aktarmak './darkMode.css';
işlevUygulama() {
const [tema, setTheme] = useState(
 localStorage.getItem('tema') || 'ışık'
 );
const toggleTheme = () => {
 eğer (tema 'ışık') {
 setTheme('karanlık');
 } başka {
 setTheme('ışık');
 }
 };
 useEffect(() => {
 localStorage.setItem('tema', tema);
belge.body.className = tema;
 }, [tema]);
dönüş (
`Uygulama ${tema}`}>
<buton onClick={toggleTheme}>Temayı Aç/Kapat</button>
<h1>Selam Dünya!</h1>
</div>
 );
}
ihracatvarsayılan Uygulama;

Yukarıdaki kod parçacığı, sayfa yenilendikten sonra temayı koruma özelliğini içerir. Bu, localStorage API kullanılarak yapılır. İlk olarak, localStorage'da depolanmış bir tema olup olmadığını kontrol eder.

Bir tema varsa o tema kullanılır. Değilse, 'hafif' tema kullanılır. Ardından, temayı localStorage'da depolamak için useEffect kancasına kod eklenir. Bu, temanın sayfa yenilemelerinde kalıcı olmasını sağlar.

React'te Karanlık Mod Bitmiyor

React uygulamanıza karanlık mod eklemenin birçok yolu vardır. Bu makalede, useState ve useEffect kancalarını kullanarak bunu yapmanın bir yolu gösterilmektedir. Ancak, bunu yapmanın başka birçok yolu da var.

Örneğin, bir tema sağlayıcı oluşturmak için React Context API'sini kullanabilirsiniz. Bu, tüm uygulamanızı bir tema sağlayıcı bileşenine sarmanıza ve uygulamanızın herhangi bir yerinden temaya erişmenize olanak tanır.

Ayrıca tarayıcınızda karanlık modu etkinleştirebilir ve tarayıcının temasına bağlı olarak farklı stiller uygulamak için CSS medya sorgularını kullanabilirsiniz.