When you enable Dark Mode functionality on your website, there are several ways to display a dark mode toggle button. By default, if you’re not using the Header Builder, the button will appear in the site header next to the main menu (which can be disabled via the Customizer).
However, you can place the button anywhere on your site using the theme’s Dark Mode Toggle Button element. This element is available in both WPBakery and Elementor, and it can also be used as a standalone shortcode anywhere on your site.
Shortcode format:
This is the default shortcode without any parameters:
[vcex_dark_mode_toggle]This a customized shortcode with some added parameters:
[vcex_dark_mode_toggle type="button" show_label="true" dark_label="Dark Mode" light_label="Light Mode" gap=".5rem" icon_size="lg" font_size="base"]Shortcode Paramaters
Here is a table with all the shortcode parameters available:
| Parameter | Value |
|---|---|
type | button, theme_button or link |
show_label | true or false |
dark_label | label to display when site is in light mode |
light_label | label to display when site is in dark mode |
gap | space between the icon and the label – can be any CSS unit (px, rem, em etc) |
font_size | font size for the whole element – can be any CSS unit (px, rem, em, etc) or a preset font size (xs, sm, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl) |
icon_size | icon size – must be a preset value (2xs, xs, sm, lg, xl, 2xl) |
el_class | extra classname to add to the element |
Note: You don’t have to use and define every parameter any parameter. Simply omit any parameter you do not wish to modify from it’s default state.