Using the Color Switcher/Dark Mode Widget in the Header

A few updates back, we introduced the Dark Color Palette as part of Astra’s global color settings—allowing you to set the dark color scheme for your website.

Building on that, we’ve now introduced the Color Switcher widget in Astra Pro version 4.10.0 — a simple yet powerful addition that lets your website visitors toggle between two custom color palettes, such as light and dark modes, with just one click.

Fully integrated into the Header Builder, this widget requires no extra plugins or custom code. It’s designed to enhance accessibility, align with user preferences, and deliver a more modern, personalized browsing experience, making your site not only more functional but also more user-friendly.

What is the Color Switcher?

The Color Switcher Widget is a customizable toggle button that you can place in your website’s header. When clicked, it switches your site between two predefined color palettes:

• ✅ A Default Palette – usually your site’s standard (light) mode.
• ✅ An Alternate Palette – often used to create a Dark Mode experience.

This feature is completely native to Astra Pro, optimized for performance, and styled to match your website’s design.

What You’ll Need

Before setting it up, make sure:

• ✅ You’re using the Astra Theme.
• ✅ You have the Astra Pro Addon plugin installed and activated.
• ✅ Both the theme and the plugin are up to date with v4.10.0.

How to Add and Use the Color Switcher

Step 1: Open the Astra Customizer

1. In your WordPress dashboard, go to Appearance > Customize
2. Open the Header Builder

Step 2: Add the Color Switcher Widget

1. Click on any available section in the header (e.g., Primary Header, Above/Below Header)
2. Select Color Switcher from the available widgets
3. The switcher icon will appear in the live preview

Step 3: Customize the Widget

Once the widget is placed, you can customize:

• Alternate Palette – Choose the alternate Color Palette.
  • 💡 Pro Tip: Use a darker color scheme in the Alternate Palette to offer a smooth Dark Mode experience!
  • Dark Palette Behavior Options:
    • Match OS Preferences – Automatically apply light/dark mode based on your visitor’s system settings.
    • Force Page Reload – Reloads the page when switching modes for optimized performance.
• Icon Type – Choose a style like sun/moon, toggle, etc.
• Icon Size – Adjust to match your header style.
• Button Text – Optionally add custom text to display alongside the icon on the switcher button.
• Visibility – Show on desktop, mobile, or both.

• Design Options
  • Icon/Text Color
  • Backgrond
  • Border Radius
  • Spacing (Margin & Padding)

• Additionally, you can also customize the Colors of your switcher button in transparent sticky headers.

Why Use Dark Mode?

Dark Mode is one of the most popular uses of the Color Switcher. It helps:

• Reduce eye strain, especially at night
• Make your site more accessible and readable
• Give your site a modern and trendy feel
• Increase user engagement and retention
  

By offering Dark Mode through the Color Switcher, you’re improving your website’s usability without adding extra load or plugins.

Preview Your Changes

Once configured, click the switcher icon on your live site preview:

• Watch your color palette change instantly
• Make sure your text, background, and design elements look great in both modes
• Fine-tune as needed before publishing

Compatibility & Performance

The Color Switcher Widget is:

• ✅ Fully integrated with Sticky and Transparent Headers.
• ✅ Compatible with WooCommerce, LearnDash, Forms, and most plugins.
• ✅ Lightweight and performance-optimized.
• ✅ Built to work seamlessly with Astra’s Customizer—no conflicts, no bloated scripts.

Common Questions

Need a Visual Walkthrough?

We’re planning to release a walkthrough video for the Color Switcher Widget to help you set it up step-by-step. Once available, we’ll add the link right here—stay tuned!

We hope this guide has helped you understand how to set up and make the most of the Color Switcher Widget, including how to use it effectively as a Dark Mode toggle for your website.

If you have any questions or need further assistance, feel free to leave a comment below — we’re always here to help!