🎯 Choose Your Path
There are three ways to implement seasonal themes. Choose based on your needs:
Option A: Auto-Switching System (Recommended)
All six themes installed. They automatically activate based on the current month. Set it and forget it!
Best for: Long-term automation, minimal maintenance
Option B: Single Permanent Theme
Install just one theme that's always active. Great for establishing a consistent brand aesthetic.
Best for: Year-round branding, specific aesthetic
Option C: Manual Theme Switcher
Add visitor-facing buttons to let people choose their preferred theme. Interactive and fun!
Best for: User engagement, testing, flexibility
🚀 Option A: Auto-Switching System (Full Tutorial)
1 Get Your Current index.html
# Navigate to your repo
cd ~/kypria-technologies
# Pull latest version
git pull origin main
# Open in your editor
nano index.html
# OR
code index.html2 Add Theme Styles to <head>
Find the <head> section (near the top of your HTML) and add:
<!-- 🎃 Halloween Theme CSS -->
<style id="halloween-theme">
body.halloween-mode {
background: linear-gradient(135deg, #1a0f0f 0%, #2d1810 50%, #1a0f0f 100%);
background-attachment: fixed;
}
.pumpkin-icon {
font-size: 3rem;
animation: float-pumpkin 3s ease-in-out infinite;
}
@keyframes float-pumpkin {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-15px) rotate(5deg); }
}
/* ...rest of Halloween CSS... */
</style>
<!-- 🎄 Christmas Theme CSS -->
<style id="christmas-theme">
/* ...Christmas CSS... */
</style>
<!-- Add all other themes here -->📝 Note: Full theme code is in the Themes page
3 Add Theme Scripts Before </body>
Scroll to the bottom and add before </body>:
<!-- 🎃 Halloween Theme Script -->
<script id="halloween-script">
function initHalloween() {
document.body.classList.add('halloween-mode');
console.log('🎃 Halloween mode activated!');
}
// Auto-activate if October
const now = new Date();
if (now.getMonth() === 9) {
window.addEventListener('DOMContentLoaded', initHalloween);
}
</script>
<!-- Add all other theme scripts here -->4 Test Locally
⚠️ CRITICAL: Never skip local testing!
# Save your file, then serve locally
python3 -m http.server 8000
# Visit: http://localhost:8000What to check:
- ✅ Theme activates (check browser console for activation message)
- ✅ Animations are smooth
- ✅ No JavaScript errors (press F12 → Console)
- ✅ Mobile view looks good (F12 → Toggle device toolbar)
5 Deploy to Production
# Stop local server (Ctrl+C)
# Stage changes
git add index.html
# Commit with ceremony
git commit -m "feat: Add auto-switching seasonal theme system
- Halloween (October): Pumpkins + flames
- Christmas (December): Snowfall + lights
- New Year (January): Sparkles + confetti
- Spring (Mar-May): Falling petals
- Summer (Jun-Aug): Sun rays + heat
- Autumn (Sep, Nov): Leaves + fog
All themes auto-activate based on current month.
Tested locally: ✅ Animations smooth, no errors"
# Push to GitHub
git push origin main6 Wait for Netlify Build
Monitor deployment at: Netlify Dashboard
- Build starts: ~10 seconds after push
- Build duration: ~30-60 seconds
- Look for green "Published" status
7 Verify Production
# Wait 2-3 minutes after "Published"
# Hard refresh browser
# Windows/Linux: Ctrl + Shift + R
# Mac: Cmd + Shift + R
# Visit: https://kypriatechnologies.org
# Check console (F12) for activation message🎉 Deployment Complete!
Your seasonal theme system is now live! Themes will automatically switch based on the calendar.
🎨 Option B: Single Permanent Theme
Want just Halloween year-round? Here's how:
Modify the Activation Logic
Original (auto-switching):
// Activate if October
const now = new Date();
if (now.getMonth() === 9) {
window.addEventListener('DOMContentLoaded', initHalloween);
}Modified (always active):
// Always activate Halloween theme
window.addEventListener('DOMContentLoaded', initHalloween);Remove the month check entirely. Deploy following the same steps as Option A.
🎮 Option C: Manual Theme Switcher
Add interactive buttons for visitors to choose themes:
Add Theme Switcher HTML
Add this before your closing </body> tag:
<!-- Theme Switcher Panel -->
<div style="position: fixed; bottom: 20px; right: 20px; z-index: 10000;
background: rgba(0,0,0,0.9); padding: 20px; border-radius: 15px;
border: 2px solid #ff6600; max-width: 300px;">
<p style="color: #ffcc66; margin: 0 0 15px 0; font-weight: bold;
text-align: center;">🎨 Choose Theme</p>
<button onclick="activateTheme('halloween')"
style="width: 100%; margin: 5px 0; padding: 12px;
background: #2d1810; color: #ffcc66; border: 2px solid #ff6600;
border-radius: 8px; cursor: pointer; font-size: 1rem;
font-weight: bold; transition: all 0.3s ease;">
🎃 Halloween
</button>
<button onclick="activateTheme('christmas')"
style="width: 100%; margin: 5px 0; padding: 12px;
background: #1a3f5e; color: #ffffff; border: 2px solid #00aaff;
border-radius: 8px; cursor: pointer; font-size: 1rem;
font-weight: bold;">
🎄 Christmas
</button>
<button onclick="activateTheme('newyear')"
style="width: 100%; margin: 5px 0; padding: 12px;
background: #2d2310; color: #ffcc66; border: 2px solid #ffd700;
border-radius: 8px; cursor: pointer; font-size: 1rem;
font-weight: bold;">
🎆 New Year
</button>
<button onclick="activateTheme('spring')"
style="width: 100%; margin: 5px 0; padding: 12px;
background: #1a2d1a; color: #90ee90; border: 2px solid #32cd32;
border-radius: 8px; cursor: pointer; font-size: 1rem;
font-weight: bold;">
🌸 Spring
</button>
<button onclick="activateTheme('summer')"
style="width: 100%; margin: 5px 0; padding: 12px;
background: #2d2820; color: #ffd700; border: 2px solid #ff8c00;
border-radius: 8px; cursor: pointer; font-size: 1rem;
font-weight: bold;">
☀️ Summer
</button>
<button onclick="activateTheme('autumn')"
style="width: 100%; margin: 5px 0; padding: 12px;
background: #2d1f10; color: #daa520; border: 2px solid #8b4513;
border-radius: 8px; cursor: pointer; font-size: 1rem;
font-weight: bold;">
🍂 Autumn
</button>
<button onclick="clearTheme()"
style="width: 100%; margin: 10px 0 0 0; padding: 12px;
background: #ff5252; color: white; border: 2px solid #ff0000;
border-radius: 8px; cursor: pointer; font-size: 1rem;
font-weight: bold;">
❌ Clear Theme
</button>
</div>Add Theme Switcher JavaScript
<script>
// Theme switcher system
function activateTheme(themeName) {
// Clear any existing theme
clearTheme();
// Activate chosen theme
switch(themeName) {
case 'halloween':
initHalloween();
break;
case 'christmas':
initChristmas();
break;
case 'newyear':
initNewYear();
break;
case 'spring':
initSpring();
break;
case 'summer':
initSummer();
break;
case 'autumn':
initAutumn();
break;
}
console.log('🎨 Theme activated:', themeName);
}
function clearTheme() {
// Remove all theme classes
document.body.className = '';
// Remove all seasonal elements
const selectors = '.snowflake, .pumpkin-icon, .sparkle, .confetti, ' +
'.petal, .falling-leaf, .halloween-flame, ' +
'.christmas-lights, .spring-glow, .heat-wave, ' +
'.autumn-fog, .sun-ray';
document.querySelectorAll(selectors).forEach(el => el.remove());
console.log('🧹 Theme cleared');
}
</script>🐛 Troubleshooting Common Issues
Problem: Theme doesn't activate
Solution 1: Check month detection
// Add this temporarily to console
console.log('Current month:', new Date().getMonth());
// 0=Jan, 9=Oct, 11=DecSolution 2: Check console for errors
- Press F12 to open developer tools
- Click "Console" tab
- Look for red error messages
Solution 3: Manually trigger in console
// Type in browser console
initHalloween() // Force activation for testingProblem: Animations are laggy
Solution: Reduce particle count
// Change from:
for (let i = 0; i < 50; i++) {
// To:
for (let i = 0; i < 25; i++) {Problem: Changes not showing in production
Solution: Clear cache and hard refresh
- Hard refresh: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
- Or visit in incognito/private mode
- Or clear browser cache completely
✅ Testing Checklist
Before deploying, verify:
- Local server test completed (http://localhost:8000)
- No console errors (press F12)
- Animations run smoothly at 60fps
- Mobile preview looks good (F12 → device toolbar)
- Multiple browser test if possible (Chrome, Firefox, Safari)
- Network tab shows no failed loads
- Theme activates based on current month
- All seasonal effects appear correctly
🚀 The Complete Deployment Ritual
Follow this exact sequence every time:
# 1. Ensure on main branch
git branch # Should show: * main
# 2. Pull latest
git pull origin main
# 3. Make your changes to index.html
# 4. Test locally
python3 -m http.server 8000
# Visit http://localhost:8000 and verify
# 5. Stage changes
git add index.html
# 6. Commit with ceremony
git commit -m "feat: Add seasonal theme system
- Implemented auto-switching themes
- Tested locally: ✅ All working
- DNS verified: ✅ No conflicts"
# 7. Push to GitHub
git push origin main
# 8. Monitor Netlify (2-3 minutes)
# https://app.netlify.com/sites/kypria-technologies/deploys
# 9. Wait for "Published" status
# 10. Verify production
# https://kypriatechnologies.org
# Hard refresh: Ctrl+Shift+R
# 11. Check console
# Press F12 → Should see activation message📅 Maintenance Calendar
Recommended schedule for seasonal theme management:
| Date | Task | Action |
|---|---|---|
| Sep 1 | Prepare Autumn | Test autumn theme locally |
| Oct 1 | Halloween Active | Verify Halloween theme live |
| Nov 1 | Back to Autumn | Confirm autumn theme returns |
| Dec 1 | Christmas Active | Verify Christmas theme live |
| Jan 1 | New Year Active | Verify New Year theme live |
| Mar 1 | Spring Active | Verify Spring theme live |
| Jun 1 | Summer Active | Verify Summer theme live |
🎓 Pro Tips
- ✅ Version Control: Tag each seasonal update:
git tag v1.0-halloween - ✅ Backup First: Always run DNS backup before major changes
- ✅ Test Mobile: Use F12 device toolbar to check responsive design
- ✅ Monitor Performance: Check browser console for frame rate
- ✅ Document Changes: Keep a changelog in your repo
- ✅ Screenshot DNS: Before any deployment, screenshot Cloudflare