Add multi-theme support with four franchise-inspired themes to docs site

[Copilot]

Overview

This PR adds comprehensive multi-theme support to the FormatX documentation site, featuring four distinct franchise-inspired themes that users can switch between. The selected theme persists across sessions using localStorage, and all themes include unique intro animations and full accessibility support.

Themes Implemented

🖖 LCARS (Star Trek) - Default

The original cyan/blue sci-fi aesthetic inspired by Star Trek's LCARS interface system. Features clean lines, futuristic gradients, and a warp core animation.

🌃 Cyberpunk 2077

Neon-soaked magenta and purple theme with glitch text effects and high-contrast neon borders. The preloader features flickering animations reminiscent of Night City.

⚔️ Star Wars

Classic gold and yellow color scheme paying homage to the iconic Star Wars opening crawl. Features warm, epic styling with blue accents.

🌌 Stargate

Blue chevron design inspired by Stargate's iconic gate interface. Features subtle blue glows and orange accents with a chevron-lock animation effect.

Technical Implementation

New Files

• docs/themes.css (307 lines) - Complete theme definitions including:

  • CSS custom properties for each theme
  • Theme-specific animations and effects
  • Reduced-motion media query overrides
  • Unique preloader styling per theme

• docs/theme-loader.js (176 lines) - Theme management system featuring:

  • Dynamic CSS injection
  • localStorage persistence (fx-theme key)
  • Theme selector creation and event handling
  • Public API for programmatic theme changes
  • Custom themechange event dispatching

Modified Files

• docs/index.html - Added theme-loader.js script tag in head, removed old binary theme toggle button
• docs/styles.css - Removed deprecated light theme CSS, cleaned up theme-specific styles
• docs/script.js - Removed old theme toggle logic (now handled by theme-loader.js)

Key Features

✅ Persistent Selection - Themes are saved to localStorage and automatically restored on page load
✅ Smooth Transitions - Subtle fade effect when switching themes
✅ Reduced-Motion Support - All animations respect prefers-reduced-motion: reduce
✅ Accessibility - Keyboard navigation, semantic HTML, ARIA labels
✅ Theme API - Exposed on window.FormatXThemes for debugging and programmatic control
✅ No Build Required - Pure CSS/JS, works immediately with GitHub Pages

Usage

Users can switch themes using the dropdown selector in the navigation bar. The selected theme persists across page reloads and browser sessions.

For developers, the theme API is available:

FormatXThemes.list()      // ['lcars', 'cyberpunk', 'starwars', 'stargate']
FormatXThemes.current()   // 'lcars'
FormatXThemes.set('cyberpunk')  // Switch to Cyberpunk theme

Screenshots

LCARS (Star Trek) - Default Theme

Cyberpunk 2077 Theme

Star Wars Theme

Stargate Theme

Deployment

After merge to master, GitHub Pages will automatically publish the changes. No additional configuration or build steps are required. Users will immediately see the default LCARS theme with the option to select their preferred theme from the dropdown.

Code Quality

• Minimal changes to existing code (only 68 lines removed)
• Clean separation of concerns
• Backward compatible (defaults to LCARS theme)
• Follows existing code style and patterns
• No breaking changes to functionality

Original prompt

Adds multi-theme support to the docs site with four franchise-inspired themes (LCARS default, Cyberpunk 2077, Star Wars, Stargate). Each theme includes its own intro animation. Adds a persistent selector (localStorage), dynamically injects themes.css, and includes theme-loader.js in index.html. Includes reduced-motion support. After merge, GitHub Pages (master/docs) will auto-publish.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.