XxaviermorlotOct 6, 2021
Hi,
is it possible to keep the dark mode during the navigation into the website ?
Because the customer must click the dark buttom on every page !!
Thank you in advance for your help !
Regards
Xavier
Dark mode issue
8 replies · opened Oct 6, 2021
SSemicolon WebSTAFFOct 7, 2021
Hello,
Yes Absolutely! Simply add the .dark Class to the `` tag. This will enable Dark Scheme by default.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
XxaviermorlotOct 7, 2021
Hi,
Thank you but i don't want to enable the dark scheme by default.
I would like to keep the dark scheme on all the pages and the same if i let the light scheme by default.
I'm not sure to be clear.
I would like to start on index.html with light scheme but if i decide to switch after on dark scheme, i'd like to keep it dark on all the pages. like every pages dark when i switch on dark scheme and every pages light when i switch on light scheme !!
Can you help ?
Thank you in advance
XxaviermorlotOct 9, 2021
Hi,
Thank you but i don’t want to enable the dark scheme by default.
I would like to keep the dark scheme on all the pages and the same if i let the light scheme by default.
I’m not sure to be clear.
I would like to start on index.html with light scheme but if i decide to switch after on dark scheme, i’d like to keep it dark on all the pages. like every pages dark when i switch on dark scheme and every pages light when i switch on light scheme !!
Can you help ?
Thank you in advance
SSemicolon WebSTAFFOct 10, 2021
Hello,
Thank You so so much for your Super Kind Patience and Apologies for the Delays in replying.
This is Definitely Possible but requires Customization. You can consider setting a Cookie for the User after he clicks the "Switch to Dark Scheme" Button, using the following JS Code:
[ch_pre type="js"]Cookies.set('canvas-color-scheme', 'dark');[/ch_pre]
and then add the following code at the bottom of the Page to check the Color Scheme and set it accordingly:
[ch_pre type="js"]if( Cookies.get('canvas-color-scheme') == 'dark' ) {
jQuery('body').addClass( 'dark' );
}[/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.
XxaviermorlotOct 10, 2021
Hi,
Thank you very much !!
Sorry to ask but i'm a beginner and i don't where and how i have to do that.
Where & how do i need to past : Cookies.set('canvas-color-scheme', 'dark');
And where do i need to past : if( Cookies.get('canvas-color-scheme') == 'dark' ) {
jQuery('body').addClass( 'dark' );
}
It will be very usefull !!
Thank you in advance
regards
Xavier
SSemicolon WebSTAFFOct 11, 2021
Hello,
Very Happy to Help! :)
Can you please provide us with the Live URL where you have the Button to enable Dark Mode so that we can provide you with further assistance on this. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
XxaviermorlotOct 11, 2021
Hello,
Thank you very much !!
I have the Button on every page !
Here's the live URL !
Thank you in advance
Regards
Xavier
SSemicolon WebSTAFFOct 13, 2021
Hello,
Find the following lines of code on your Page:
[ch_pre type="js"]jQuery('.dark-mode').on( 'click', function() {
jQuery("body").toggleClass('dark');
SEMICOLON.header.logo();
return false;
});[/ch_pre]
and replace it with this following code:
[ch_pre type="js"]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();
}[/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.
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