Change Style Switcher Icon For Light & Dark Modes

[JustBrowsing90]

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

<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

 

[Splicho]

You can do that with javascript, html and css.

I'd suggest you to paste the code snippet into GPT and ask him to add the function, also tell GPT to use Javascript.

 

[JustBrowsing90]

You can do that with javascript, html and css.

I'd suggest you to paste the code snippet into GPT and ask him to add the function, also tell GPT to use Javascript.

SplichoWorked out perfectly. Much appreciated