[FR] - Themes — full theming support with a flexible theme API

[hkdeman]

Is your feature request related to a problem? Please describe.
I want to have great themes. Right now, we only have "theme.scss". Is it possible to create multiple themes (like 10 different) that will allow to have different professional settings. Keep them all super professional.

Also, add API, API playground related theme also theme.scss (as this is currently not present).

Describe the solution you'd like

• Add all the missing overrides in the theme.scss like API, API Playground, Open API, etc.
• Add 10 professional themes that have different settings - light/dark mode, padding, may be alignment

[hkdeman]

@claude can you fix this issue?

[claude]

Claude finished @hkdeman's task —— View job • claude/issue-9-20250617_060208 • Create PR ➔

---

✅ Comprehensive Theme System Implementation Complete!

I've successfully implemented a full theming system with 10 professional themes and a flexible theme API as requested.

🎨 What's Been Implemented:

10 Professional Themes:

1. Light - Clean light theme for optimal readability
2. Dark - Sleek dark theme for reduced eye strain
3. Nord - Arctic-inspired theme with cool blues and whites
4. Ocean - Deep ocean blues with professional appeal
5. Forest - Natural green theme with earthy tones
6. Sunset - Warm sunset colors with orange and pink accents
7. Corporate - Professional corporate theme with blue and gray
8. Minimal - Clean minimal theme with subtle grays
9. Cyberpunk - Futuristic theme with neon colors and high contrast
10. Sepia - Warm sepia tones for comfortable reading

Flexible Theme API System:

• CSS Custom Properties: All themes use CSS variables for maximum flexibility
• Theme Configuration: Centralized theme definitions in src/themes/theme-config.ts
• Enhanced Hook: New useTheme() hook supporting multiple themes
• Theme Selector: Visual theme picker with color previews in the header
• Backward Compatibility: Existing dark mode toggle still works

Complete Theme Coverage:

• ✅ API Playground: All hardcoded colors replaced with theme variables
• ✅ OpenAPI Components: Full theming support added
• ✅ Mermaid Diagrams: Theme-aware styling
• ✅ Code Blocks: Integrated with theme system
• ✅ All UI Components: Consistent theming throughout

Special Features:

• Theme-Specific Effects: Glowing buttons for Cyberpunk theme, gradients for Ocean theme
• Automatic Storage: Theme preferences saved to localStorage
• System Preference: Respects user's system dark/light mode preference
• Smooth Transitions: All color changes are smoothly animated

🚀 How to Use:

1. Theme Selector: Click the swatch icon (🎨) in the header to choose from 10 themes
2. Dark/Light Toggle: Still works for quick dark/light switching
3. Automatic Persistence: Your theme choice is remembered across sessions

📁 Files Created/Modified:

• src/themes/theme-config.ts - Theme definitions and API
• src/components/theme-selector.tsx - Theme picker component
• src/utils/hooks.ts - Enhanced theme hook
• src/theme.scss - Updated with CSS custom properties
• src/mdx/api-playground.tsx - Themed API playground
• src/mdx/open-api.tsx - Themed OpenAPI component
• src/ui/header.tsx - Added theme selector
• src/components/dark-mode-toggle.tsx - Updated for new system

🔗 Create Pull Request:

The theme system is now live and ready to use! Users can enjoy 10 beautiful, professional themes with full API/playground theming support. 🎉

---