Dark mode / Light Mode switcher button

Dark mode / Light Mode switcher button

Overview FAQ Reviews (1) Discussion
agison

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...
Click to expand...

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?
 
nicodak said:
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?
Click to expand...
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)
 
ChrisTERiS said:
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)
Click to expand...

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.
 
trapped_soul said:
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.
Click to expand...

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!
 
TimWilson said:
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"?
Click to expand...
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:
xenforo.com

Unmaintained - Dark / Light Mode Automatic Toggle Switch / jsdmat

About jsdmat This modification enables a XenForo installation to automatically toggle light and dark styles based on the user browser's UI setting "prefers-color-scheme". Adding this CSS media feature directly to XenForo CSS definitions is hardly...
xenforo.com xenforo.com
 
Ricsca said:
in PAGE_CONTAINER I can not find <a href="{{ link('whats-new') }}"
Click to expand...
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
 
Ricsca said:
in PAGE_CONTAINER I can not find <a href="{{ link('whats-new') }}"
Click to expand...
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
 
You must log in or register to reply here.
Back
Top Bottom