Merhaba, tekrar hoş geldiniz!

Tüm özelliklerimize erişmek için şimdi bize katılın. Kaydolduktan ve giriş yaptıktan sonra, konu oluşturabilir, mevcut konulara yanıt gönderebilir, diğer üyelerinize itibar kazandırabilir, kendi özel mesajcınızı alabilir ve çok daha fazlasını yapabilirsiniz. Ayrıca hızlı ve tamamen ücretsiz, o halde ne bekliyorsunuz?

Dark mode / Light Modu değiştirici düğmesi

cakal

Yönetici
Katılım
5 Ara 2018
Mesajlar
366
Tepkime puanı
89
Puanları
28
Konum
izmir
Bu Şablon değişikliği, kullanıcıların Açık stil ve Koyu stil arasında geçiş yapmasına izin vermek için NavGroup'a (Arama Düğmesinden önce) bir düğme ekleyecektir.
1. Yeni bir Şablon Değişikliği oluşturun:
  • Şablon: PAGE_CONTAINER
  • Anahtar: add_a_style_switcher_button_to_navgroup (veya istediğiniz herhangi bir şey)
  • Bul:
HTML:
<a href="{{ link('whats-new') }}"
  • Değiştir:
HTML:
<xf:if is="$xf.visitor.canChangeStyle()">

    <xf:set var="$light_style" value="YOUR_LIGHT_STYLE_ID" />
    <xf:set var="$dark_style" value="YOUR_DARK_STYLE_ID" />

    <xf:if is="$xf.style.style_id == $light_style">
        <xf:set var="$new_mode" value="{$dark_style}" />
    <xf:else/>
        <xf:set var="$new_mode" value="{$light_style}" />
    </xf:if>
 
    <a href="{{ link('misc/style', null, {
        'style_id': $new_mode,
        '_xfRedirect': $redirect,
        't': csrf_token()
    }) }}"
    class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--styleswitcher }}"

    title="{{ phrase('style_chooser')|for_attr }}"
    aria-label="{{ phrase('style_chooser')|for_attr }}"
    aria-expanded="false"
    aria-haspopup="true">
        <i aria-hidden="true"></i>
        <span class="p-navgroup-linkText"></span>
    </a>
</xf:if>

UNUTMAYIN: YOUR_LIGHT_STYLE_ID ve YOUR_DARK_STYLE_ID öğelerini Light style ID ve Dark Style ID olarak değiştirin (örneğin 2 ve 3):
Ekran Görüntüsü 2021-09-13 14.31.26.png

2. Şimdi, Switcher düğmemizi bir FA simgesiyle biçimlendireceğiz, Bu css'i ekstralarınıza ekleyin.less
CSS:
.p-navgroup-link
{
    &.p-navgroup-link--styleswitcher i:after
    {
        .m-faContent("\f0eb");
    }
 
}
 
Üst Alt