All projects · SaaS Product Tools
ThemeForge — Live Theme Customizer
A real-time theme customizer that lets users toggle light/dark mode, pick accent and secondary colors from preset swatches, and tune border radius…
A real-time theme customizer that lets users toggle light/dark mode, pick accent and secondary colors from preset swatches, and tune border radius — with every change reflected instantly across a live preview of buttons, cards, and typography. Preferences persist across sessions via localStorage.
- Store theme values in state, apply them through CSS variables, and persist them in localStorage (Challenge Clue)
- Full-featured live theme editor with Light/Dark mode, 5-swatch Accent & Secondary palettes, and live color preview bars
- Interactive live preview panel demonstrating real-time restyling of buttons, feature/content/info cards, and typography hierarchy
- Precision border radius slider (0px–36px) with dynamic value readout and instant border-radius transitions
- Automatic localStorage persistence and restore on load, ensuring custom themes survive page refreshes
Built with: HTML, CSS custom properties, Vanilla JavaScript, localStorage, native range input, data-attribute mode switching, Google Fonts (Sora, Outfit, JetBrains Mono)