Theme Overview
Soonie includes 20 carefully crafted themes organized in a 2-column layout. Each theme features its own color palette, button styling, and carefully selected gradients to create the perfect atmosphere for your coming soon page.
Theme Selector Features:
- 2-column layout with 10 themes per column
- Live preview with hover effects
- Cookie-based preference saving (GDPR compliant)
- Smooth theme transitions
- Mobile-responsive design
- Only shown when demo mode is enabled
All Available Themes
Column 1 (Themes 0-9)
Sunset
Warm oranges, pinks, and blues with golden accents
Theme ID: 0 (Default)
Ocean
Cool blues, purples, and teals for a calming effect
Theme ID: 1
Forest
Greens with earth tones and vibrant natural accents
Theme ID: 2
Purple Dream
Soft pastels with purple and pink gradients
Theme ID: 3
Warm Sunset
Bright yellows, magentas, and warm tones
Theme ID: 4
Cool Mint
Light blues, whites, and cool pastels
Theme ID: 5
Midnight Luxe
Deep navy elegance with gold button accent
Theme ID: 6
Rose Gold
Elegant golds with vibrant pink and coral highlights
Theme ID: 7
Arctic Storm
Cool grays with deep purples and electric blues
Theme ID: 8
Emerald Night
Dark navy base with brilliant emerald and ocean blues
Theme ID: 9
Column 2 (Themes 10-19)
Inferno 🔥
Blazing reds, oranges, and fiery yellows
Theme ID: 10
Volcanic Ash 🌋
Dark ash with molten red and ember accents
Theme ID: 11
Electric Blue ⚡
Vibrant electric blues and cyan highlights
Theme ID: 12
Cherry Blossom 🌸
Soft pinks and delicate floral tones
Theme ID: 13
Space Odyssey 🚀
Deep space purples and cosmic darkness
Theme ID: 14
Golden Hour 🌅
Warm sunset golds with tropical blues
Theme ID: 15
Neon Dreams 💫
Bright neon colors and electric vibes
Theme ID: 16
Autumn Blaze 🍂
Rich autumn oranges, reds, and golden yellows
Theme ID: 17
Deep Ocean 🌊
Dark ocean blues and aquatic depths
Theme ID: 18
Crystal Cave 💎
Light crystalline blues and ethereal whites
Theme ID: 19
Theme Configuration
Setting Default Theme
// In config.php, set your preferred default theme
define('DEFAULT_THEME', 6); // Midnight Luxe
// Available theme IDs: 0-19
// 0: Sunset (original default)
// 6: Midnight Luxe (premium dark theme)
// 10: Inferno (fiery energy)
// 14: Space Odyssey (cosmic mystery)
Enabling/Disabling Demo Mode
// Enable demo mode (shows demo card and theme selector)
define('DEMO', true);
// Disable demo mode (hides both demo card and theme selector)
define('DEMO', false);
Note: When demo mode is disabled, visitors will only see the default theme and won't be able to switch between themes. The demo card with admin/docs links will also be hidden.
Creating Custom Themes
Adding a New Theme
To add your own custom theme, edit the $themes array in config.php:
// Add a new theme (ID 20) to the themes array
20 => [
'name' => 'Your Custom Theme',
'colors' => ['#color1', '#color2', '#color3', '#color4', '#color5', '#color6'],
'button_gradient' => 'linear-gradient(45deg, #color1, #color2)'
]
Adding CSS for Theme Preview
Add the corresponding CSS class in index.php:
.theme-option.theme-20 {
background: linear-gradient(45deg, #color1, #color2, #color3, #color4);
}
Color Selection Tips
Best Practices for Custom Themes:
- Use 6 colors: Provides enough variety for smooth gradients
- Test contrast: Ensure white text is readable on your background
- Consider mood: Colors should match your brand personality
- Button gradient: Should stand out but complement the background
- Mobile testing: Verify theme looks good on all devices
Theme Use Cases
🚀 Tech Startups
Recommended: Space Odyssey (14), Electric Blue (12), Arctic Storm (8)
These themes convey innovation, technology, and forward-thinking.
🛍️ E-commerce & Retail
Recommended: Midnight Luxe (6), Rose Gold (7), Cherry Blossom (13)
Elegant themes that suggest premium quality and luxury shopping.
🎮 Gaming & Entertainment
Recommended: Inferno (10), Neon Dreams (16), Volcanic Ash (11)
High-energy themes that create excitement and intensity.
🌱 Nature & Wellness
Recommended: Forest (2), Crystal Cave (19), Cool Mint (5)
Calming, natural themes that promote peace and wellness.
💼 Professional Services
Recommended: Deep Ocean (18), Midnight Luxe (6), Emerald Night (9)
Sophisticated themes that convey trust and professionalism.
Theme Performance
Optimized for Performance
- CSS-only animations: No JavaScript performance impact
- Hardware acceleration: Uses GPU for smooth gradients
- Memory efficient: Themes switch without page reload
- Mobile optimized: Reduced complexity on touch devices
Browser Compatibility
- ✅ Chrome/Chromium 60+
- ✅ Firefox 55+
- ✅ Safari 12+
- ✅ Edge 79+
- ✅ Mobile Safari iOS 12+
- ✅ Chrome Mobile Android 60+
Fallback Support: Older browsers will display the default theme without theme switching functionality.