Canvas Support

Button dark mode

5 replies · opened Jun 11, 2023

MmohamedelsayehJun 11, 2023

Hello
How i can add button dark mode in header
And show like in photo in mobile menu

SSemicolon WebSTAFFJun 12, 2023

Hello,

This is definitely possible! You can simply the Codes from the color-mode-switcher.html Template. You can consider using this code:
[ch_pre]Light Mode" data-remove-html="Dark Mode">Dark Toggle[/ch_pre]

Simply add this within the .header-misc DIV.

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.

MmohamedelsayehJun 12, 2023

Its work
But i have some problems
1- When I choose the dark mode, the button for the mode does not appear When you click on any part of the page, but it is present ,, and it appears well in mobile mode.

2- the footer don't work in dark mode

3- some section in dark mode don't work in home page

4- header When going down it turns white in dark mode

5- some section text in it It becomes light gray and does not appear well and this is because the section did not turn to dark mode

6-contact us,, some section in it Does not work well in dark mode

Thanks alot for your helping

SSemicolon WebSTAFFJun 13, 2023

Hello,

  1. We can see the Dark/Light Toggle Button on both Large and Mobile Devices.

  2. The Footer has the .bg-white Class which is an absolute Class. You will need to use Contrast Classes: https://docs.semicolonweb.com/docs/utility-classes/contrast/ instead to make the Dark Mode work correctly. Consider using .bg-contrast-0 instead.

  3. This is also due to Absolute Classes. Use contrast classes as point 2.

  4. Remove data-sticky-class="not-dark" Attribute.

  5. This is also due to Absolute Classes. Use contrast classes as point 2.

  6. This is also due to Absolute Classes. Use contrast classes as point 2.

We Apologize for the Inconveniences, however, we currently do not provide Customization related Support according to the Item Support Policy: https://themeforest.net/page/item_support_policy and https://support.semicolonweb.com/support-policy/ . You will need to manually code this or Hire a Freelancer to help you out.

Hope this Helps!

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

MmohamedelsayehJun 14, 2023

thanks for helping me

the logo in footer in dark mode is dark
how i set logo in dark mode by white and in normal mode br dark
like header
thanks alote

SSemicolon WebSTAFFJun 16, 2023

Hello,

Currently the Contrast Classes are applicable only for Text Color, BG Colors and Border Colors. You will need to use Custom CSS in order to change images based on Dark/Light Classes. Consider using his code:
[ch_pre]
.contrast-image-light {
display: block;
}

.dark .contrast-image-light,
.contrast-image-dark {
display: none;
}

.dark .contrast-image-dark {
display: block;
}

attachment

attachment

attachment

attachment

[/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