Installation

Bu geliştirmenin iki versiyonu (açık ve koyu) olan FandomDesktop görünümü için özel olduğu gerçeğine dayanarak, bunun yerine bu stil sayfasını MediaWiki:FandomDesktop.css içine yükleyebilirsiniz.

Usage

Satir içi özelleştirme

Bir ögeyi mevcut FandomDesktop varyasyonuna göre farklı stiller kullanacak şekilde yapmak için sınıfına tbs-* eklemeniz gerekir (burada * tam olarak CSS özniteliğinin adıdır), ardından satır içi stiline --tbs-light-* ve --tbs-dark-* CSS değişkenlerini ekleyin. Değişkenleri belirtmezseniz, varsayılan değerleri kullanılacaktır.

Örneğin:

<div class="tbs-background-color tbs-border-color tbs-color" style="
  border-radius: 5px;
  border-style: solid;
  border-width: 3px;
  margin: auto;
  padding: 12px;
  width: 80%;
  --tbs-light-background-color: azure;
  --tbs-light-border-color: cornflowerblue;
  --tbs-light-color: blue;
  --tbs-dark-background-color: darkblue;
  --tbs-dark-border-color: darkviolet;
  --tbs-dark-color: cornflowerblue;">
<p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Sonuç (farkı kontrol etmek için diğer temaya geçin):

Tema tabanlı içerik

tbs-display sınıfına sahip ögelerde, only-light ve dark-only sınıflarını kullanarak mevcut temaya göre hangi içeriklerin görüntülenebileceğine karar verebilirsiniz.

Örneğin:

<div class="tbs-background-color tbs-border-color tbs-display" style="border-width: 2px; border-style: solid; padding: 12px;">Şu anda bu web sayfasını FandomDesktop görünümün <span class="light-only">açık</span><span><span class="dark-only">koyu</span> temasıyla görüntülüyorsunuz.</div>

Sonuç (farkı kontrol etmek için diğer temaya geçin):

(Yukarıdaki örnek, değişkenlerin ataması kaldırıldığında varsayılan CSS değerlerinin nasıl kullanıldığını da gösterir)

Ara söz

CSS kodları, aşağıdaki Python betiğini çalıştırarak oluşturulabilir:

attributes = (
    ( "background-color",      "page-background-color--secondary"),
    ( "border-bottom-color",   "border-color"),
    ( "border-color",          "border-color"),
    ( "border-left-color",     "border-color"),
    ( "border-right-color",    "border-color"),
    ( "border-top-color",      "border-color"),
    ( "box-shadow",            None),
    ( "caret-color",           "page-text-color"),
    ( "color",                 "page-text-color"),
    ( "column-rule-color",     "border-color"),
    ( "outline-color",         "border-color"),
    ( "text-decoration-color", "page-text-color")
)
with open("ThemeBasedStyling.css", "w") as fout:
    for attr in attributes:
        for theme in ("light", "dark"):
            fout.write(
                ".theme-fandomdesktop-{0} .tbs-{1} {2}\n"
                "\t--tbs-{0}-{1}: {4};\n"
                "\t{1}: var(--tbs-{0}-{1});\n{3}\n".format(
                    theme, attr[0], "{", "}",
                    f"var(--theme-{attr[1]})" if attr[1] else "none"
                )
            )
    fout.write(
        ".theme-fandomdesktop-dark .tbs-display .light-only,\n"
        ".theme-fandomdesktop-light .tbs-display .dark-only {\n"
        "\tdisplay: none;\n}"
    )

Farklı temalara uyum sağlamasına izin verilen çok daha fazla özellik istiyorsanız, bu Python betiğini düzenleyebilir ve yeni bir CSS seti oluşturabilirsiniz.

See also

• ThemeColorClasses - HTML ögelerine belirli sınıflar atayarak renkler ekleyin