Helium Theme Starter

This starter theme enhances your AEM + Tailwind UI with a polished and accessible light/dark theming system using OKLCH color values and a rich background image.

Features

• ✅ OKLCH color scale with smooth brightness levels
• 🌗 Theme-ready with light, dark, and future helium variants
• 🌠 Elegant background-image + backdrop-filter
• 🎨 Fully customizable via CSS variables
• ♿ Accessible with strong color contrast on both light/dark variants
• ✨ Subtle shadows, rounded cards, hover animations

Benefits

• Improves visual consistency across branded UIs
• Enables preview-ready styling for AEM Template & Component Catalogs
• Encourages token-based theming for scale

Setup

1. Include helium-theme.css in your AEM page template or head.html
2. Apply the .theme-helium class to a container or section
3. Customize variables in the :root as needed

Future Enhancements

• 🎚 Theme toggle switch (user-selectable)
• 🌓 Auto switch via OS preference prefers-color-scheme
• 🧩 Integrate with Tailwind’s @apply for atomic usage
• 💾 User preference storage via localStorage

This theme is ideal for showcasing your internal Component Catalog, especially in a polished enterprise context.