xF2 Template Modification Dark mode / Light Mode switcher button

[uydudoktoru]

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:

• Template: PAGE_CONTAINER
• Key: add_a_style_switcher_button_to_navgroup (or anything you want)
• Find field:

<a href="{{ link('whats-new') }}"

Replace field:

<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

.p-navgroup-link
{
&.p-navgroup-link--styleswitcher i:after
{
.m-faContent("\f0eb");
}
}

3. Set one of two above styles is Default style.
Now we can click the button to switch between our Light and Dark style