A working demonstration plugin for BrainDrive's Theme Service Bridge functionality. This plugin showcases real-time theme management within the BrainDrive platform through three interactive components that display, control, and monitor theme changes.
The ServiceExample_Theme plugin in action, showing real-time theme management through the Theme Display, Theme Controller, and Theme Listener modules.
This plugin serves as a working demo of BrainDrive's Theme Service Bridge, demonstrating:
- How modules interact with BrainDrive's theme system
- Real-time theme change detection and response
- Theme Service Bridge integration patterns
- Best practices for theme-aware plugin development in BrainDrive
- Theme Display - Show current theme information and service status
- Theme Controller - Interactive theme switching controls
- Theme Listener - Monitor and log theme changes in real-time
- Complete Theme Service wrapper implementation
- Proper service bridge connection handling
- Real-time theme change listening and response
- Theme-aware styling patterns
- BrainDrive platform (this plugin runs inside BrainDrive)
- Plugin Manager access in BrainDrive
- Install the plugin through BrainDrive's Plugin Manager
- The plugin will be available in your module library
- Create a new page in BrainDrive
- Add the demo modules to your page:
- Drag "Theme Display" module to the page
- Drag "Theme Controller" module to the page
- Drag "Theme Listener" module to the page
- Test the theme management:
- View current theme information in Theme Display
- Use Theme Controller to switch between light and dark themes
- Watch real-time theme change events in Theme Listener
- Notice how all modules automatically adapt their styling
- Current Theme Info: Shows active theme (light/dark)
- Service Status: Visual connection indicator
- Theme Properties: Displays CSS variables and theme metadata
- Refresh Function: Manual theme information refresh
- Real-time Updates: Automatically updates when theme changes
- Theme Toggle: Quick light/dark theme switch
- Theme Selection: Individual theme buttons
- Change Tracking: Counts theme changes made
- Status Feedback: Shows operation results and errors
- Theme Sync: Automatically reflects current theme state
- Event Monitoring: Logs all theme change events
- Change History: Tracks recent theme transitions with timestamps
- Statistics: Shows total changes and activity metrics
- Listener Controls: Start/stop/clear functionality
- Real-time Sync: Syncs with current theme when starting
This plugin demonstrates key Theme Service Bridge concepts:
// How the Theme Service Bridge is initialized
if (this.props.services?.theme) {
const currentTheme = this.props.services.theme.getCurrentTheme();
}// Get current theme
const currentTheme = this.props.services.theme.getCurrentTheme();
console.log('Current theme:', currentTheme); // 'light' or 'dark'// Change theme (if supported)
if ('setTheme' in this.props.services.theme) {
this.props.services.theme.setTheme('dark');
}// Listen for theme changes
this.themeChangeListener = (newTheme) => {
console.log('Theme changed to:', newTheme);
this.setState({ currentTheme: newTheme });
};
this.props.services.theme.addThemeChangeListener(this.themeChangeListener);After using this demo, developers will understand:
- How BrainDrive's Theme Service Bridge works
- Patterns for theme-aware plugin development
- Theme change detection and response in BrainDrive
- Service bridge integration best practices
- CSS variable patterns for automatic theme adaptation
- Place all three modules on a BrainDrive page
- Use Theme Controller to switch from light to dark theme
- Watch Theme Display automatically update to show new theme
- Check Theme Listener to see the change event was logged
- Notice how all module styling automatically adapts
- Test theme switching with multiple modules on the same page
- Monitor connection status indicators across modules
- Test listener start/stop functionality
- Observe theme synchronization when starting listeners
- Test error handling by checking console logs
- Class-based React components for BrainDrive compatibility
- Proper webpack configuration for plugin loading
- Service bridge integration following BrainDrive patterns
// Automatic theme adaptation
<div className={`${currentTheme === 'dark' ? 'dark-theme' : ''}`}>
{/* Content automatically adapts via CSS variables */}
</div>/* Light theme variables */
:root {
--bg-color: #ffffff;
--text-color: #333333;
--border-color: rgba(0, 0, 0, 0.2);
}
/* Dark theme variables */
.dark-theme {
--bg-color: #121a28;
--text-color: #e0e0e0;
--border-color: rgba(255, 255, 255, 0.1);
}- Proper service bridge initialization
- Theme change listener management
- Cleanup on component unmount
This plugin serves as a reference implementation for:
- Theme Service Bridge integration
- Theme-aware component development
- BrainDrive plugin architecture
- Service bridge connection handling
src/services/themeService.ts- Theme Service Bridge wrappersrc/components/ThemeDisplay.tsx- Theme information display componentsrc/components/ThemeController.tsx- Theme switching componentsrc/components/ThemeListener.tsx- Theme change monitoring componentsrc/styles/theme-example.css- Theme-aware CSS variables and styling
- BrainDrive Platform: This plugin must run inside BrainDrive
- Theme Service: Requires BrainDrive's Theme Service to be available
- Module Support: Page must support multiple modules for full demo
- No theme changes detected: Ensure Theme Service is available in BrainDrive
- Styling not adapting: Check that CSS variables are properly configured
- Connection issues: Verify Theme Service Bridge is properly initialized
- Check browser console for Theme Service logs
- Use Theme Listener module to monitor all theme activity
- Verify service connection status in Theme Display module
- Look for educational "📚 LEARNING:" messages in console
Experience BrainDrive's Theme Service Bridge in Action! 🎨
This is a demonstration plugin designed to run within the BrainDrive platform. It showcases real-time theme management and theme-aware development capabilities.