🔄 Interactive Theme Switcher
Use the theme switcher in the navbar (top right) to change the site's appearance in real-time. Watch how the theme changes affect the entire site:
👆 Use the theme switcher in the navbar above
🎭 Available Themes
Click on any theme preview to see it applied to the site:
Default Theme
The standard Docusaurus theme with professional blue accents
Primary: #2e8555Professional Blue
Clean blue theme for corporate and professional sites
Primary: #1976d2Creative Purple
Vibrant purple theme for creative and artistic projects
Primary: #7c4dffWarm Sunset
Warm orange and yellow gradient theme
Primary: #ff6b35Nature Forest
Calm green theme inspired by nature
Primary: #2e7d32Material Indigo
Google Material Design indigo theme
Primary: #3f51b5Material Pink
Google Material Design pink theme
Primary: #e91e63Material Teal
Google Material Design teal theme
Primary: #009688Material Amber
Google Material Design amber theme
Primary: #ffc107Material Red
Google Material Design red theme
Primary: #f44336Agent Theme
Dark, sleek theme for tech and development projects
Primary: #00bcd4High Contrast
High contrast theme for accessibility
Primary: #ff0000⚙️ Technical Features
🔧 Configuration
- ✅ Persistent Storage: Theme preference saved in localStorage
- ✅ System Integration: Respects system dark/light mode preferences
- ✅ Dynamic Loading: CSS themes loaded on-demand
- ✅ Schema Validation: Theme configuration validated with Zod
🎯 Usage Patterns
- ✅ Navbar Integration: Available in site navigation
- ✅ Responsive Design: Works on all device sizes
- ✅ Accessibility: High contrast options available
- ✅ Customizable: Easy to add new themes
💻 Implementation
Basic Usage
import ThemeSwitcher from '@site/src/components/ThemeSwitcher';
// Simple usage - renders dropdown with all themes
<ThemeSwitcher />
// In navbar (automatic integration)
// The component is automatically available in navbar itemsTheme Configuration (themes.yml)
defaultTheme: "default"
themes:
- id: "blue"
name: "Professional Blue"
cssFile: "blue.css"
- id: "purple"
name: "Creative Purple"
cssFile: "purple.css"
# ... more themes