Dark mode jquery problem

3 replies · opened Nov 24, 2020

Hhigh8skyNov 24, 2020

Set the toggle for the dark mode of the theme sample.

It automatically responds to the dark mode according to the user's system.

The problem is that the toggle doesn't work properly in the main page header.

It works only in the sticky menu.

In other words, even if the system is in dark mode, the dark mode css works, but that toggle does not work, and if it changes to the sticky menu, it is displayed normally.

Where do I need to modify it to make it appear properly?

top code


							
                            
                                [](#modal-register)
                            
                            
                            
							
								[](#)
							

							
							
								[](#)
							

js code

	
	
		jQuery('.dark-mode').on( 'click', function() {
		    jQuery("body").toggleClass('dark');
		    SEMICOLON.header.logo();
		    return false;
		});
	
SSemicolon WebSTAFFNov 24, 2020

Hello,

Can you please provide us with a Live URL so that we can check this out and determine what the actual issues are so that we can provide you 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.

SSemicolon WebSTAFFNov 24, 2020

Hello,

We have checked out your Codes and in the css/custom.css File, find this code:
[ch_pre].dark .icon-dark { font-family: 'lined-icons'; }
.dark .dark-mode .icon-dark::before { content: "\e9e3"; }[/ch_pre]

and replace it with:
[ch_pre]body.dark .icon-dark { font-family: 'lined-icons'; }
body.dark .dark-mode .icon-dark::before { content: "\e9e3"; }[/ch_pre]

Since you are Toggling the Color on the body, it is required that you change the Icons based on the .dark Class defined on the body.

This should 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
Dark mode jquery problem · Canvas Template Support