Aracılığıyla paylaş

Visual Studio tema renklerini modernleştirme

Visual Studio temaları daha önce ayrıntılı, özelliğe özgü renk belirteçlerine dayanırdı. Zaman içinde bu yaklaşım binlerce ısmarlama değer ve özel renk üreterek tutarlılığı ve erişilebilirliği garanti etmek daha zor hale getirdi. Bu sorunu çözmek için sistemi net tasarım ilkelerine göre yeniden derledik: daha kolay bakım için daha az semantik belirteç, sürdürülebilir erişilebilirlik için tahmin edilebilir renk rampaları ve Visual Studio, Windows platformu ve diğer Microsoft araçları arasında daha uyumlu bir deneyim.

Bu makalede, visual studio 2026 ile uyumlu olacak şekilde önceki temaların nasıl değiştirildiği ve nasıl geçirileceği açıklanmaktadır.

Ne değişti?

Visual Studio 2022'nin öncesinde, kullanıma açık bir Visual Studio teması yaklaşık 34 kategori ve yaklaşık 1.806 renk belirteci içeriyor. Uzantılar genellikle daha fazlasını ekler. Bu yoğunluk bazı zorluklara neden oldu:

  • Birçok belirteç neredeyse aynıydı, yalnızca ton veya parlaklık açısından biraz farklılık gösteriyordu ve görsel kargaşaya ve karışıklığa neden oluyordu.
  • Tek tek özellikler (CodeAnalysis, Diagnostics, ManifestDesigner vb.) kendi benzersiz belirteçlerini oluşturarak parçalanmış ve tutarsız renk kullanımına neden oldu.
  • Çok sayıda özel giriş nedeniyle erişilebilirlik için renk karşıtlığını doğrulama zor oldu.
  • Genel kullanıcı deneyimi tutarsız hale geldi ve yüzeyler uyumsuz veya eşitlenmemiş görünüyor.

Visual Studio 2022 temasından kategorilere ve renk belirteçlerine bir örnek aşağıda verilmiştir:

<Theme ...>
...
<Category Name="CodeAnalysis" ...>
   <Color Name="RenameError">...</Color>
   <Color Name="RenameResolvableConflict">...</Color>
</Category>
<Category Name="Diagnostics"...>
...
   <Color Name="AdvancedListItemSelected">
      <Background ... />
      <Foreground ... />
   </Color>
   <Color Name="ButtonBackgroundDisabled">...</Color>
   <Color Name="ButtonBorderDisabled">
      <Background ... />
   </Color>
   <Color Name="ButtonTextDisabled">
      <Background ... />
   </Color>
...
</Category>
...
<!-- many more feature-scoped categories and hundreds of tokens -->
</Theme>

Visual Studio 2026, tahmin edilebilir adlandırma katmanlarıyla belirteçleri amaç öncelikli birkaç kategoride birleştirir. Kutudan çıktığı haliyle kabuk teması şimdi yalnızca dört üst düzey kategori ve 229 renk belirteci içeriyor. Bu da yaklaşık %87'lik bir azalmadır.

Visual Studio 2026 temasından anlamsal, amaç öncelikli belirteçler örneği aşağıda verilmiştir:

<Theme ...>
<Category Name="Shell">
...
   <Color Name="ControlFillSecondary"> ... </Color>
   <Color Name="TextFillPrimary"> ... </Color>
   <Color Name="SolidBackgroundFillBase"> ... </Color>
...
</Category>
</Theme>

Neden daha az belirteç daha iyi UX'in kilidini açıyor?

  • Amaç öncelikli adlandırma: Belirteç adları rollerini (ör. ControlFill, TextFill, AccentFill, Stroke, SystemFill) ve katmanını (Birincil, İkincil, Üçüncül) açıkça yansıtır ve kullanımı sezgisel hale getirir.

  • Basitleştirilmiş palet: Küçük bir paylaşılan belirteç kümesinin güncelleştirilmesi hem kabuk hem de uzantılar genelinde tutarlılığı anında artırır.

  • Daha fazla tutarlılık: Daha az özelleştirme noktası, daha az tesadüfi uyumsuzluk anlamına gelir ve hafifçe farklı varyantları giderir.

  • Geliştirilmiş erişilebilirlik: Merkezi renk rampaları ve semantik durumlar (Başarı, Dikkat, Kritik, Dikkat) karşıtlık doğrulamayı kolaylaştırır ve daha güvenilir hale getirir.

  • Daha iyi performans ve bakım: Anlamsal katmanlar, ayrıntılı renk ayarlayıcılarının yerini alır ve bakım yükünü azaltır ve kullanıcı arabirimi kalitesini artırır.

Temaları Visual Studio 2026'ya geçirme

Mevcut belirteçlerini küçük bir dizi yeni anlamsal belirteçle birleştirerek visual studio 2026 ile uyumlu bir tema oluşturabilirsiniz. Önceki tüm belirteçleri yeniden oluşturmanız gerekmez. Visual Studio 2026 yeni belirteçleri önce okur ve ardından önceki belirteçlere geri döner. Şu şekilde yapılır:

  1. Nesneye FallbackId="{Light or Dark theme GUID}" nesne ekleyin<Theme />.
Temel almak için tema FallbackId
Light {de3dbbcd-f642-433c-8353-8f1df4370aba}
Koyu {1ded0138-47ce-435e-84ef-9ec1f439b749}
  1. Önceki tema belirteçlerinden sonraki son iki kategori olarak aşağıdaki belirteç kümesini ekleyin. Kategori adının ve GUID'nin tam olarak aşağıdaki gibi kopyalandığından emin olun.

Işık tabanlı bir tema için minimum belirteç kümesi başlatıcısı

<Theme Name="MyAwesomeLightTheme" ...>
<!-- existing theme categories here -->
<Category Name="Shell" GUID="{73708ded-2d56-4aad-b8eb-73b20d3f4bff}">
   <Color Name="AccentFillDefault">
      <Background Type="CT_RAW" Source="FF5649B0" />
   </Color>
   <Color Name="AccentFillSecondary">
      <Background Type="CT_RAW" Source="E55649B0" />
   </Color>
   <Color Name="AccentFillTertiary">
      <Background Type="CT_RAW" Source="CC5649B0" />
   </Color>
   <Color Name="SolidBackgroundFillTertiary">
      <Background Type="CT_RAW" Source="FFF9F9F9" />
   </Color>
   <Color Name="SolidBackgroundFillQuaternary">
      <Background Type="CT_RAW" Source="FFFFFFFF" />
   </Color>
   <Color Name="SurfaceBackgroundFillDefault">
      <Background Type="CT_RAW" Source="FFF9F9F9" />
   </Color>
   <Color Name="TextFillSecondary">
      <Background Type="CT_RAW" Source="9E000000" />
   </Color>
</Category>
<Category Name="ShellInternal" GUID="{5af241b7-5627-4d12-bfb1-2b67d11127d7}">
   <Color Name="EnvironmentBackground">
      <Background Type="CT_RAW" Source="FFEEEEEE" />
   </Color>
   <Color Name="EnvironmentBorder">
      <Background Type="CT_RAW" Source="FF5649B0" />
   </Color>
   <Color Name="EnvironmentIndicator">
      <Background Type="CT_RAW" Source="66757575" />
   </Color>
   <Color Name="EnvironmentLogo">
      <Background Type="CT_RAW" Source="FF5649B0" />
   </Color>
   <Color Name="EnvironmentLayeredBackground">
      <Background Type="CT_RAW" Source="80FFFFFF" />
   </Color>
</Category>
</Theme>

Koyu tabanlı bir tema için minimum belirteç kümesi başlatıcısı

<Theme Name="MyAwesomeDarkTheme" ...>
<!-- existing theme categories here -->
<Category Name="Shell" GUID="{73708ded-2d56-4aad-b8eb-73b20d3f4bff}">
   <Color Name="AccentFillDefault">
      <Background Type="CT_RAW" Source="FF9184EE" />
   </Color>
   <Color Name="AccentFillSecondary">
      <Background Type="CT_RAW" Source="80000000" />
   </Color>
   <Color Name="AccentFillTertiary">
      <Background Type="CT_RAW" Source="CC9184EE" />
   </Color>
   <Color Name="SolidBackgroundFillTertiary">
      <Background Type="CT_RAW" Source="FF282828" />
   </Color>
   <Color Name="SolidBackgroundFillQuaternary">
      <Background Type="CT_RAW" Source="FF2C2C2C" />
   </Color>
   <Color Name="SurfaceBackgroundFillDefault">
      <Background Type="CT_RAW" Source="FF2C2C2C" />
   </Color>
   <Color Name="TextFillSecondary">
      <Background Type="CT_RAW" Source="C8FFFFFF" />
   </Color>
</Category>
<Category Name="ShellInternal" GUID="{5af241b7-5627-4d12-bfb1-2b67d11127d7}">
   <Color Name="EnvironmentBackground">
      <Background Type="CT_RAW" Source="FF1C1C1C" />
   </Color>
   <Color Name="EnvironmentBorder">
      <Background Type="CT_RAW" Source="FF9184EE" />
   </Color>
   <Color Name="EnvironmentIndicator">
      <Background Type="CT_RAW" Source="66757575" />
   </Color>
   <Color Name="EnvironmentLogo">
      <Background Type="CT_RAW" Source="FF9184EE" />
   </Color>
   <Color Name="EnvironmentLayeredBackground">
      <Background Type="CT_RAW" Source="4D3A3A3A" />
   </Color>
</Category>
</Theme>
  1. Renk değerlerini, önceki temaya gerektiği gibi uyacak şekilde ayarlayın.

FAQ

Bu neden köklü bir değişiklikti?

Tema rengi belirteci yapısı ve adlandırma kuralı değişikliklerinin yanı sıra, kullanıcı arabirimi kodunun çoğu önceki özellik kapsamlı belirteçler veya satır içi stiller yerine Fluent Tasarım Sistemi'nden gelen anlamsal stil belirteçlerini kullanacak şekilde yeniden düzenlenmiştir. Eski renk ve diğer stil kaynaklarının çoğu SDK'da kalırken, en son tasarımı yansıtmayabilir veya modernleştirilmiş kullanıcı arabiriminde tutarlı bir şekilde davranamayabilir.

Önceki belirteçleri kullanmaya devam edebilir miyim?

Önceki belirteçler daha önceki bazı yüzeylerde çözümlenebilir, ancak yeni ve yeniden düzenlenmiş UI yolları önce yeni anlamsal belirteçleri okur. Eski belirteçleri kullanıyorsanız, temalarda eksiklik riskiyle karşı karşıya kalırsınız.

Klasik Mavi tema nerede?

Bunun yerine bir tonlu tema ailesi ve Ekstra Karşıtlık düzenleyicisi görünüm seçenekleri eklendi. Daha yakın bir anma istiyorsanız topluluk Mavi Çelik temasını da yükleyebilirsiniz.

Daha az belirteç daha az özelleştirme anlamına mı geliyor?

Hayır---mantik katmanlar, küçük bir palet ayarlayarak geniş görsel kaydırmalar oluşturmanıza olanak sağlar. Yine de tema tonu, arka plan parlaklığı adımları ve sistem dolguları aracılığıyla farklı kişilikler oluşturabilirsiniz.

Performans etkisi mi?

Yeniden düzenleme, stil aramalarını ve gereksiz kaynakları azaltarak bellek yerelliğini iyileştirir ve ertelenmiş fırça oluşturmayı basitleştirir.

Düzenleyici renkleri de mi değişiyor?

Düzenleyici şu anda söz dizimi renklendirmesinin çoğunu korur. Bu değişiklik araç pencereleri, menüler ve iletişim kutuları gibi kabuk kullanıcı arabirimi paylaşılan yüzeylerini hedefler. Düzenleyici görünümünü (Ek Karşıtlık dahil) bağımsız olarak seçebilirsiniz.

  • Last updated on