1
alain01
Need help to add a dark/light button in a theme
  • 9/24 13:20

  • alain01

  • Just can't stay away

  • Posts: 506

  • Since: 2003/6/20


Hi,
Firstly,
I am completely new to this.

I had an idea:
Offer a button on the theme to switch from light to dark mode.
I was inspired by what Richard did with the xSwatch4 theme and the toggle to show or hide the toolbar

I started the code based on his work but I have no javascript skills.

Here is what I did:
In the nav-menu.tpl file
I added line 6:
<class="btn btn-secondary" href="javascript:xswatchLightingToggle();" role="button"><span id="xswatch-lighting-ind"></span></a>


then at the end of the same file, I added a script:

<script type="text/javascript">
    
// Alain
    
    
function xswatchLightingIndLight() {
        $(
'#xswatch-lighting-ind').attr('class''fa fa-sun-o fa-fw');
    
//    $('#xswatch-lighting').show();
        
$('#$xswatchCss == 'css-cerulean');
    }
    function xswatchLightingIndDark() {
        $('
#xswatch-lighting-ind').attr('class', 'fa fa-moon-o fa-fw');
    //  $('#xswatch-lighting').hide();
        
$('#xswatchDarkCss == 'css-slate');
    }
    function xswatchLightingToggle() {
        var lighting_cookie = Cookies.get('
xswatch-lighting');
        if (lighting_cookie == '
off') {
            lighting_cookie = '
on';
            xswatchLightingIndLight();
        } else {
            lighting_cookie = '
off';
            xswatchLightingIndDark();
        }
        Cookies.set('
xswatch-lighting', lighting_cookie, { expires: 365, sameSite: 'strict' });
    }
    // set initial conditions based on cookie
    var lighting_cookie = Cookies.get('
xswatch-lighting');
    if (lighting_cookie == '
off') {
        xswatchLightingIndDark();
    } else {
        xswatchLightingIndLight();
    }
</script>


I know that the code
$('#xswatchDarkCss == 'css-slate');

is not correct, but i dont know How to do that...

So I need some help !

Thank you

2
Mamba
Re: Need help to add a dark/light button in a theme

In the "Default" Admin theme, there were on top-right three buttons to switch to different color: "Orange, Silver, Dark"

Maybe this will help you?
Support XOOPS => DONATE
Use 2.5.10 | Docs | Modules | Bugs

3
alain01
Re: Need help to add a dark/light button in a theme
  • 9/25 23:46

  • alain01

  • Just can't stay away

  • Posts: 506

  • Since: 2003/6/20


Yes, I saw that when I was confronted with the problem I am indicating here.
So I looked it up but didn't understand the code for switching colours.
We use the style variable (values : orange / silver / dark) but how does it work ???

In fact I found Richard's code very simple for the toggling of Display / Hide toolbar and the display of the associated icon in the xswatch4 theme

Login

Username:
Password:

Lost Password? Register now!

Who's Online

79 user(s) are online (56 user(s) are browsing Support Forums)


Members: 0


Guests: 79


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Nov 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits