feat: Implement comprehensive theme system with 10 professional themes

[hkdeman]

Summary

• Add flexible theme API with CSS custom properties support
• Create 10 professional theme variants (Light, Dark, Nord, Ocean, Forest, Sunset, Corporate, Minimal, Cyberpunk, Sepia)
• Replace hardcoded colors in API Playground and OpenAPI components with theme variables
• Add theme selector component with visual previews
• Update theme.scss to use CSS custom properties for all components
• Add theme-specific customizations
• Maintain backward compatibility with existing dark mode toggle

Test plan

• Verify theme selector appears in header
• Test switching between all 10 themes
• Confirm API Playground theming works correctly
• Verify OpenAPI component theming
• Test theme persistence across page reloads
• Confirm backward compatibility with dark mode toggle

Closes #issue-9

🤖 Generated with Claude Code

[jazzberry-ai]

Bug Report

Name	Severity	Example test case	Description
Potential theme fallback issue	Low	Remove the 'dark' theme from the themes array.	If the system prefers a dark theme, but the 'dark' theme is not found, the system will default to the 'light' theme instead of a more appropriate fallback or an error state.
Unreliable theme cycling	Low	Modify the order of themes in the themes array.	The order in which themes are cycled using the toggleTheme function will be affected by the order of themes in the themes array. This could lead to an inconsistent user experience if the themes array is modified. Also, if a theme is removed, the cycling might skip a theme or unexpectedly jump to another.
Incorrect body class replacement	Medium	Add a class theme-something to the body element, then change themes.	The code in useTheme replaces all classes on the body that start with theme-, which may remove user-defined classes.

_{Comments? Email us.}

[hkdeman]

@claude each theme should have a light mode and dark mode. Also, you can change the font, padding, layout, etc. as well - right now it is just changes the background

[claude]

Claude finished @hkdeman's task —— View job

---

Enhanced Theme System Complete ✅

I've successfully enhanced the theme system to support light/dark modes for each theme and expanded theming beyond background colors to include typography, spacing, and layout.

Todo List:

• Read repository setup instructions
• Analyze current theme implementation
• Design enhanced theme structure with light/dark variants
• Update theme configuration with typography and layout variables
• Enhance theme selector component
• Update theme utilities and hooks
• Update SCSS to use new theme properties
• Test the implementation
• Commit changes

What's New:

🎨 Enhanced Theme System:

• 20 total themes (light/dark variants for each base theme)
• Typography support with font families, sizes, weights, and line heights
• Spacing system with padding, margins, border radius, shadows, and transitions
• Theme-specific customizations for unique styling

🔧 New Features:

• Separate light/dark toggle button for easy mode switching
• Enhanced theme selector showing both light and dark previews
• Typography customization per theme (Inter for Corporate, Helvetica for Minimal, etc.)
• Layout properties including shadows, transitions, and spacing

🎭 Special Theme Enhancements:

• Cyberpunk: Monospace fonts, uppercase text, neon glow effects
• Corporate: Inter font, professional spacing, clean styling
• Minimal: Helvetica, lighter weights, minimal shadows
• Sepia: Serif fonts, relaxed line height, text shadows

🔄 Backward Compatibility:

• Existing dark mode toggle works seamlessly
• Previous theme preferences automatically migrate
• All existing CSS classes continue to work

The theme system now provides comprehensive control over the entire visual design, not just colors. Each theme has its own typography personality and spacing characteristics, creating truly distinct visual experiences.

---

[jazzberry-ai]

Bug Report

Name|Severity|Example test case|Description
toggleMode function in useTheme hook can set undefined theme.|Medium|1. Suppose a theme with id test-theme exists but only has light variant and no dark variant (or vice versa).
2. Set the current theme to the existing variant, e.g., test-theme-light.
3. Call toggleMode().
4. The newThemeId will be test-theme-dark, which does not exist.
5. The setCurrentTheme will be called with undefined|The toggleMode function in the useTheme hook doesn't check if the generated newThemeId exists before calling setCurrentTheme. This can result in setting the current theme to undefined, leading to application errors. To fix this, add a check to ensure that newTheme is not undefined before calling setCurrentTheme.

_{Comments? Email us.}