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

cakal

Yönetici
Katılım
5 Ara 2018
Mesajlar
532
Tepkime puanı
175
Puanları
43
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");
    }
 
}
 

Yasal Uyarı

İçerik sağlayıcı paylaşım sitesi olarak hizmet veren webtiryakin.com 5651 sayılı kanunun 8. maddesine ve T.C.Knın 125. maddesine göre tüm üyelerimiz yaptıkları paylaşımlardan kendileri sorumludur. Hukuka ve mevzuata aykırı olduğunu düşündüğünüz içeriği BURADAN bildirebilirsiniz. Kısa sürede dönüş yapmaya çalışacağız.
Geri
Üst