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...
 
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?
 
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.
 
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)
 
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:
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.
 
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.
 
@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?
 
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!
 
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"?
The switcher button implementation lives of its super-minimum-changes approach, there is no storage of a "before-used" theme available. You can possibly offer two buttons "blue" and "green" on the dark theme side, so the user could chose his wished light target style by click.

A more complex, but still very lightweight approach offers multi-relation-able style definitions including a local browser-related caching of the before-used "other" mode (blue, green or whatever last chosen) and can be found here:
 
in PAGE_CONTAINER I can not find <a href="{{ link('whats-new') }}"
Line 287

Code:
<a href="{{ link('whats-new') }}"
                        class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--whatsnew"
                        aria-label="{{ phrase('whats_new')|for_attr }}"
                        title="{{ phrase('whats_new')|for_attr }}">
                        <i aria-hidden="true"></i>
                        <span class="p-navgroup-linkText">{{ phrase('whats_new') }}</span>
                    </a>
 
Questo codice non funziona

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 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': $nuova_modalità,
        '_xfRedirect': $reindirizzamento,
        't': csrf_token()
    }) }}"
    class="p-navgroup-link p-navgroup-link--iconico p-navgroup-link--styleswitcher }}"

    title="{{phrase('style_chooser')|for_attr }}"
    aria-label="{{ frase('style_chooser')|for_attr }}"
    aria-expanded="falso"
    aria-haspopup="true">
        <iaria-hidden="true"></i>
        <span class="p-navgroup-linkText"></span>
    </a>
</xf:if>

$0[/CODICE][ATTACH type="full"]289211[/ATTACH]

Screenshot (50).webp
 
in PAGE_CONTAINER I can not find <a href="{{ link('whats-new') }}"
Are you using the default style? Most template modifications are based on this. I used this in a themehouse style and need to figure this out myself.
 
Last edited:
I found that piece but if I replace it with the code it gives me that error that you see in the scree.
 
Hi guys, I have a question for the beginning of the tutorial.

It says:

1. Create a new Template Modification:


  • Template: PAGE_CONTAINER
  • Key: add_a_style_switcher_button_to_navgroup (or anything you want)
  • Find field:

Code:

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


Please, where shall I create a new template modifcation (styles > templates > add template?)
and where shall I find that code?!



I have the impression, that I shall just open the file Page_Container,
find the code ( <a href="{{ link('whats-new') }}" )

and then replace it by the code, author has provided
HTML:

<xf:if is="$xf.visitor.canChangeStyle()">
...


Is that correct,
or am I wrong?!


Huge thanks
 
Top Bottom