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

Merhaba, tekrar hoş geldiniz!

Bilgi sahibi olanlarla ihtiyaç duyanları buluşturmak, farklı bakış açılarına sahip insanları bir araya getirerek birbirlerini daha iyi anlamalarını sağlamak ve herkesin bilgisini paylaşmasını sağlamak istiyoruz.

cakal

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