Skip to content

Add multi-theme system with franchise-inspired themes and intro animations#8

Draft
hutoczky with Copilot wants to merge 2 commits into
masterfrom
copilot/add-multi-theme-system
Draft

Add multi-theme system with franchise-inspired themes and intro animations#8
hutoczky with Copilot wants to merge 2 commits into
masterfrom
copilot/add-multi-theme-system

Conversation

Copilot AI commented Oct 20, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor

Overview

This PR implements a comprehensive multi-theme system for the FormatX docs site, featuring four franchise-inspired themes with unique intro animations, persistent storage, and full accessibility support.

Features

🎨 Four Franchise Themes

Each theme includes carefully crafted color schemes inspired by popular sci-fi franchises:

  1. LCARS (Default) - Star Trek inspired

    • Clean futuristic interface with cyan (#00eaff), purple (#7c4dff), and aqua (#00ffc6)
    • Intro: Horizontal swipe panels animation

  2. Cyberpunk 2077 - Neon dystopia

    • Bold neon aesthetic with yellow (#fcee09), red (#ff003c), and cyan (#00f0ff)
    • Intro: Glitch effect with scanning line

  3. Star Wars - Space opera elegance

    • Classic gold (#ffe81f), royal blue (#4169e1), and red (#ff0000)
    • Intro: Hyperspace starfield zoom

  4. Stargate - Ancient technology

    • Sleek blue (#4a9eff), cyan (#00d4ff), and orange (#ff9500)
    • Intro: Ripple effect with rotating chevron ring

🎬 Intro Animations

Each theme features a unique, franchise-appropriate intro animation:

  • Plays automatically on first visit or when switching themes
  • Skipped on subsequent page loads for better UX
  • Duration ranges from 800ms to 1500ms depending on complexity
  • All animations respect prefers-reduced-motion user preferences

🎛️ Theme Selector UI

A persistent, user-friendly theme selector appears in the bottom-right corner:

  • Minimizable/expandable with state preservation
  • Visual theme preview with gradient icons
  • Active theme highlighting
  • Glass-morphism design matching the site aesthetic
  • Mobile responsive with touch-friendly controls

♿ Accessibility

Fully accessible implementation:

  • Reduced Motion Support: All animations reduced to 0.01ms for users who prefer reduced motion
  • Keyboard Navigation: Full keyboard support with Tab, Enter/Space, and arrow keys
  • ARIA Attributes: Proper role, aria-label, aria-checked on all interactive elements
  • Screen Reader Friendly: Semantic HTML with descriptive labels

💾 Persistence

Theme preferences are saved using localStorage:

  • fx-franchise-theme: Stores selected theme ID
  • fx-theme-selector-minimized: Stores selector minimized state
  • Preferences persist across page reloads and browser sessions

🔧 Developer API

Public JavaScript API for programmatic theme control:

// Get current theme
FormatXThemes.getCurrentTheme() // Returns: 'lcars' | 'cyberpunk' | 'starwars' | 'stargate'

// Switch theme with animation
FormatXThemes.setTheme('cyberpunk', false)

// Switch theme without animation
FormatXThemes.setTheme('starwars', true)

// Reset to default theme
FormatXThemes.resetTheme()

// Access theme configuration
FormatXThemes.themes

Implementation Details

Architecture

The theme system uses a clean separation of concerns:

  • themes.css: Theme definitions, intro animations, and selector UI styles
  • theme-loader.js: Dynamic CSS injection, theme switching logic, and UI generation
  • index.html: Simple script inclusion in the head

Themes are applied via a data-franchise-theme attribute on the <html> element, allowing CSS custom properties to cascade throughout the document.

Technical Approach

  • Dynamic CSS Injection: themes.css is loaded via JavaScript to avoid blocking initial page render
  • CSS Custom Properties: Each theme defines color variables that override defaults
  • Zero Dependencies: Built with vanilla JavaScript and CSS
  • Minimal Impact: Only ~19 KB total addition (uncompressed)
  • Non-Breaking: Existing dark/light theme toggle and all other functionality preserved

Testing

All automated tests pass (23/23):

  • ✅ File existence and syntax validation
  • ✅ Theme definitions for all 4 themes
  • ✅ Intro animations properly defined
  • ✅ Core JavaScript functions implemented
  • ✅ Reduced motion support in both CSS and JS
  • ✅ HTML integration verified
  • ✅ UI element styles complete

Browser Compatibility

Supports all modern browsers:

  • Chrome/Edge 90+
  • Firefox 88+
  • Safari 14+
  • Opera 76+

Files Changed

  • Added: docs/themes.css (513 lines)
  • Added: docs/theme-loader.js (277 lines)
  • Modified: docs/index.html (+1 line for script inclusion)

Total addition: ~19 KB uncompressed, no breaking changes.

Screenshots

The theme selector appears in the bottom-right corner with visual theme previews. Each theme completely transforms the site's color scheme while maintaining readability and accessibility.

This implementation provides a delightful, accessible theming experience that respects user preferences while adding visual interest through franchise-inspired aesthetics.

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.

@hutoczky
Add multi-theme system with franchise-inspired themes and intro anima…
cb1615b 
…tions

Co-authored-by: hutoczky <5453461+hutoczky@users.noreply.github.com>
Copilot AI changed the title [WIP] Add multi-theme system to documentation site Add multi-theme system with franchise-inspired themes and intro animations Oct 20, 2025
Copilot AI requested a review from hutoczky October 20, 2025 08:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@hutoczky hutoczky Awaiting requested review from hutoczky

Assignees

@hutoczky hutoczky

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@hutoczky