REACT UI STYLING
Dark & Light Theme (Karanlık & Aydınlık Tema)
UI Uygulaması geliştiriyorsunuz ve projenizin Dark ve Light Temaları altyapısını desteklemesini istiyorsunuz, bu özelliği projenize nasıl kazandırabilirsiniz. ?
1. Giriş
Styling için farklı farklı yöntemler ve kütüphaneler mevcut. Ama ben temelde 2 yöntem görüyorum. Birisi
- CSS veya SASS,SCSS,LESS çıktılarında oluşan class/id isimlerini HTML elemanları ile eşleştirme
- JS içerisinde Style tanımlama
1.A Statik (Class üzerinden)
1.B Dinamik (Class üzerinden JS ile Dinamik)
1.C Dinamik (Style üzerinden JS ile Dinamik)
Peki biz class gruplanmasını göre değilde styling üzerinde dinamiklik sağlamak istersek. Aşağıda örnekte olduğu gibi her styling özelliğini CSS içerisinden JS içerine taşıyıp tam bir dinamiklik sağlayabiliriz.
Bu CSS in JS kavramının çok fazla geliştiğini, hatta bu konuda yazılmış bir çok kütüphane olduğundan daha önceden bahsetmiştim
2. Benim Tercihim?
Benim tercihim 2020 CSS istatistiklerindekine benzer paralellikte yani büyük ölçekli projelerde SaSS kullanmayı tercih ediyorum. SaSS sizin CSS özelliklerini kullanabildiğiniz ekstra özellikler sayesinde compile edilerek üst seviye programlama yapabildiğiniz bir Preprocessor altyapısı sunuyor. Bu konuyu Why Web Dev Preprocessors are So Important? yazımda detaylıca anlatmıştım.
3. Theme (Tema) Desteğini Sağlama
Büyük projelerde SaSS ile geliştirme yapıyorsanız. Tema desteğinin nasıl sağlanacağı konusunda yaptığım araştırmalarda 2 yaklaşımla karşılaştım. ü
3.1 Theming in SASS
1ncisi Theming in SASS blog yazısındaki ve CodePen’deki uygulamayı ayrı bir projeye taşıyarak oluşturduğumda..
Temel mantık… Color Name üzerinden SaSS fonksiyon altyapısını kullanarak map ilgili theme ait color rengini döndürmek üzerine..
Bu kısımda Light ve Dark Theme renk tanımlamarını yapıyoruz.
Bu tanımlamardan sonra ThemeMapping Generate ederek ThemeMapping yapısını oluşturacağız.
ThemeMapping generate edildikten sonra ThemeVariable değişkenlerini kullanmak için HTML içerine enjekte ediyoruz.
Bu CSS variable tanımlamarından Html altında CSS Variable değişkenlerinizi görebilirsiniz.
Artık buna css/scss içerisinde color ile tanımladığımız tüm kısımlarda theme mixin fonksiyonunu kullanarak ilgili bileşene css variable atanır.
Gelelim biz bu styling değiştirdiğimizde bu bileşenlere ilgili theme nasıl atayacağımız konusuna. Theme değişikliği bir düğmeye basınca setTheme ‘den ibaret.
setTheme ise documan yeni tema değişkenlerini header altında bir style olarak eklemenini sağlıyor.
Blog post içerisindeki projeyi basitleştirerek GitHub DarkTheme içerisinde taşıdım. Buradan projeyi indirip deneyebilirsiniz.
3.2 Theming with CSS Variable
Diğer bir yötende stackoverflow bulduğum CSS içerisinde variable tanımlama yöntemini kullanarak Tema tanımlama. Bu yöntem bir önceki koda göre çok daha basit bir kullanım içeriyor.
color kullandığımız kısımlarda css color değişkenlere referans vermek.. Yukarıda görebileceğiniz gibi — bg — color ve — font — color olası renk değerleri sağ kısmında gösterilir.
Diğer yapmamız gereken toDark ve toLight fonksiyonlarında setTheme ile birlikte
document.documentElement.setAttribute ... light/dark mode set etmekBu attribute değerine göre CSS hangi renk tonlarını ekranda göstereceğini seçecektir.
Bunun ile ilgili de basit bir proje ekleyip GitHub ThemeSupport projesi içerisine ekledim.
Kaynak Kodlar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara (React UI Styling) erişmek için bu linke tıklayabilirsiniz.
