Dark mode / Light Mode switcher button

Dark mode / Light Mode switcher button

agison

Well-known member
agison submitted a new resource:

Dark mode / Light Mode switcher button - Template modification to add Dark mode / Light Mode switcher button

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:
Code:
<a href="{{ link('whats-new') }}"

- Replace:
HTML:
<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...

Read more about this resource...
 

nicodak

Well-known member
Hello,

I don't understand very well the process...
What is the purpose to replace <a href="{{ link('whats-new') }}" in PAGE_CONTAINER with your code ?
what happens to this link in the tabs then?

And your replacement code ends with $0 is this a typo?
 

Mr Lucky

Well-known member
Hello,

I don't understand very well the process...
What is the purpose to replace <a href="{{ link('whats-new') }}" in PAGE_CONTAINER with your code ?
what happens to this link in the tabs then?

And your replacement code ends with $0 is this a typo?
In a template modification, the $0 puts in the replacement, so in this case it is the actual what’s new link so it is not in fact lost, it is added to the new code.

[EDIT] Note this is a template modification, not just an edit to the template itself.
 

ChrisTERiS

Well-known member
Well done. Thank you for sharing. Is it possible to have different icon per mode? eg
Switch to Dark: far fa-lightbulb-on (f672)
Switch to Light: fa-lightbulb-slash (f673)
 

Sebastiaan

Active member
Well done. Thank you for sharing. Is it possible to have different icon per mode? eg
Switch to Dark: far fa-lightbulb-on (f672)
Switch to Light: fa-lightbulb-slash (f673)

Yes, add the desired bulb in the extra.less template for each style.

Light style:
CSS:
.p-navgroup-link
{
    &.p-navgroup-link--styleswitcher i:after
    {
        .m-faContent("\f673");
    }
 
}

Dark style:
CSS:
.p-navgroup-link
{
    &.p-navgroup-link--styleswitcher i:after
    {
        .m-faContent("\f672");
    }
 
}
 
Last edited:
Top