xF2 Şablon Değişikliği Karanlık mod / Açık Mod değiştirme düğmesi
This Template modification will add a button to NavGroup (before Search Button) to let users switching between the Light style and the Dark style.
1. Create a new Template Modification:
Replace field:
REMEMBER: Replace YOUR_LIGHT_STYLE_ID and YOUR_DARK_STYLE_ID to Light style ID and Dark Style ID (for example 2 and 3):
2. Now, We will style our Switcher button with an FA icon, Add this css into your extras.less
3. Set one of two above styles is Default style.
Now we can click the button to switch between our Light and Dark style
This Template modification will add a button to NavGroup (before Search Button) to let users switching between the Light style and the Dark style.
1. Create a new Template Modification:
- Template: PAGE_CONTAINER
- Key: add_a_style_switcher_button_to_navgroup (or anything you want)
- Find field:
Kod:
<a href="{{ link('whats-new') }}"
Kod:
<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
REMEMBER: Replace YOUR_LIGHT_STYLE_ID and YOUR_DARK_STYLE_ID to Light style ID and Dark Style ID (for example 2 and 3):
2. Now, We will style our Switcher button with an FA icon, Add this css into your extras.less
Kod:
.p-navgroup-link
{
&.p-navgroup-link--styleswitcher i:after
{
.m-faContent("\f0eb");
}
}
Now we can click the button to switch between our Light and Dark style