PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
15,228
Được Like
11,640
Dark mode / Light Mode switcher button - Nút chuyển đổi chế độ Sáng/Tối cho XenForo 2

Template modification này sẽ thêm một nút vào NavGroup (trước Nút tìm kiếm) để cho phép người dùng chuyển đổi giữa style Sáng và Tối.

1. Tạo một Template Modification mới:
  • Template: PAGE_CONTAINER
  • Key: add_a_style_switcher_button_to_navgroup (hoặc bất cứ thứ gì bạn muốn)
  • Find field:
    Mã:
    <a href="{{ link('whats-new') }}"
  • Replace field:
  • 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>
    
    $0
HÃY NHỚ: Thay thế YOUR_LIGHT_STYLE_ID và YOUR_DARK_STYLE_ID thành ID style sáng và ID style tối (ví dụ 2 và 3):

Screen Shot 2021-09-13 at 14.31.26.png

2. Bây giờ, Chúng ta sẽ tạo kiểu cho nút Switcher bằng biểu tượng FA, Thêm css này vào extras.less của bạn.
Less:
.p-navgroup-link
{
    &.p-navgroup-link--styleswitcher i:after
    {
        .m-faContent("\f0eb");
    }
 
}

3. Đặt một trong hai style trên là Style mặc định.
Bây giờ chúng ta có thể nhấp vào nút để chuyển đổi giữa style Sáng và tối:

dark.pnglight.png
Chúc các bạn thành công.


Nguồn: xenforo.com​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom