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...
 

Nicolas FR

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:

trapped_soul

Well-known member
Hi,
Am just wondering - is there a way to place this somewhere else, for instance if you don't have the 'What's New' wrapper showing, how can it then be adjusted?
Many thanks.
 

agison

Well-known member
Hi,
Am just wondering - is there a way to place this somewhere else, for instance if you don't have the 'What's New' wrapper showing, how can it then be adjusted?
Many thanks.

it depends on many various things, template, $visitor existing, ...
Basically, you can place the link anywhere, but the template could be much different.
 

zoldos

Well-known member
@agison This is a really cool mod, just what I'm looking for, except, it doesn't work. lol I'm using ThemeHouse UI.X Dark and Light. Any ideas?
 

TimWilson

New member
I love this! My question is, we have more than one "light" theme, currently one blue and one green, and we're also considering holiday themes, etc.

But just one dark theme. :)

How would you suggest coding such that "light = whatever the user has previously set as their preference"?

Thanks!
 
Top