Astra Theme Dark Mode UI: Custom CSS Snippet for a Glassmorphism Toggle

Step 4: Add the JavaScript to Handle Switching and Memory

The CSS variables only take effect once the data-theme attribute is actually set on the page. This snippet handles three things: reading the visitor’s saved preference, respecting their OS-level dark mode setting if they haven’t chosen one yet, and saving their choice for future visits.

Add this through Astra → Custom Layout, a code snippets plugin, or directly before the closing </body> tag in your child theme:

(function () {
   const root = document.documentElement;
   const toggleBtn = document.getElementById('theme-toggle');
   const savedTheme = localStorage.getItem('astra-theme');
   const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

   const initialTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
   root.setAttribute('data-theme', initialTheme);

   toggleBtn.addEventListener('click', function () {
	const currentTheme = root.getAttribute('data-theme');
	const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
	root.setAttribute('data-theme', newTheme);
	localStorage.setItem('astra-theme', newTheme);
   });
 })();

This is a small script, but it covers the three things that make a dark mode toggle feel professional rather than broken: it doesn’t flash the wrong theme on load for returning visitors, it respects system-level preference for first-time visitors, and it remembers the choice across sessions.

Step 5: Apply Glassmorphism to Astra’s Existing Elements

To make the effect consistent across your site rather than isolated to custom sections, add the .glass-panel class — or target Astra’s built-in classes directly — to elements like the header, sidebar widgets, or Elementor sections:

[data-theme="dark"] .site-header,
 [data-theme="dark"] .ast-sidebar .widget {
   background: var(--card-bg);
   backdrop-filter: blur(14px);
   border: 1px solid var(--card-border);
 }

Test this carefully against your actual header content — text and icons that were styled for a solid background sometimes need a contrast adjustment once they’re sitting on a semi-transparent one.

Common Mistakes When Adding Dark Mode to Astra

• Forgetting the transition property. Without transition: background-color 0.35s ease, switching themes looks like a jarring flash instead of a smooth fade.
• Hardcoding colors inside Elementor widgets. If you set a text color directly on a widget instead of inheriting from theme colors, it won’t respond to the dark mode toggle at all. Stick to Astra’s Global Colors or your CSS variables wherever possible.
• Skipping the prefers-color-scheme check. Ignoring system preference on first visit is a small thing, but it’s the difference between a toggle that feels considerate and one that feels like an afterthought.
• Applying blur to too many layers at once. Stacking multiple blurred glass panels on top of each other tanks rendering performance on lower-end devices. Use it selectively on key UI elements, not the entire page.
• Not testing text contrast in both modes. A frosted panel that looks great in dark mode can make text unreadable in light mode if the same opacity values are reused. Adjust --card-bg and --card-border independently for each theme.

Performance Considerations

backdrop-filter is a GPU-accelerated property in modern browsers, so it’s generally safe to use, but it’s not free. If you’re building this for a client site where Core Web Vitals and page speed scores matter — which they should for any Tier-1 business site — keep blur effects limited to a handful of key elements (header, feature cards, the toggle button itself) rather than applying it globally across every section.