The Palette Switch Component - Neve Header / Footer Builder

📝Note: This component is part of the Neve Header / Footer Builder.

The Palette Switch 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

🧰 Using the Component

1

Start by adding the component into the rows, by clicking on the ➕ button and selecting the component.

2

Open the component's  settings to customize it, by clicking on the ⚙️icon.

🔮Customizing the Component

There are two panels with customizing options for this component, which allow you to create the desired header / footer:

⚙️General Panel

When you click on the ⚙️ icon, the General tab will appear on the left side. The Palette Switch toggle commutes between two color palettes from Customizer > Colors & Background, Light Palette, and Dark Palette.

📝 Note: The Pallete Switcher within the header builder will always consider the Base palette as default.  

The General panel also brings in the following options:

• Select icon - choose from the four options available.
  • At the end of the row with icons, you will find another button that works as a slider. Once you click on it, it will open an editor area that allows you to add custom SVG code.

📝 Note: The icon will be visible only after you click on the Save button.

• Icon Size - adjust the size of the icon to fit your header. It can also be set differently for Desktop | Tablet | Mobile.
• Label - insert a suggestive label for the switcher.
• Automatically adjust color scheme - the color scheme will be adjusted based on the user device preferences.

 📐Layout Panel

In the Layout tab, you also have access to advanced positioning options like:

• Padding and Margin - available in PX, EM, REM, and %, with a link button that helps establish the same dimension for all the directions  ( Desktop | Tablet | Mobile ).

🗂Useful Resources

Logo & Site Identity Modes

The Palette Switch component gives you the opportunity to adapt the logo & site identity component, to fit both light and dark modes. 

🎥 Video - how to create a Custom Header