Her vikinin kendi renk grubu vardır ve Tema Tasarımcısı aracılığıyla değiştirilebilir ve ayrıca açık mod ile karanlık mod arasında farklılık gösterir. Renkler, bir dizi CSS değişkeni/özel özellik aracılığıyla zaten gösteriliyor, ancak bu tür değişkenlerin satır içi style="..." içinde kullanılmasına vikimetinde izin verilmiyor. Stil sayfası, sınıf adlarını en yararlı değişkenlere bağlayarak bu boşluğu doldurur.

Ek olarak, stil sayfası, sayfanın kaynak kodu aracılığıyla temaya dayalı olarak serbest renkler ayarlamak için bir yöntem sunar.

Installation

Usage

Pek çok farklı değişken ve dolayısıyla birçok ilgili sınıf vardır, ancak bunların arkasında bir anlam vardır. Renklerden bazıları doğrudan Tema Tasarımcısı aracılığıyla belirlenirken, diğerleri Fandom tarafından otomatik olarak seçilir. Aşağıda, daha sonra listelenen sınıf adları olmadan mevcut renklerin bir listesi bulunmaktadır:

• Vikinin arka plan rengi ve uygun metin rengi
• Sayfanın arka plan rengi ve uygun bir metin rengi
  • Sayfanın ikincil arka plan rengi, ana renkten biraz farklı
• Bağlantı metni için doğal olarak kullanılan ancak uygun bir metin rengiyle arka plan rengi olarak da kullanılabilen bağlantı rengi
• Bilgi kutularında varsayılan olarak kullanılanla aynı vurgu rengi
• "Alarm", "Uyarı", "Başarı" ve "Mesaj" renkleri
• Vikinin yapışkan gezinme çubuğunun arka plan rengi (sayfayı aşağı kaydırırken ekranın üst kısmında görünen) ve uygun bir metin rengi

İstenen renk, öge üzerinde doğru sınıf adı belirtilerek uygulanır, aşağıdaki kod örneklerine bakın.

Sınıf adları

Aşağıda mevcut sınıf adlarının bir listesi bulunmaktadır. Bazı sınıfların, öğe üzerine gelindiğinde rengi biraz değiştiren isteğe bağlı bir modu vardır. Bu, renk sınıfının yanı sıra with-hover sınıfı eklenerek etkinleştirilir.

Liste aynı zamanda canlı bir demodur. Hesabınızda DemoScripts etkinleştirildiyse (varsayılan olarak olmalıdır), her liste ögesi ayrıca bu vikinin temasına göre ilişkili rengini gösterir. Renklerin değiştiğini görmek için açık ve koyu tema arasında geçiş yapın ve fareyle üzerine gelme efektini görmek için with-hover bölümünün üzerine gelin.

• theme-body
  • with-hover
• theme-page
  • with-hover
• theme-page-secondary
  • with-hover
• theme-accent
  • with-hover
• theme-link
  • with-hover
• theme-alert
  • with-hover
• theme-success
• theme-warning
• theme-message
• theme-sticky-nav
• theme-body-text
  • with-hover
• theme-page-text
  • with-hover
• theme-accent-text
  • with-hover
• theme-link-text
  • with-hover
• theme-alert-text
  • with-hover
• theme-success-text
• theme-warning-text
• theme-message-text
• theme-sticky-nav-text
• theme-border

Notlar

• Temel sınıflar hem arka planı hem de metin rengini etkilerken, -text sınıfları yalnızca metin rengini etkiler. Her iki türü de aynı öge üzerinde birlikte kullanmak mümkündür ve bu, birinden arka plan rengi, diğerinden metin rengi ile sonuçlanacaktır. Yine de, kombinasyonun her iki temada da okunabilir olduğundan emin olun.
• theme-border sınıfı, tek başına veya diğer sınıflardan herhangi biri ile birlikte kullanılabilir. Temanın "sınır renginde" sağlam bir 1px kenarlık uygular ve kenarlığın genişliğini ve türünü site CSS'si veya satır içi style="..." özniteliği aracılığıyla özelleştirebilirsiniz. Özelleştirirken, border-width: ve border-style: uzun özellik adlarını kullandığınızdan emin olun. Belirli bir renk olmadan border: 5px solid; gibi kısayol formunu kullanmak, kenarlık rengini metin rengiyle eşleşecek şekilde sıfırlar. Bu da iyidir, ancak bu durumda sınır sınıfına ihtiyacınız yoktur.

Examples

<div class="theme-page-secondary" style="padding: 1em;">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
</div>

<span class="theme-alert-text">Lorem ipsum</span> dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

<div class="theme-accent with-hover">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
</div>

<div class="theme-body theme-page-text">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
</div>

<div class="theme-border" style="border-style: dashed; border-width: 10px;">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
</div>

<div class="theme-page-secondary theme-border" style="alpha: 70%; padding: 1em;">
<span style="font-size: 150%;">Lorem Ipsum</span><div class="theme-alert" style="height: 3px;">&nbsp;</div>
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
</div>

Özel tema tabanlı renkler

Yukarıdaki sınıflar, vikinin önceden tanımlanmış paletinden tema tabanlı renklerin uygulanmasına izin verir. Ancak bazen vikiler belirli yerlerde (renkli şablonlar veya tablolar gibi) özel renkler kullanmak ister ve yine de her tema için farklı renkler ister. Bu, theme-custom özel sınıfı kullanılarak ve özel özellikler aracılığıyla renkler ayarlanarak yapılabilir. Özel özellikler şunlardır:

• --background-light
• --background-dark
• --color-light
• --color-dark
• --border-color-light
• --border-color-dark

İşte nasıl kullanılacağına dair bir örnek:

<div class="theme-custom" style="--background-dark: darkblue; --background-light: lightblue; --border-color-light: lime; --color-dark: yellow; --color-light: purple;">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
</div>

Belirli bir değer eksikse, arka plan varsayılan olarak renksiz (saydam), metin rengi viki sayfasının metin rengi ve kenarlık rengi metin rengiyle eşleşir. Ancak, varsayılan olarak gerçek bir kenarlık eklenmez. Eklemek için border-width: ve border-style: kullanın.

See also

• ThemeStyle