Canvas Support

Toggle to light theme and set a cookie

5 replies · opened Sep 6, 2022

BbramvandenbulckeSep 6, 2022

I'm starting from this snippet: 

jQuery('.dark-mode').on( 'click', function() {
    jQuery("body").toggleClass('dark');
    SEMICOLON.header.logo();
    Cookies.set('canvas-color-scheme', 'dark');
    return false;
});

if( Cookies.get('canvas-color-scheme') == 'dark' ) {
	jQuery('body').addClass( 'dark' );
	SEMICOLON.header.logo();
}

But my case is different: I'm starting with a dark body class and users should be able to switch to a light body class.

Can you provide the code for this functionality?

SSemicolon WebSTAFFSep 7, 2022

Hello,

You can consider using the following code:
[ch_pre type="js"]jQuery('.light-mode').on( 'click', function() {
jQuery("body").toggleClass('dark');
SEMICOLON.header.logo();
Cookies.set('canvas-color-scheme', 'light');
return false;
});

if( Cookies.get('canvas-color-scheme') == 'light' ) {
jQuery('body').removeClass( 'light' );
SEMICOLON.header.logo();
}[/ch_pre]

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

BbramvandenbulckeSep 8, 2022

Thanks for the input. I was still having problems with the toggle and solved it with two icons (shown and hidden with CSS) and the following longer JS code: 

// Light mode

jQuery('.light-mode').on( 'click', function() {
	jQuery('body').removeClass('dark').addClass('light');
	SEMICOLON.header.logo();
	Cookies.set('canvas-color-scheme', 'light');
	return false;
});

if( Cookies.get('canvas-color-scheme') == 'light' ) {
	jQuery('body').removeClass('dark').addClass('light');
	SEMICOLON.header.logo();
}

// Dark mode

jQuery('.dark-mode').on( 'click', function() {
	jQuery('body').removeClass('light').addClass('dark');
	SEMICOLON.header.logo();
	Cookies.set('canvas-color-scheme', 'dark');
	return false;
});

if( Cookies.get('canvas-color-scheme') == 'dark' ) {
	jQuery('body').removeClass('light').addClass('dark');
	SEMICOLON.header.logo();
}
SSemicolon WebSTAFFSep 8, 2022

Hello,

We fully understand what you mean now. How about trying this code:
[ch_pre type="js"]let body = jQuery("body");

jQuery('.dark-mode').on( 'click', function() {
let toggle = jQuery(this);

if( toggle.hasClass('dark-mode-active') ) {
	toggle.removeClass('dark-mode-active');
	body.removeClass('dark');
	Cookies.set('canvas-color-scheme', 'light');
} else {
	toggle.addClass('dark-mode-active');
	body.addClass('dark');
	Cookies.set('canvas-color-scheme', 'dark');
}

SEMICOLON.header.logo();
return false;

});

if( Cookies.get('canvas-color-scheme') == 'dark' ) {
body.addClass( 'dark' );
} else {
body.removeClass( 'dark' );
}

SEMICOLON.header.logo();[/ch_pre]

Then you can control the Icons within the Toggle using the .dark-mode-active Class to Show/Hide the Dark/Light Icons.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

BbramvandenbulckeSep 8, 2022

Indeed, much nicer than my snippet.

Thanks!

SSemicolon WebSTAFFSep 8, 2022

Hello,

Very Happy to Help! :)

Please do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard