Artık çoğu sitede bulunan dark tema özelliğini gelin en basit haliyle uygulamamıza kazandıralım.
Öncelikle projemizi oluşturalım.
npx create-react-app darktheme
cd darktheme
npm i
npm startArtık bir ReactJS uygulamasına sahibiz. Peki tema için kullanacağımız styled-components kütüphanesini de yükleyelim.
npm i styled-componentsStyled components’i de yüklediğimize göre kodlamaya başlayabiliriz.
Benim şuanlık 2 temam olsun istiyorum biri açık ve diğeri de kapalı. Bu temalarımı bir yerden yönetmeliyim bunun için bir theme.js adında bir dosya oluşturuyorum.
2 tema objesi oluşturdum ve bunlara body ve fontColor değişkenleri ekledim her 2 temada da aynı isimde olmaları önemli çünkü direkt o isimlerle çağıracağız tabiki değişkenlerimizin değerleri farklı.
Peki 2 tema tanımladık bunları nasıl kullanacağız ?
App.js dosyama gidiyorum ve bir state oluşturuyorum.
Tema değeri oluşturup başlangıç değerine light dedim çünkü kullanıcı ilk girdiğinde beyaz bir arkaplan onu karşılasın istiyorum.
Daha sonra da ekrana bir buton koyduğumda bu durumu kullanıcı istediği gibi değiştirmesi için bir fonksiyon yazalım.
Süper ! Artık state ve fonksiyonumuz hazır. Şimdi styled-components kütüphanesinden 2 özellik kullanma vakti.
Tüm sayfalarımızı ThemeProvider ile saracağız çünkü yaptığım değişikliğin tüm sayfalarda olmasını istiyorum.
ThemeProvider’im ile tüm app’imi sardım ve provider’ımız bir adet özellik alıyor bu da aslında theme değişkeni.
Bu theme özelliğine de bizim yukarıda tanımladığımız state değişkeni ile koşullandırıp theme.js ‘den gelen temalarımızı tanımladık.
Son olarak ise bu tanımladığımız tema değişkenlerini global bir stile aktarmak.
Tekrardan theme.js dosyamıza geri dönüyoruz ve bir globalStyle oluşturuyoruz.
Artık bir GlobalStyles componenti oluşturduk ve bu içindeki değerleri bizim themeProvider’de ki değerden alıyor.Bu componenti app.js de dosyamıza ekliyoruz.
App.js’in son hali
Artık temamız hazır tek tuşla dark temaya daha sonra light temaya geçebiliriz!
Projenin codesandbox linki.
BONUS
Kullanıcı daha önceden girdiğinde eğer dark temayı seçtiyse bir sonraki ziyarette tekrar koyu temayı önüne çıkarmak istersek nasıl bir şey yapabiliriz?
ReactJS ile useEffect hookunu kullanmak bizim işimizi görür.
Artık temayı değiştirdiğim fonksiyonda browserimin localinde bir değer tutacağım ve kullanıcı girdiğinde bu localde veri varsa temamın asıl değeri aslında bu olacak.
Artık localimde theme adlı bir değişkenim var ve bu değişkenimin değeri state’mizde olan değer.
Bu şekilde artık kullanıcımızın tercihlerine göre uygulamamız yüklenecek.
Umarım yardımcı olabilmişimdir.
