Dark Color Palette

Astra introduces a dedicated Dark Palette that is specifically designed for dark mode, providing an optimized color scheme for low-light viewing.

This palette enhances the user experience by ensuring proper synchronization across different templates and components.

How Does the Dark Palette Work?

Global Color Implementation

The Dark Palette expands Astra’s global color settings by adding a dedicated dark mode color scheme. This allows for easy customization and seamless transitions between light and dark modes.

• You can identify and rename color palettes conveniently.

• Meaningful names have been assigned to presets instead of generic labels like “Color Set 1” or “Color Set 2.”

Palette Switching Behavior

The Dark Palette ensures a smooth transition when switching from light mode, allowing the entire site to adapt dynamically.

• On the frontend, all elements automatically follow dark mode styling

• Input box border colors dynamically adjust based on focus and normal states using global color settings.

Synchronization with Existing Color Settings

The Dark Palette seamlessly integrates with existing global color settings, ensuring smooth performance and no additional resource usage.

• No additional operational costs are introduced, as it leverages existing global color settings.
• Synchronization ensures seamless transitions without affecting other palette

Compatibility with Templates and Plugins

Template Compatibility

Astra has improved template handling by ensuring consistent color application across designs.

Previously, some templates used static colors instead of global colors, leading to inconsistencies. With this update:

• standard templates and Spectra templates are fully compatible with the Dark Palette.
• Additional templates will be optimized in future updates.

Plugin Compatibility

The Dark Palette works with major form plugins, including:

• WPForms
• Gravity Forms
• Contact Form 7
• Fluent Forms

Additionally, it supports other plugins such as:

• BuddyPress
• WePlace
• LoDash
• ElementsKit

Handling Plugin-Specific Color Options

Some plugins have their own background or text color settings, which may not automatically adapt to Astra’s dark mode.

• The Dark Palette does not override plugin-specific colors to avoid conflicts.
• If a plugin allows theme-based colors, the Dark Palette will be applied seamlessly.
• For example, in the SureCart checkout page, the default setting uses static colors. If you enable theme-based colors, the Dark Palette will be reflected correctly.

We hope this guide has been helpful! If you have any questions or feedback, feel free to reach out.