Hiç şüphe yok ki karanlık mod bugünlerde çok revaçta. Giderek 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 nasıl karanlık mod ekleyeceğinizi öğreneceksiniz.
Karanlık Mod Nedir?
Karanlık mod, bir uygulamanın renk paletini açıktan koyuya çeviren 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 isteyebileceğiniz birkaç neden vardır. En popüler olanlardan birkaçına bir göz atalım.
1. Pil Ömrünü Artırın
Karanlık modun faydalarından biri, OLED veya AMOLED ekranlı cihazlarda pil ömrünün iyileştirilmesine yardımcı olabilmesidir. Bunun nedeni, daha koyu piksellerin görüntülenmesi için daha az güç gerektirmesidir.
2. Göz Yorgunluğunu Azaltın
Kendinizi geceleri web’de 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 fazla içeriğe sahip uygulamaları veya web sitelerini kullanırken geçerli 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ı kurduğunuzdan emin olmanız gerekir .
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 , useState kancasıyla nasıl çalışılacağına dair temel bir anlayışa sahip olmalısınız .
import React, { useState } from ‘react’;
function App() {
const [theme, setTheme] = useState(‘light’);
return (
<div className={`App ${theme}`}>
<h1>Hello, world!</h1>
</div>
);
}
export default App;
Kod parçacığı, React’ten useState kancasını içe aktarır ve theme adlı bir durum değişkeni oluşturur. Tema değişkeni, kodun varsayılan olarak “hafif” olarak ayarladığı uygulamanın geçerli temasını izler.
2. Geçiş Düğmesi Ekleyin
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:
import React, { useState } from ‘react’;
function App() {
const [theme, setTheme] = useState(‘light’);
const toggleTheme = () => {
if (theme === ‘light’) {
setTheme(‘dark’);
} else {
setTheme(‘light’);
}
};
return (
<div className={`App ${theme}`}>
<button onClick={toggleTheme}>Toggle Theme</button>
<h1>Hello, world!</h1>
</div>
);
}
export default App;
Yukarıdaki kod parçacığı, tema durum değişkenini ‘light’ ve ‘dark’ arasında değiştirmek için bir toggleTheme işlevi ve ayrıca tıklandığında toggleTheme işlevini çağırmak için bir düğme içerir.
3. useEffect Kancasını 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.
import React, { useState, useEffect } from ‘react’;
function App() {
const [theme, setTheme] = useState(‘light’);
const toggleTheme = () => {
if (theme === ‘light’) {
setTheme(‘dark’);
} else {
setTheme(‘light’);
}
};
useEffect(() => {
document.body.className = theme;
}, [theme]);
return (
<div className={`App ${theme}`}>
<button onClick={toggleTheme}>Toggle Theme</button>
<h1>Hello, world!</h1>
</div>
);
}
export default App;
Yukarıdaki kod parçacığı, Document.body öğesinin className öğesini tema durumu değişkenine göre güncellemek için useEffect kancasını kullanır. Bu, uygulamanın CSS’sini temaya göre dinamik olarak güncellemenizi sağlar.
4. Koyu 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:
.dark {
background-color: #333;
color: #fff;
}
.light {
background-color: #fff;
color: #333;
}
Bundan sonra, CSS dosyasını uygulamanıza aktarmanız gerekir. Bu, aşağıdaki kodla yapılabilir:
import React, { useState, useEffect } from ‘react’;
import ‘./darkMode.css’;
function App() {
const [theme, setTheme] = useState(‘light’);
const toggleTheme = () => {
if (theme === ‘light’) {
setTheme(‘dark’);
} else {
setTheme(‘light’);
}
};
useEffect(() => {
document.body.className = theme;
}, [theme]);
return (
<div className={`App ${theme}`}>
<button onClick={toggleTheme}>Toggle Theme</button>
<h1>Hello, world!</h1>
</div>
);
}
export default App;
5. Farklı Modlara Geçin
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. Bunu aşağıdaki terminal komutunu çalıştırarak yapabilirsiniz:
npm start
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.
geçiş düğmesi ve ışık modu etkin olan web sayfası
React’te Karanlık Mod için Ek Seçenekler
Temanın sayfa yenilemelerinde devam etmesini istiyorsanız , verileri depolamak için localStorage API’yi kullanabilirsiniz . Bunu yapmak için öncelikle uygulamanıza aşağıdaki kodu eklemeniz gerekir:
import React, { useState, useEffect } from ‘react’;
import ‘./darkMode.css’;
function App() {
const [theme, setTheme] = useState(
localStorage.getItem(‘theme’) || ‘light’
);
const toggleTheme = () => {
if (theme === ‘light’) {
setTheme(‘dark’);
} else {
setTheme(‘light’);
}
};
useEffect(() => {
localStorage.setItem(‘theme’, theme);
document.body.className = theme;
}, [theme]);
return (
<div className={`App ${theme}`}>
<button onClick={toggleTheme}>Toggle Theme</button>
<h1>Hello, world!</h1>
</div>
);
}
export default App;
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 saklanan bir tema olup olmadığını kontrol eder.
geçiş düğmesi ve karanlık modun etkin olduğu web sayfası
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.
Karanlık Mod Tepki ile Bitmiyor
React uygulamanıza karanlık mod eklemenin birçok yolu vardır. Bu makalede, bunu useState ve useEffect kancalarını kullanarak 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’yi kullanabilirsiniz. Bu, tüm uygulamanızı bir tema sağlayıcı bileşenine sarmanıza ve temaya uygulamanızın herhangi bir yerinden 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.