Header Palette Switch - Dark/Light theme

The Palette Switch header component adds a toggle or an icon to the header area that can be used to switch the website color scheme from light to dark or the other way around. Even if the names are light and dark, both color palettes controlled by this option can be fully customized with the desired colors.


Example of light color scheme


Example of dark color scheme

To enabled this component, navigate to Dashboard -> Appearance -> Customize -> Header, and add it on the desired header row.

Once it's enabled, let's explore its options.


General options

The Palette Swicth toggle commutes between two color palettes from Customizer -> Colors & Background, an example below.

The pallete switcher within the header builder will always consider the Base palette the default one, so the light one, and another one can be assigned as the dark one. Both of them can be fully customized by selecting the desired one and configuring the colors.

One both palettes were configured you can opt for an icon (three options available) or a toggle.

The icon size control is a responsive one, therefore, it allows different values for Desktop, Tablet, and Mobile devices.

The label field allows some text to be added next to the icon or the toggle used on the front end - for example here.

The light/dark theme can be set to automatically adapt based on the preferences of the user browser, by enabling this toggle.


Layout options

The layout options consists in three responsive controls, each of them offering the possibility to set a different value on each device, Desktop, Table, and Mobile. Those are the horizontal alignment, padding (the space around the icon inside the header palette component), and magrin (the space outside the header component).

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.