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


cakal

Yönetici
Katılım
5 Ara 2018
Mesajlar
332
Tepkime puanı
48
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