Skip to content

Seral Theme

Featured image for Seral Theme
Apr 19, 2026
View Project
vscode-theme developer-tools syntax-highlighting json-highlighting ui-design stripe-inspired

Seral Theme

VS Code için hazırladığım bu tema paketi, GitHub’ın temiz ve tanıdık editör hissini Stripe’ın daha modern, kontrastlı renk diliyle birleştiriyor. Amacım sadece “güzel görünen” bir tema çıkarmak değildi; uzun süre editör başında kalan geliştiriciler için okunabilir, dengeli ve karakteri olan bir çalışma ortamı kurmaktı.

Problem

Çok sayıda editör teması ya aşırı gösterişli olduğu için kodu geri plana itiyor ya da yeterince karakter taşımadığı için tüm dillerde benzer bir bulanıklık yaratıyor. Benim odağım, arayüzü sakin tutarken fonksiyonlar, JSON alanları ve temel sözdizimi gruplarını daha hızlı ayırt edilebilir hale getirmekti.

Bu projede odaklandığım noktalar

  • GitHub hissini kaybetmeden daha modern bir renk aksanı kurmak
  • Koyu ve açık varyantları aynı tasarım dilinde tutmak
  • Fonksiyon tanımları ve çağrılarını daha görünür hale getirmek
  • JSON anahtarları ve dizi indisleri gibi sık bakılan alanları ayrı bir odakla renklendirmek
  • Uzun editör kullanımında kontrastı korurken göz yorgunluğunu artırmamak

Bağlantılar

Tema önizlemeleri

Seral Dark tema önizlemesi
Seral Dark: GitHub'ın koyu tabanını Stripe aksanları ve altın fonksiyon vurgularıyla kullanan sürüm.
Seral Light tema önizlemesi
Seral Light: GitHub light yapısını mor vurgu ve daha belirgin sözdizimi kontrastıyla güncelleyen sürüm.

Öne çıkan özellikler

Koyu tema

Koyu varyant, GitHub’ın koyu primer tonlarını daha derin bir mavi-siyah tabanla birleştiriyor. Stripe moru aksanlar ve altın sarı fonksiyon vurguları sayesinde editör, sade kalırken odak noktalarını belirginleştiriyor.

  • Arka plan: #021024
  • Metin rengi: #f0f6fc
  • Vurgu rengi: #635bff
  • Fonksiyon vurgusu: #ffd700
  • JSON anahtar vurgusu: #ffd700

Açık tema

Açık varyantta ise GitHub’ın beyaz ve açık gri arayüz mantığı korunuyor; ancak doğrudan kopyalanmıyor. Mor aksanlar, daha canlı fonksiyon renkleri ve kontrollü kontrast sayesinde klasik açık tema hissi daha modern bir tona çekiliyor.

  • Arka plan: #ffffff
  • Metin rengi: #24292f
  • Vurgu rengi: #635bff
  • Fonksiyon vurgusu: #8250df
  • JSON anahtar vurgusu: #8250df

Sözdizimi ve JSON vurguları

Seral Theme’in benim için asıl fark yaratan bölümü sözdizimi tarafıydı. Özellikle JSON dosyaları, yapılandırma dosyaları ve fonksiyon ağırlıklı kod tabanlarında hangi token’in niye öne çıktığını daha net hissettirmek istedim.

  • Fonksiyon tanımları ve çağrıları için daha belirgin vurgu
  • JSON alan adları ve dizi indislerinde ayrı renk kimliği
  • Metin, anahtar sözcük, sınıf ve yorum bloklarında birbirini ezmeyen kontrast
  • Arayüz ile editör renkleri arasında kopukluk oluşturmayan tutarlı tema dili

Neden bu projeyi yaptım

VS Code tarafında kullandığım birçok tema ya GitHub tarafına çok yakın kalıp yeterince ayrışamıyor ya da Stripe benzeri modern paletleri kullanırken okunabilirliği düşürüyordu. Seral Theme’i daha çok kendi günlük kullanım ihtiyacımdan çıkardım: tanıdık, sakin ama kimliği güçlü bir editör deneyimi.

Bu proje aynı zamanda kişisel ürünleştirme tarafım için de iyi bir egzersiz oldu. Sadece renk seçmek değil; mağaza sayfası için paketleme, önizleme görselleri, açıklama dili, sürümleme ve kullanıcıya net bir kurulum akışı sunmak da işin parçasıydı.

Teknoloji ve paketleme akışı

Proje bir VS Code tema eklentisi olarak paketleniyor. Tema varyantları, editörün renk belirteçleri ve sözdizimi kapsamları için ayrı tanımlar içeriyor. Geliştirme akışında hedefim, temayı yalnızca önizleme ekranları üzerinden değil; JavaScript, Python, Markdown ve JSON gibi farklı günlük kullanım dosyalarında test ederek dengelemekti.

Teknik tarafta odaklandığım başlıklar:

  • VS Code tema paketleme yapısı
  • Koyu ve açık varyantlar için ayrık ama tutarlı belirteç kümeleri
  • Örnek dosyalarla manuel görünürlük kontrolü
  • Sürüm için .vsix paketleme akışı

Kurulum

Marketplace üzerinden

  1. VS Code içinde Extensions panelini açın.
  2. Seral Theme olarak aratın.
  3. Eklentiyi yükleyin.
  4. Renk teması menüsünden:
    • Seral Dark (GitHub x Stripe)
    • Seral Light (GitHub x Stripe) seçeneklerinden birini etkinleştirin.

Manuel kurulum

git clone https://github.com/aliyilmazco/seral-theme.git
cd seral-theme
npm install
npm run package
code --install-extension seral-theme-<version>.vsix

Kimler için uygun

  • GitHub editör görünümünü sevip daha karakterli bir palet isteyenler
  • Koyu ve açık mod arasında benzer tasarım dili arayanlar
  • JSON ve yapılandırma dosyalarıyla sık çalışan geliştiriciler
  • Sözdizimi vurgusunda özellikle fonksiyon odağını daha belirgin görmek isteyenler

Proje hedefi

Seral Theme’i tek seferlik bir renk seti olarak değil, sürekli iyileştirilebilecek bir editör ürünü olarak görüyorum. Hedef, farklı dil ve dosya tiplerinde tutarlı kalan; pazarlanabilir ama abartısız; görsel kimliği net ama çalışma verimini bozmayan bir tema çizgisi sürdürmek.

İleride bu proje için odaklanmak istediğim alanlar:

  • Daha fazla dil ve kapsam için ince ayar
  • Marketplace geri bildirimlerine göre renk dengesi iyileştirmeleri
  • Önizleme görselleri ve dokümantasyon kalitesini artırma
  • Yeni editör yüzeyleri için daha kapsamlı arayüz renk kapsaması