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

cakal

Yönetici
Katılım
5 Ara 2018
Mesajlar
463
Tepkime puanı
155
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");
    }
 
}
 
Geri
Üst Alt