Merhaba TurkHackTeam Ailesi,
Bugün forum için geliştirdiğim Dark++ Temasını sizlerle paylaşmak istiyorum.
Forumu özelleştirerek fazla göz yormayan, karanlık ve neon mavi bir arayüze çeviren chrome eklentisini yaptım.
Bugün forum için geliştirdiğim Dark++ Temasını sizlerle paylaşmak istiyorum.
Forumu özelleştirerek fazla göz yormayan, karanlık ve neon mavi bir arayüze çeviren chrome eklentisini yaptım.
Proje Bilgileri
- Yazılım / Proje İsmi: TurkHackTeam Dark++ Theme Extension
- Geliştirici: codewriter42 tarafından bireysel olarak geliştirilmiştir.
- GitHub Sayfası: https://github.com/codewriter42/thtdarkmode/tree/main/thtdark++theme
-
- Proje Durumu: v1.1.0 yayınlanmıştır. Temanın ilk kararlı sürümüdür. Yakın zamanda ayarlanabilir bir arayüz ile yeni bir güncelleme alacaktır.
Proje Hakkında Açıklamalar
TürkHackTeam Dark Neon ++ Theme, forumun arayüzünü değiştirmek isteyen, dark tema ve mavi neon renk kullanan bir eklentidir.
Özellikler:
Özellikler:
- Dark Arka Plan: Gözü yormayan, siyah ve gece mavisi tonlarıyla değiştirildi.
- Neon Yazı ve Animasyonlar: Linkler, butonlar ve profil avatarları neon mavi, glow efekti ile değiştirildi.
- Profil Kartları: Forumdaki mesaj kutuları ve kategori yerleri ve gölgelendirmelerle yazı rengi ne olursa olsun zıt renkler kullanılarak okunabilirlik artırıldı.
- Sade ve Hafif: Extension sadece CSS ve manifest ile çalışıyor. Tarayıcıyı kastırmaz ve gereksiz hiçbir script çalıştırmaz.
VirusTotal
manifest.json dosyası virustotal sonucu içintıklayınız.
style.css dosyası virustotal sonucu içintıklayınız.
style.css dosyası virustotal sonucu içintıklayınız.
Proje Ekran Görüntüleri
Ana Sayfa
Profil Kartları
Profil Sekmesi
Profil Resmi Animasyonu
Profil Kartları
Profil Sekmesi
Profil Resmi Animasyonu
Kurulum
İlk olarak bu eklentiyi tarayıcıya kurmak için url kısmına chrome://extensions/ yazın.
İkinci adımda sağ üst köşeye baktığınızda göreceksiniz ki geliştirici modu kapalı. Bunu açmanız gerekmektedir.
Şimdi ise sizlere yukarıda verdiğim Github sitesine gidin ve sağ tarafta yeşil bir renk ile kutucuk olacak. "Kod" yazıyor. Ona Tıkladığınızda "ZIP Dosyasını İndir" butonuna tıklamalısınız.
Burada ZIP inecek ve sonrasında sağ tıklayıp dosyayı ayıklamanız gerekecek. Resimde gösterdim.
Üçüncü adımda sol üstte göreceğiniz " Paketlenmemiş Öğe Yükle" butonuna taklamanız gerekiyor.
Dördüncü adımımızda ise klasörü seçmelisiniz.
Son olarak forumu yenilemeniz yeterlidir. Kod çalışacaktır.
Amaç: Bu eklenti, varsayılan temayı değiştirmek isteyen kullanıcılar için geliştirilmiştir.
İkinci adımda sağ üst köşeye baktığınızda göreceksiniz ki geliştirici modu kapalı. Bunu açmanız gerekmektedir.
Şimdi ise sizlere yukarıda verdiğim Github sitesine gidin ve sağ tarafta yeşil bir renk ile kutucuk olacak. "Kod" yazıyor. Ona Tıkladığınızda "ZIP Dosyasını İndir" butonuna tıklamalısınız.
Burada ZIP inecek ve sonrasında sağ tıklayıp dosyayı ayıklamanız gerekecek. Resimde gösterdim.
Üçüncü adımda sol üstte göreceğiniz " Paketlenmemiş Öğe Yükle" butonuna taklamanız gerekiyor.
Dördüncü adımımızda ise klasörü seçmelisiniz.
Son olarak forumu yenilemeniz yeterlidir. Kod çalışacaktır.
Amaç: Bu eklenti, varsayılan temayı değiştirmek isteyen kullanıcılar için geliştirilmiştir.
Meraklısına Eklemek İstediklerim
Bu kodu yazarken fark edeceğiniz gibi yapay zekadan yardım aldım. Nerelerde olduğunu merak ettiyseniz şöyle açıklayayım:
Efekt ve gölgeleri pikseli pikseline hesaplayamam, bu çok zor. Bu yüzden yapay zekadan yardım aldım.
İkinci olarak kodu yazdığımda çalışmadığını fark ettim. Neden olduğuna baktığımda !important kodu eklemediğimi anladım. !important kodu eklemezsek site kendi varsayılan temasını uyguluyor ama eklersek durum değişiyor. Aynı html kodunda body kısmına bir renk yazıp css body kısmına ayrı bir renk yazmaya benzer. Hangisinin önceliği varsa program onu uygular. Burada eklediğimiz !important kodu sayesinde sitenin temasını yok sayarak kendi temamızı yaptık.
Fikirlerinizi, temayı uygularken yaşadığınız sorunları ve eklenmesini istediğiniz özellikleri konunun altından belirtirseniz çok sevinirim. Diğer güncellemede görüşmek üzere...
Efekt ve gölgeleri pikseli pikseline hesaplayamam, bu çok zor. Bu yüzden yapay zekadan yardım aldım.
İkinci olarak kodu yazdığımda çalışmadığını fark ettim. Neden olduğuna baktığımda !important kodu eklemediğimi anladım. !important kodu eklemezsek site kendi varsayılan temasını uyguluyor ama eklersek durum değişiyor. Aynı html kodunda body kısmına bir renk yazıp css body kısmına ayrı bir renk yazmaya benzer. Hangisinin önceliği varsa program onu uygular. Burada eklediğimiz !important kodu sayesinde sitenin temasını yok sayarak kendi temamızı yaptık.
Fikirlerinizi, temayı uygularken yaşadığınız sorunları ve eklenmesini istediğiniz özellikleri konunun altından belirtirseniz çok sevinirim. Diğer güncellemede görüşmek üzere...
Son düzenleme:
Farklı renkleri de bekliyoruz
