- Tham gia
- 28/02/2015
- Bài viết
- 16,204
- Được Like
- 12,547
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:
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.
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:
Chúc các bạn thành công.
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
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:
Chúc các bạn thành công.
Nguồn: xenforo.com