ASP.NET Core'a Tek Satırda Karanlık Mod Ekleyin!
[[academy-video-youtube({"vid": "h8GXf6YWIhM", "start_time": "0", "title": "ASP.NET Core'a Sadece Bir Satır Kodla Karanlık Mod Ekleyin!", "creator": "Tim Corey", "length": "8m 32s"})]]
ASP.NET Core uygulamanıza karanlık mod eklemek istediyseniz, Tim Corey'nin yakın zamanda yayımlanan YouTube öğreticisi bunu en basit şekilde anlatıyor. Bu "ASP.NET Core'a Karanlık Modu Ekle!" videosunda, Tim, Bootstrap 5.3+ ile çalışırken, Blazor, MVC veya Razor Sayfaları kullanıyor olun fark etmeksizin, sadece bir satırlık kodla karanlık bir tema nasıl uygulayabileceğinizi gösteriyor.
Bu makalede, ASP.NET Core'da karanlık modu nasıl adım adım uygulayacağımıza bakacağız.
ASP.NET Core'da Karanlık Mod Özelliğinin Tanıtımı
Tim, modern web uygulamalarında sık karşılaşılan bir gereksinim olan ASP.NET Core'da karanlık modu etkinleştirmekle ilgili öğreticiye başlar. Blazor, MVC veya Razor Pages kullanıyor olun, Bootstrap 5.3, karanlık temalar için desteği çok basit bir şekilde sunuyor.
Tim'in açıkladığı gibi, bu karanlık mod özelliği tek bir satır kod ile etkinleştirilebilir — bu da, web sitelerinin kullanıcı arayüzünü geliştirmek isteyen geliştiriciler için hızlı ve etkili bir çözüm sunar. Yeni karanlık mod desteği, sistem ayarlarına veya kişisel tercihe göre açık tema veya koyu arayüz tercih eden kullanıcılar için özellikle faydalıdır.
Bir Blazor Web Uygulamasında Bootstrap Sürümünü Kontrol Etme
Tim, Visual Studio kullanarak bir Blazor web uygulama projesini geçer. O, wwwroot klasörüne gider ve uygulamanın Bootstrap sürüm 5.3.3'ü kullandığını doğrulamak için bootstrap.min.css dosyasını açar. 1:01'de, karanlık mod desteği için 5.3 veya daha yukarı bir sürüm gerektiğini belirtir.
Projeniz zaten bu sürümü veya daha yenisini kullanıyorsa, Bootstrap'i güncellemeye veya ek araçlar eklemeye gerek yoktur. Bu, kritik bir adımdır çünkü Bootstrap'in eski sürümleri, data-bs-theme öznitelik kullanarak tema değiştirmeyi desteklemez.
Koyu Temayı Etkinleştirmek için Bir Satır Kod
Bu noktada, Tim App.razor dosyasını açar. <html> etiketini vurgular ve yalnızca bir HTML özelliği kullanarak tüm uygulamaya karanlık tema uygulamanın nasıl yapıldığını gösterir:
data-bs-theme="dark"Bu basit ekleme, sayfalarınız ve öğeleriniz üzerinde koyu renk şemasını uygulaması için Bootstrap'a talimat verir. Tim, satırı eklemeden önce ve sonra uygulamayı çalıştırarak karşıtlığı gösterir. Saat 2:03'te, karanlık modu açar ve temanın anında güncellendiğini doğrular.
Koyu Modda Özel CSS Ayarlamaları
Tim, bu tek satırlık kodun genel arka plan rengi ve temayı değiştirse de, mevcut CSS'nin karanlık tema ile hala çakışabileceğini belirtiyor. Örneğin, CSS dosyalarınızda sabitlenmiş beyaz metin, yazıtipi boyutları veya arka planlar otomatik olarak ayarlanmaz.
Tim'in 2:34'te belirttiği gibi, ne kadar çok özel stil yazdıysanız, o kadar fazla düzenleme ve test yapmanız gerekecektir. Bu nedenle, geliştirme sürecinin başlarında, daha az öğenin ayar gerektirdiği durumda karanlık mod ile başlamayı öneriyor.
Açık ve Koyu Temalar Arasında Geçiş Yapma
2:50'de, Tim ayrıca karanlık ve açık temalar arasında geçiş yapabileceğinizi vurguluyor. Özniteliği data-bs-theme="light" olarak değiştirerek, tekrar açık temayı etkinleştirirsiniz:
data-bs-theme="light"Tim, geliştiricilerin kullanıcıların tema tercihlerini seçmelerine olanak tanıyabileceğini öneriyor — örneğin, JavaScript veya sunucu tarafı mantığı kullanarak bir anahtar ekleyerek.
Kullanıcılar tarafından özellikle Windows uygulamaları veya prefers-color-scheme'in otomatik olarak algılandığı mobil cihazlarda karanlık ve açık temalar arasında geçiş yapabilme kabiliyeti giderek daha fazla beklenmektedir.
ASP.NET Core'da Yerleşim Çakışmalarını Düzeltme
Tim, yaygın zorluklardan birinin, üst gezinme çubuğu gibi belirli öğelerdeki tutarsız stiller olduğunu açıklıyor. Saat 3:12'de, layout'a özgü bir CSS dosyasının (MainLayout.razor.css), varsayılan Bootstrap özelliklerini nasıl geçersiz kıldığını gösteriyor.
O, bir .top-row seçiciyle doğrudan bir renk ayarı buluyor, bu da tema ayarına yanıt vermiyor. Onun çözümü: Mevcut temaya göre stil yönetimini Bootstrap'in yapabilmesi için color özelliğini kaldırmak (3:47).
Override'u kaldırdıktan sonra, koyu tema daha temiz görünüyor. Ve o, tekrar açık temaya geçtiğinde, hala çalışıyor — bu da Bootstrap'in seçilen temaya göre dinamik olarak renk değerlerini uyguladığını gösteriyor.
Temaya Özgü CSS Kuralları Kullanmak
4:17'de, Tim başka bir yararlı ipucu sunar: geliştiriciler, etkin moda bağlı olarak farklı stiller uygulamak için CSS içindeki tema algılamasını kullanabilir. Bu, veri-bs-tema değerine yanıt vermenizi ve uygulamanızı buna göre stilize etmenizi sağlar.
Örneğin, kullanıcı koyu veya açık modu seçtiyse yazı tipi boyutunu, metin rengini veya hatta görüntüleri ayarlayabilirsiniz. Bu, iki ayrı stil dosyası oluşturmadan yeni bir tema deneyimi isteyenler için esneklik sağlar.
MVC Projelerinde Karanlık Mod Uygulama
Sonra, Tim Bootstrap 5.3 kullanmayan uygulamalarda karanlık modu nasıl etkinleştireceğini göstermek amacıyla daha eski bir ASP.NET MVC projesine geçer. Bootstrap CSS dosyasını açtığında, sürümün 5.1.0 olduğunu fark eder, bu sürüm karanlık modu desteklememektedir (5:07).
MVC'de CDN ile Bootstrap'i Yükseltme
Tim, yerel Bootstrap dosyasını GetBootstrap web sitesinden CDN sürümü ile değiştirmeyi öneriyor. 5:51'de, _Layout.cshtml görünümüne CDN bağlantılarını yapıştırarak hem CSS hem de JavaScript eklemelerini günceller.
Bunu yaparak, MVC uygulaması artık daha yeni Bootstrap sürümü sayesinde tema değiştirmeyi destekliyor. Ayrıca, CDNs'in özellikle ilk kez ziyaret edenler için web sitenizi hızlandırmaya yardımcı olabileceğini de belirtiyor.
Karanlık Mod için Navigasyon Stilini Ayarlama
Koyu temayı etkinleştirdikten sonra, Tim bazı navbar stillerinin bununla çeliştiğini fark eder. 6:40'ta, koyu görünümü bozan açık renkleri zorlayan navbar-light ve bg-white sınıflarını çıkarır.
Bir kez kaldırıldığında, navigasyon çubuğu karanlık moda düzgün bir şekilde uyum sağlar. Ancak Tim, kendiliğinden renkleri değiştirilmiş diğer metin ögeleri veya bileşenlerin hala elle düzeltilmesi gerekebileceği konusunda uyarıyor (6:57). Tema duyarlı CSS yazmak isteyebileceğiniz veya daha kolay yönetim için CSS değişkenlerini kullanabileceğiniz yer burasıdır.
Özet: Bootstrap 5.3 Tema Desteği
Tim, Bootstrap 5.3'ün hem koyu hem de açık temaları tam olarak desteklediğini, ancak özel CSS'nizin bunu desteklemeyebileceğini bir kez daha belirterek kapanışı yapıyor. Stilleri uygun bir şekilde yapılandırdıysanız, sınıfları kullanarak ve sabitlenmiş renklerden kaçınarak tema değiştirmek daha sorunsuz hale gelir.
sadece şu şekilde ekleyerek vurguluyor:
data-bs-theme="dark"<html> etiketinize eklemek, tüm ASP.NET web sitenizde karanlık modu etkinleştirir. Hatta bu özelliği bir tablo, kart veya bölüm gibi belirli bir elemana uygulayarak tek bir sayfada temaları birleştirmenizi sağlayabilirsiniz.
Tim Corey'den Son İpucu
Tim'in layout sistemleri, tema stratejileri ve erişilebilirlik en iyi uygulamaları dahil daha derin kavramlara değindiği tam bir Bootstrap kursu da vardır.
Tim Corey'nin video eğitimini takip ederek, ASP.NET Core uygulamanızda karanlık modu sadece bir adımda uygulayabilir ve özel CSS, tema algılama ve geçiş fonksiyonelliğini kullanarak ince ayar yapabilirsiniz. İster Windows, web ya da diğer platformlar için uygulama geliştiriyor olun, bu yöntem temaları zahmetsizce değiştirmenize ve kullanıcılarınızı mutlu etmenize olanak tanır.
Ücretsiz Başlayın
Ücretsiz Başlayın
Ücretsiz Canlı Demo Rezervasyonu
