1
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:
<a 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
