- Joined
- Mar 25, 2024
- Messages
- 55
- Points
- 18
I have this code to change from light to dark mode but I'd like to have the icon change depending on what mode you've selected. For instance if you're currently on dark mode the icon would be the lightbulb on so when you click it to go to light mode the icon changes to the lightbulb off icon.
I have no idea how to do it so hopefully someone can look at the code & figure it out
I have no idea how to do it so hopefully someone can look at the code & figure it out
CSS:
<xf:if is="$xf.visitor.canChangeStyle()">
<xf:set var="$light_style" value="9" />
<xf:set var="$dark_style" value="10" />
<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 class="fal fa-solid fa-lightbulb-on"></i><i aria-hidden="true"></i>
<span class="p-navgroup-linkText"></span>
</a>
</xf:if>
$0