Add multi-theme system with four franchise-inspired themes

[Copilot]

This PR implements a comprehensive multi-theme system for the FormatX docs site, featuring four science fiction franchise-inspired themes with unique animations and color palettes.

Features

Four Franchise Themes

1. LCARS (Star Trek) - Default theme

   • Cyan (#00eaff) and purple (#7c4dff) color scheme
   • Swipe-from-left reveal animations
   • Star Trek LCARS interface aesthetic

2. Cyberpunk 2077

   • Neon cyan (#00fff9) and magenta (#ff006e) with yellow accents
   • Glitch effect animations with position shifts
   • High-contrast cyberpunk aesthetic

3. Star Wars

   • Iconic yellow (#ffe81f) and blue (#4bd5ee)
   • Hyperspace zoom effect with motion blur
   • Classic Star Wars visual style

4. Stargate

   • Sky blue (#87ceeb) and deep blue (#00bfff)
   • Ripple effect with scale animations
   • Stargate event horizon inspired design

Theme Selector

A persistent theme selector UI component appears in the bottom-right corner with:

• Quick theme switching between all four themes
• Active theme indicator (checkmark)
• Minimize/maximize functionality to save screen space
• State preservation in localStorage
• Responsive design for mobile devices

Technical Implementation

• Dynamic CSS Injection: themes.css is dynamically loaded via theme-loader.js
• Persistent Preferences: User's theme choice saved in localStorage (fx-franchise-theme)
• Smooth Transitions: Themes switch instantly without page reload
• CSS Variables: Each theme overrides root-level CSS variables for colors, shadows, and effects
• 7 Custom Animations: Unique keyframe animations for each theme's intro effects

Accessibility

Full support for users with motion sensitivity:

• All animations wrapped in @media (prefers-reduced-motion: no-preference) queries
• Theme selector transitions disabled for reduced-motion users
• Proper ARIA labels and keyboard navigation
• Button states properly communicated with aria-pressed

Files Changed

• docs/index.html - Added theme-loader.js script reference
• docs/theme-loader.js - New theme management system (6.4K)
• docs/themes.css - Four complete theme definitions (11K)

Screenshots

LCARS Theme (Default)

Cyberpunk 2077 Theme

Star Wars Theme

Stargate Theme

Theme Selector (Minimized State)

Testing

• ✅ All four themes display correctly with appropriate color schemes
• ✅ Theme switching works seamlessly without page reload
• ✅ localStorage persistence verified across sessions
• ✅ Theme selector minimize/maximize functionality works
• ✅ JavaScript and CSS syntax validated
• ✅ Reduced-motion support confirmed for accessibility
• ✅ No console errors during theme operations
• ✅ Mobile responsive design verified

Browser Compatibility

Works on all modern browsers with CSS custom properties support. Includes graceful fallback handling for localStorage access issues.

Original prompt

This PR adds a multi-theme system to the docs site with four franchise-inspired themes (LCARS default, Cyberpunk 2077, Star Wars, Stargate). Each theme includes its own intro animation (LCARS swipes, Cyberpunk glitch, Star Wars hyperspace, Stargate ripple). A persistent selector is added and themes.css is dynamically injected. The index.html includes the new theme-loader.js script. Safe for reduced-motion users.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.