Velog'a Karanlık Mod Uygulamak

Karanlık modu hesaba katmadan geliştirilen bir hizmete karanlık mod ekleme hikayesini yazıya döktüm.

UX tasarımcısının bakış açısını ve geliştiricinin bakış açısını bir araya getirerek yazdım.

• Teknik seçimler

  • Velog, React ve Styled Components kullanıyor

  • Styled Components'in ThemeProvider'ı temayı JS ile ayarladığı için sistem temasını varsayılan olarak göstermek sınırlı. Sistem temasını takip etmek için tarayıcı tarafında JS'nin bir kez çalıştırılması gerektiğinden, varsayılan temayı sabitlemeyecekseniz SSR uygulanan Velog için uygun değil.

  • CSS Variable kullanılırsa sistem teması varsayılan değer olarak kullanılabilir

  • CSS-in-JS ortamında CSS Variable kullanmak için renkler JS objesi olarak yönetiliyor; hataları önlemek ve TypeScript otomatik tamamlama avantajından yararlanmak için yardımcı fonksiyonlar yazıp kullanıyoruz

• Karanlık mod paleti üzerine düşünceler

  • Renkler; arka plan rengi, metin rengi, kenarlık rengi, Primary ve Destructive renkleri temel alınarak belirlendi

  • Arka plan rengi için ilk başta 1 2 3 4 parlaklık seviyelerine göre düzenleme yapılmıştı; ancak gerçek UI'da birebir eşleşmeyen durumlar olduğundan, istisnai durumları karşılamak için biraz değiştirilerek yönetildi

  • Metin rengi belirlerken kontrast oranının uygun olup olmadığını kontrol etmek önemli. WebAIM üzerinden WCAG'i geçip geçmediği görülebilir

  • Primary ve Destructive renkler mevcut halleriyle koyu arka planda da yeterince kontrastlı görünse de, desaturated renkler kullanılırsa karanlık temaya biraz daha uygun bir his veriyor

• Renk değiştirme çalışması

  • IDE yardımıyla otomatik değiştirilebilenler işlendi

  • Geri kalan istisna renkler tek tek bakılarak uygun renklerle ayarlandı

  • Daha önce oluşturulan renklerle uygulamak tuhaf kaldığında, gerektiği anda palete yeni renkler eklenerek yönetildi

  • Gerçekte bu işe en çok emek harcanan kısım buydu

• Karanlık tema geçiş düğmesi özelliği

  • İki SVG için rotate, scale CSS transition'ları üzerinden geçiş efekti uygulandı

  • Kullanıcı karanlık temayı değiştirince kullanıcı ayarı localStorage ve cookie içine kaydediliyor

  • localStorage CSR'de, cookie ise SSR'de kullanılıyor

Karanlık temayı bir kez uygulayıp gördükten sonra, karanlık tema düşünülmeden yapılmış bir UI'ya karanlık tema uygulamanın inanılmaz derecede zor bir iş olduğunu hissettim. Bundan sonra planlama yaparken karanlık temayı mutlaka hesaba katıp tasarlayacağım; ayrıca renk kullanırken gray1, gray2 gibi adlar yerine text1, text2 gibi kullanım amacına göre isimlendirme yapmanın ileride daha kullanışlı olacağına karar verdim.