Dark mode / Light Mode switcher button

[guclusat]

This Template modification will add a button to NavGroup (before Search Button) to allow users to switch between Light style and Dark style.

1. Create this Template modification:

• Template: PAGE_CONTAINER
• Find:

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

- Replace:

<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