Karanlık ve aydınlık modlar arasında geçiş yapmanızı sağlayan bir ayara sahip olmak uygulamalar için popüler hale geldi. Belki de karanlık kullanıcı arayüzlerinin popülaritesinden kaynaklanıyor, belki de uygulamalar giderek daha yapılandırılabilir hale geliyor.

React bağlamı, verileri küresel olarak paylaşmanın kolay bir yoludur, ancak bileşenlerin yeniden kullanımını zorlaştırabilir. Alternatif olarak, bağlam yerine useEffect ve useState kancalarını kullanan bir karanlık mod düğmesi bileşeni oluşturabilirsiniz. CSS stillerinin hedefleyebileceği gövde öğesindeki bir veri özniteliğini değiştirir.

Neye ihtiyacınız olacak

Bu eğiticiyi takip etmek için aşağıdakilere ihtiyacınız olacak:

  • Makinenizde yüklü olan yeni bir Düğüm sürümü.
  • Temel bir React anlayışı ve Tepki kancaları.
  • Bir başlangıç ​​React projesi. Sadece bir React uygulaması oluşturun ve gitmeye hazırsınız.

Bir Düğme Bileşeni Oluşturun

Düğme bileşeni, temayı karanlıktan aydınlığa değiştirmekten sorumlu olacaktır. Gerçek bir uygulamada bu düğme, Navbar bileşeninin bir parçası olabilir.

instagram viewer

src klasöründe Button.js adında yeni bir dosya oluşturun ve aşağıdaki kodu ekleyin.

içe aktarmak { useState } itibaren 'tepki'
ihracatvarsayılanişlevButon() {
 const [tema, settheme] = useState("karanlık")
const handleToggle = () => {
 const yeniTema = tema "ışık"? "karanlık": "ışık"
 settheme (newTheme)
 }
dönüş (
<>
<düğme sınıfıAdı="temaBtn" onClick={handleToggle}>
 {tema "ışık"? <açıklık>karanlık</span>: <açıklık>ışık</span>}
</button>
</>
 )
}

İlk önce, useState() kancasını React'ten içe aktarın. Mevcut temayı takip etmek için kullanacaksınız.

Düğme bileşeninde, durumu karanlık olarak başlatın. handleToggle() işlevi, geçiş işleviyle ilgilenecektir. Düğmeye her tıklandığında çalışır.

Bu bileşen, temayı değiştirdiğinde düğme metnini de değiştirir.

Düğme bileşenini görüntülemek için onu App.js'ye içe aktarın.

içe aktarmak Buton itibaren './Buton';
işlevUygulama() {
dönüş (
<div>
<Buton/>
</div>
 );
}
ihracatvarsayılan Uygulama;

CSS Stillerini Oluşturun

Şu anda, düğmeye tıklamak React uygulamasının kullanıcı arayüzünü değiştirmiyor. Bunun için önce karanlık ve aydınlık mod için CSS stilleri oluşturmanız gerekecek.

App.css'de aşağıdakini ekleyin.

gövde {
 --color-text-birincil: #131616;
 --renk-metin-ikincil: #ff6b00;
 --color-bg-birincil: #E6EDEE;
 --color-bg-ikincil: #7d86881c;
 arka fon: var(--color-bg-birincil);
 renk: var(--renk-metin-birincil);
geçiş: arka fon 0.25sgiriş-çıkış kolaylığı;
}
gövde[veri-teması="ışık"] {
 --color-text-birincil: #131616;
 --color-bg-birincil: #E6EDEE;
}
gövde[veri-teması="karanlık"] {
 --color-text-birincil: #F2F5F7;
 --color-bg-birincil: #0E141B;
}

Burada, veri özniteliklerini kullanarak gövde öğesinin stillerini tanımlıyorsunuz. Açık tema veri özniteliği ve karanlık tema veri özniteliği vardır. Her birinin farklı renklerde CSS değişkenleri vardır. CSS veri özniteliklerini kullanmak, stilleri verilere göre değiştirmenize olanak tanır. Bir kullanıcı koyu bir tema seçerse, gövde verileri özniteliğini koyu olarak ayarlayabilirsiniz; kullanıcı arayüzü değişecektir.

Temayla değiştirmek için düğme öğesi stillerini de değiştirebilirsiniz.

.themeBtn {
 dolgu: 10 piksel;
 renk: var(--renk-metin-birincil);
 arka plan: şeffaf;
 sınır: 1piksel katı var(--renk-metin-birincil);
 imleç: işaretçi;
}

Stilleri Değiştirmek için Düğme Bileşenini Değiştirin

CSS dosyasında tanımlanan stilleri değiştirmek için, handleToggle() işlevindeki body öğesindeki verileri ayarlamanız gerekir.

Button.js'de handleToggle() öğesini şu şekilde değiştirin:

const handleToggle = () => {
 const yeniTema = tema "ışık"? "karanlık": "ışık"
 settheme (newTheme)
belge.body.dataset.theme = tema
}

Düğmeye tıklarsanız, arka plan karanlıktan aydınlığa veya aydınlıktan karanlığa geçmelidir. Ancak sayfayı yenilerseniz tema sıfırlanır. Tema ayarını sürdürmek için tema tercihini şurada saklayın: yerel depolama.

Yerel Depolamada Kalıcı Kullanıcı Tercihi

Düğme bileşeni işlenir işlemez kullanıcı tercihini almalısınız. useEffect() kancası, her işlemeden sonra çalıştığı için bunun için mükemmeldir.

Temayı yerel depolamadan almadan önce, önce onu depolamanız gerekir.

Button.js'de storeUserPreference() adlı yeni bir işlev oluşturun.

const storeUserSetPreference = (tercih) => {
 localStorage.setItem("tema", tercih);
};

Bu işlev, kullanıcı tercihini bir argüman olarak alır ve onu tema adı verilen bir öğe olarak saklar.

Kullanıcı temayı her değiştirdiğinde bu işlevi çağıracaksınız. Bu nedenle, handleToggle() işlevini şöyle görünecek şekilde değiştirin:

const handleToggle = () => {
 const yeniTema = tema "ışık"? "karanlık": "ışık"
 settheme (newTheme)
 storeUserSetPreference (newTheme)
belge.body.dataset.theme = tema
}

Aşağıdaki işlev, temayı yerel depolamadan alır:

const getUserSetPreference = () => {
 localStorage.getItem("tema");
};

Bunu useEffect kancasında kullanacaksınız, böylece bileşen her oluşturulduğunda temayı güncellemek için yerel depolamadan tercihi alır.

useEffect(() => {
const userSetPreference = getUserSetPreference();
if (userSetPreference) {
 settheme (userSetPreference)
 }
belge.body.dataset.theme = tema
}, [tema])

Tarayıcı Ayarlarından Kullanıcı Tercihini Alma

Daha da iyi bir kullanıcı deneyimi için, tercih-renk-şeması Temayı ayarlamak için CSS medya özelliği. Bu, kullanıcının işletim sistemi veya tarayıcısı aracılığıyla kontrol edebilecekleri sistem ayarlarını yansıtmalıdır. Ayar açık veya koyu olabilir. Uygulamanızda, düğme bileşeni yüklendikten hemen sonra bu ayarı kontrol etmeniz gerekir. Bu, bu işlevi useEffect() kancasında uygulamak anlamına gelir.

İlk olarak, kullanıcı tercihini alan bir işlev oluşturun.

Button.js'de aşağıdakini ekleyin.

const getMediaQueryPreference = () => {
 const mediaQuery = "(renk düzenini tercih eder: koyu)";
const mql = pencere.matchMedia (mediaQuery);
const hasPreference = bir çeşit mql. "boole" ile eşleşir;
if (hasPreference) {
 mql.matches döndür? "karanlık": "ışık";
 }
};

Ardından, ortam sorgusu tercihini almak için useEffect() kancasını değiştirin ve yerel depolamada herhangi bir tema ayarlanmamışsa kullanın.

useEffect(() => {
const userSetPreference = getUserSetPreference();
const mediaQueryPreference = getMediaQueryPreference();
if (userSetPreference) {
 settheme (userSetPreference)
 } başka {
 settheme (mediaQueryPreference)
 }
belge.body.dataset.theme = tema
}, [tema])

Uygulamanızı yeniden başlatırsanız, tema sistem ayarlarınıza uygun olmalıdır.

Karanlık Modu Değiştirmek için React Context'i Kullanma

Bir React uygulamasının temasını değiştirmek için veri niteliklerini, CSS'yi ve React kancalarını kullanabilirsiniz.

React'te karanlık modu işlemeye yönelik başka bir yaklaşım, bağlam API'sini kullanmaktır. React bağlamı, verileri aksesuarlardan geçirmek zorunda kalmadan bileşenler arasında paylaşmanıza olanak tanır. Temaları değiştirmek için kullanırken, uygulama boyunca erişebileceğiniz bir tema bağlamı yaratırsınız. Ardından, eşleşen stilleri uygulamak için tema değerini kullanabilirsiniz.

Bu yaklaşım işe yarasa da, CSS veri niteliklerini kullanmak daha basittir.