Uygulamaların, karanlık ve aydınlık modlar arasında geçiş yapmanızı sağlayan bir ayara sahip olması popüler hale geldi. Belki karanlık kullanıcı arayüzlerinin popülaritesinden, belki de uygulamaların giderek daha yapılandırılabilir hale gelmesinden kaynaklanmaktadır.
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. Gövde öğesinde CSS stillerinin hedefleyebileceği bir veri niteliğ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 Node sürümü.
React ve React kancaları hakkında temel bir anlayış .
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 geçirmekten sorumlu olacaktır. Gerçek bir uygulamada, bu düğme Navbar bileşeninin bir parçası olabilir.
src klasöründe, Button.js adlı yeni bir dosya oluşturun ve aşağıdaki kodu ekleyin.
import { useState } from ‘react’
export default function Button() {
const [theme, settheme] = useState(“dark”)
const handleToggle = () => {
const newTheme = theme === “light” ? “dark” : “light”
settheme(newTheme)
}
return (
<>
<button className=”themeBtn” onClick={handleToggle}>
{theme=== “light” ? <span>dark</span> : <span>light</span>}
</button>
</>
)
}
İlk olarak, React’ten useState() kancasını içe aktarın. Mevcut temayı takip etmek için kullanacaksınız.
Button 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.
Button bileşenini görüntülemek için onu App.js’ye aktarın.
import Button from ‘./Button’;
function App() {
return (
<div>
<Button/>
</div>
);
}
export default App;
CSS Stillerini Oluşturun
Şu anda düğmeyi tıklamak, React uygulamasının kullanıcı arayüzünü değiştirmiyor. Bunun için öncelikle karanlık ve aydınlık mod için CSS stilleri oluşturmanız gerekecek.
App.css’te aşağıdakileri ekleyin.
body {
–color-text-primary: #131616;
–color-text-secondary: #ff6b00;
–color-bg-primary: #E6EDEE;
–color-bg-secondary: #7d86881c;
background: var(–color-bg-primary);
color: var(–color-text-primary);
transition: background 0.25s ease-in-out;
}
body[data-theme=”light”] {
–color-text-primary: #131616;
–color-bg-primary: #E6EDEE;
}
body[data-theme=”dark”] {
–color-text-primary: #F2F5F7;
–color-bg-primary: #0E141B;
}
Burada, veri özniteliklerini kullanarak gövde öğesinin stillerini tanımlıyorsunuz. Açık tema veri özelliği ve koyu tema veri özelliği vardır. Her birinin farklı renklere sahip 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 verisi özelliğini koyu olarak ayarlayabilirsiniz ve kullanıcı arayüzü değişir.
Temayla değiştirmek için düğme öğesi stillerini de değiştirebilirsiniz.
.themeBtn {
padding: 10px;
color: var(–color-text-primary);
background: transparent;
border: 1px solid var(–color-text-primary);
cursor: pointer;
}
Stilleri Değiştirmek için Düğme Bileşenini Değiştirin
CSS dosyasında tanımlanan stilleri değiştirmek için, body öğesindeki verileri handleToggle() işlevinde ayarlamanız gerekir.
Button.js’de, handleToggle() işlevini şu şekilde değiştirin:
const handleToggle = () => {
const newTheme = theme ===”light” ? “dark” : “light”
settheme(newTheme)
document.body.dataset.theme = theme
}
Düğmeye tıklarsanız, arka plan karanlıktan aydınlığa veya açıktan karanlığa geçmelidir. Ancak sayfayı yenilerseniz tema sıfırlanır. Tema ayarını sürdürmek için tema tercihini yerel depolama alanında saklayın .
Yerel Depolama Alanında Kalıcı Kullanıcı Tercihi
Button bileşeni işlenir görüntülenmez kullanıcı tercihini almalısınız. Her işlemeden sonra çalıştığı için useEffect() kancası bunun için mükemmeldir.
Temayı yerel depodan almadan önce, önce onu kaydetmeniz gerekir.
Button.js’de storeUserPreference() adlı yeni bir işlev oluşturun.
const storeUserSetPreference = (pref) => {
localStorage.setItem(“theme”, pref);
};
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, şöyle görünmesi için handleToggle() işlevini değiştirin:
const handleToggle = () => {
const newTheme = theme === “light” ? “dark” : “light”
settheme(newTheme)
storeUserSetPreference(newTheme)
document.body.dataset.theme = theme
}
Aşağıdaki işlev, temayı yerel depolamadan alır:
const getUserSetPreference = () => {
return localStorage.getItem(“theme”);
};
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)
}
document.body.dataset.theme = theme
}, [theme])
Tarayıcı Ayarlarından Kullanıcı Tercihi Alma
Daha da iyi bir kullanıcı deneyimi için temayı ayarlamak üzere tercih edilen renk şeması CSS medya özelliğini kullanabilirsiniz. Bu, bir kullanıcının işletim sistemleri 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ğıdakileri ekleyin.
const getMediaQueryPreference = () => {
const mediaQuery = “(prefers-color-scheme: dark)”;
const mql = window.matchMedia(mediaQuery);
const hasPreference = typeof mql.matches === “boolean”;
if (hasPreference) {
return mql.matches ? “dark” : “light”;
}
};
Ardından, medya sorgusu tercihini almak için useEffect() kancasını değiştirin ve yerel depolamada hiçbir tema ayarlanmamışsa onu kullanın.
useEffect(() => {
const userSetPreference = getUserSetPreference();
const mediaQueryPreference = getMediaQueryPreference();
if (userSetPreference) {
settheme(userSetPreference)
} else {
settheme(mediaQueryPreference)
}
document.body.dataset.theme = theme
}, [theme])
Uygulamanızı yeniden başlatırsanız, tema sisteminizin ayarlarıyla eşleşmelidir.
Karanlık Modu Değiştirmek için React Context’i Kullanma
Bir React uygulamasının temasını değiştirmek için data 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 donanımlardan 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ı oluşturursunuz. Ardından, eşleşen stilleri uygulamak için tema değerini kullanabilirsiniz.
Bu yaklaşım işe yarasa da, CSS veri özniteliklerini kullanmak daha kolaydır.