ASP.NET Core'a KARANLIK Mod Ekleyin Sadece TEK Bir Kod Satırında!

ASP.NET Core'da Karanlık Mod Özelliği Tanıtımı

Tim, modern web uygulamalarında yaygın bir gereksinimi - ASP.NET Core'da karanlık modu etkinleştirmeyi ele alarak derse başlıyor. Blazor, MVC veya Razor Pages kullanıyor olun, Bootstrap 5.3 karanlık temalar için çok basit bir şekilde destek sunar.

Tim'in açıkladığı gibi, bu karanlık mod özelliği tek bir kod satırı 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 sağlar. Yeni karanlık mod desteği, sistem ayarlarına veya kişisel tercihlerine bağlı olarak açık tema veya koyu arayüzü tercih eden kullanıcılar için özellikle faydalıdır.

Blazor Web Uygulamasında Bootstrap Sürümünü Kontrol Etme

Tim, bir Blazor web uygulaması projesini adım adım geçirmek için Visual Studio kullanır. wwwroot klasörüne gidiyor ve uygulamanın Bootstrap sürüm 5.3.3 kullandığını doğrulamak için bootstrap.min.css dosyasını açıyor. Saat 1:01'de, karanlık modunu desteklemek için 5.3 veya daha yüksek bir sürümün gerektiğini not ediyor.

Eğer projeniz zaten bu sürümü veya daha yenisini kullanıyorsa, Bootstrap'i güncellemenize veya ek araçlar eklemenize gerek yoktur. Bu, kritik bir adımdır çünkü eski Bootstrap sürümleri data-bs-theme özniteliğini kullanarak tema değiştirmeyi desteklemez.

Koyu Tema Etkinleştirmek İçin Tek Satır Kod

Bu noktada, Tim App.razor dosyasını açar.

data-bs-theme="dark"

Bu basit ekleme, Bootstrap'in sayfalarınıza ve öğelerinize koyu renk şemasını uygulamasını sağlar. Tim, karşıtlığı göstermek için satırı eklemeden önce ve sonra uygulamayı çalıştırır. 2:03'te karanlık modu açar ve temanın anında güncellendiğini onaylar.

Koyu Mod İçin Özel CSS Ayarları

Tim, bu tek satırlık kodun genel arka plan rengini ve temayı değiştirdiğini belirtirken, mevcut CSS'nin hala koyu tema ile çelişebileceğine dikkat çekiyor. Örneğin, CSS dosyalarınızda sabitlenmiş beyaz metin, yazı tipi boyutları veya arka planlar otomatik olarak ayarlanmayacaktır.

Tim'in 2:34'te belirttiği gibi, ne kadar çok özel stil yazmışsanız, düzenleme ve test ihtiyaçınız o kadar artacaktır. Bu yüzden, daha az öğenin ayarlanması gerektiği geliştirme sürecinin başında karanlık mod ile başlamayı öneriyor.

Açık ve Koyu Temalar Arasında Geçiş Yapma

2:50'de Tim, karanlık ve aydınlık temalar arasında da 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ılara tema tercihlerini seçme imkanı tanıyabileceğini öneriyor — örneğin, JavaScript veya sunucu tarafı mantığını kullanarak bir anahtar ekleyerek.

Kullanıcılar tarafından beklenen karanlık ve aydınlık temalar arasında geçiş yapabilme yeteneği, özellikle Windows uygulamaları veya tercih edilen renk şemasının otomatik olarak algılandığı mobil cihazlarda giderek daha fazla önem kazanıyor.

ASP.NET Core'da Yerleşim Çakışmalarını Düzeltme

Tim'in açıkladığı yaygın zorluklardan biri, üst gezinme çubuğu gibi belirli öğelerde tutarsız stillerdir. Saat 3:12'de, özel bir düzen CSS dosyasının (MainLayout.razor.css) varsayılan Bootstrap özelliklerini nasıl değiştirdiğini gösteriyor.

Bir .top-row seçici ile doğrudan bir renk ayarı bulur ve bu, tema ayarlarına yanıt vermez. Çözümü: Mevcut temaya göre stili Bootstrap'in yönetebilmesi için color özelliğini kaldırmak (3:47).

Override'i kaldırdıktan sonra, koyu tema daha temiz görünüyor. Açık temaya geri geçince de hâlâ çalışıyor — bu da Bootstrap'in seçilen temaya dayalı olarak dinamik olarak renk değerleri uyguladığını gösteriyor.

Tema Özellikli CSS Kurallarını Kullanma

4:17'de, Tim başka bir yararlı ipucu sunar: geliştiriciler, etkin modu altındaki farklı stilleri uygulamak için CSS'leri içinde tema tespitini kullanabilirler. Bu, data-bs-theme değerine yanıt vermenizi ve uygulamanızı buna göre şekillendirmenizi sağlar.

Örneğin, kullanıcının koyu veya açık modu seçmesine bağlı olarak 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 eski bir ASP.NET MVC projesine geçerek Bootstrap 5.3 kullanmayan uygulamalarda karanlık modu nasıl etkinleştireceğini gösteriyor. Bootstrap CSS dosyasını açtığında, karanlık modu desteklemeyen sürüm 5.1.0 olduğunu fark ediyor (5:07).

MVC'de CDN ile Bootstrap'i Yükseltme

Tim, yerel Bootstrap dosyasını GetBootstrap web sitesinden CDN sürümüyle değiştirmenizi önerir. Saat 5:51'de, hem CSS hem de JavaScript eklerini güncelleyerek _Layout.cshtml görünümüne CDN bağlantılarını yapıştırıyor.

Bu şekilde, MVC uygulaması artık daha yeni Bootstrap sürümü sayesinde tema değiştirmeyi destekler. Ayrıca, CDN'lerin özellikle ilk kez ziyaret edenler için web sitenizi hızlandırabileceğini belirtir.

Karanlık Mod için Navigasyon Stilini Ayarlama

Koyu temayı etkinleştirdikten sonra, Tim bazı gezinme çubuğu stillerinin bununla çeliştiğini buluyor. Saat 6:40'ta, koyu görünümü bozan açık renkleri zorlayan navbar-light ve bg-white sınıflarını kaldırıyor.

Kaldırıldıktan sonra, gezinme çubuğu karanlık mod ile doğru şekilde uyum sağlar. Ancak Tim, renkleri değiştirilmiş olan diğer metin öğelerinin veya bileşenlerinin yine de manuel olarak ele alınması gerekebileceği konusunda uyarıyor (6:57). Burası, görünüm temalı CSS yazmak veya daha kolay yönetim için CSS değişkenleri kullanmak isteyebileceğiniz yerdir.

Özet: Bootstrap 5.3 Tema Desteği

Tim, Bootstrap 5.3'ün hem koyu hem de açık temaları tamamen desteklediğini, ancak özelleştirilmiş CSS'inizin bunu desteklemeyebileceğini tekrar hatırlatarak kapanışı yapıyor. Stillerinizi doğru bir şekilde yapılandırdıysanız, sınıfları kullanarak ve sabit kodlanmış renklerden kaçınarak tema değiştirmek daha sorunsuz hale gelir.

Saat 8:00'de, sadece şu şekilde ekleyerek vurguluyor:

data-bs-theme="dark"

tüm

Tim Corey'den Son İpuçları

ASP.NET Core'da Bootstrap veya temalarla ciddiyseniz, 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ş işlevselliği kullanarak ince ayar yapabilirsiniz. Windows, web veya diğer platformlar için uygulamalar geliştiriyor olun, bu yöntem temaları sorunsuz bir şekilde değiştirme esnekliği sağlar ve kullanıcılarınızı memnun tutar.