XenForo Dark mode / Light Mode switcher button

[CR LEAKS]

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:

My light style:



My Dark style: