Does Astra Offer a Dark Mode Feature?

Yes! Astra now offers a built-in dark mode feature through the Color Switcher widget. The Color Switcher widget was introduced in Astra Pro version 4.10.0, allowing users to use the Astra Global Color Palettes to work as the Dark Mode switcher. This allows your website visitors to toggle between light and dark color palettes directly from your site’s header with a single click.

Astra Pro is an add-on plugin that unlocks the Color Switcher widget for dark mode, along with several other customization options. If you do not have Astra Pro installed, please check this guide.

How Dark Mode Works in Astra

The Color Switcher widget integrates directly into Astra’s Header Builder, giving you complete control over creating and implementing a dark mode experience. Here’s what makes it powerful:

• Custom Color Palettes: Define both a default palette (light mode) and an alternate palette (dark mode) using Astra’s global color settings.
• Frontend Toggle Button: The visitors can switch between modes using a customizable icon button in your header.
• OS Preference Matching: Automatically apply the appropriate mode based on visitors’ system settings.
• No Additional Plugins Required: Everything is built into Astra Pro, no extra code or third-party tools needed. However, make sure the Astra Pro plugin is installed on the website.

Check this guide to learn more about this feature in detail and how you can customize it on your website.

Third-Party Plugins Support

While Astra’s Color Switcher controls the global color settings throughout your site, the support of dark mode depends on how well third-party plugins adapt to theme styling. If the plugins support Astra’s global color palette, then the Dark Mode with Color Switcher will work well. This is supported by many plugins. Plugins for contact forms, membership areas, page builders, and other features may have their own styling that doesn’t automatically inherit Astra’s color palette.

Astra’s global color settings allow for extensive flexibility. You would need to choose the plugins that take styling from the theme and adapt to it.

Best Practice: Choose plugins that respect theme styling and use Astra’s CSS variables. The Color Switcher is fully compatible with WooCommerce, LearnDash, forms, and most popular plugins. You may need to add custom CSS for specific plugins that don’t automatically adapt to the color palette changes.

For complete step-by-step instructions on adding and customizing the Color Switcher widget, including design options, icon styles, and palette configuration, visit our comprehensive guide: Color Switcher Widget in Astra.

For any further questions or if you need assistance, feel free to reach out. We’re here to help!