🎨 Theme Selector Demo

Welcome to the Theme Selector Demo! This post showcases the new floating theme selector that allows you to switch between two completely different themes instantly.

✨ How to Use the Theme Selector

Look for the 🎨 Theme button in the top right corner of your screen. Click it to open the theme dropdown and choose between:

🎯 Jekyll Minima (Default)

  • Clean & Modern design
  • Professional appearance
  • Easy to read typography
  • Subtle shadows and borders

πŸ•ΉοΈ Retro-Game

  • Nostalgic Gaming aesthetic
  • Neon blue, pink, and yellow colors
  • Pixel-style fonts
  • Gaming-inspired styling from FF7

πŸ”„ Switching Themes

  1. Click the 🎨 button in the top right corner
  2. Choose your theme from the dropdown
  3. Watch the magic happen as the entire site transforms!
  4. Your choice is saved automatically for future visits

🎭 Theme Features

Jekyll Minima Theme

  • Professional blog appearance
  • Clean typography
  • Subtle color scheme
  • Responsive design
  • Perfect for business or personal blogs

Retro-Game FF7 Theme

  • Final Fantasy 7 inspired
  • Dark background with neon accents
  • Animated scanlines
  • Glitch effects on hover
  • Gaming-inspired buttons
  • Retro pixel aesthetics

πŸ’‘ Try It Now!

Don’t just read about it - try it yourself!

  1. Look up and to the right - you’ll see the 🎨 button
  2. Click it to open the theme selector
  3. Switch between themes to see the difference
  4. Navigate around to see how each theme affects different pages

πŸ› οΈ Technical Details

The theme selector is built with:

  • Vanilla JavaScript (no frameworks needed)
  • CSS3 animations and transitions
  • Local storage to remember your choice
  • Responsive design for all devices
  • Accessibility features including keyboard navigation

🎨 Customization

Want to create your own theme? The system is designed to be easily extensible:

  1. Create a new SCSS file in the assets/ folder
  2. Add your theme to the theme selector dropdown
  3. Style your theme with custom CSS
  4. Test and refine until it’s perfect!

πŸš€ What’s Next?

  • More themes coming soon!
  • Custom color schemes
  • Seasonal themes
  • User-uploaded themes

Happy theme switching! πŸŽ‰

Try both themes and let me know which one you prefer in the comments below!