Implement Modern Theme System from solid-chat

[bourgeoa]

Implement Modern Theme System from solid-chat

Summary

Modernize solid-ui's styling architecture by adopting the theme system from solid-chat. This would replace the current inline JavaScript style approach with CSS variables and runtime theme switching.

Current State

solid-ui (Current)

• Method: Inline JavaScript style strings (src/style.js)
• Theming: None - hard-coded colors
• Colors: Legacy palette (#3B5998, #eef, #888)
• Pattern: style.textInputStyle = 'background-color: #eef; padding: 0.5em; ...'

solid-chat (Target)

• Method: External CSS files with CSS variables
• Theming: 4 themes (Solid, Wave, Telegram, Signal) with runtime switching
• Colors: Modern palette with gradients and shadows
• Pattern: CSS custom properties (--gradient-start, --text, --border)

Proposed Changes

Phase 1: Foundation

1. Create src/themes/ directory
2. Add base default.css with CSS variables
3. Create theme loader utility
4. Add CSS injection capability

Phase 2: Migration

1. Convert style.js to reference CSS variables instead of hard-coded values
2. Update chat components (chat/infinite.js, chat/message.js)
3. Update form components and widgets
4. Maintain backward compatibility

Phase 3: Theme System

1. Port solid-chat themes (Wave, Telegram, Signal)
2. Add theme switcher widget
3. Save preference to localStorage
4. Update Storybook examples

Benefits

✅ Modern appearance - Gradients, shadows, better spacing
✅ User customization - Runtime theme switching
✅ Maintainability - CSS variables easier to manage than JS strings
✅ Performance - CSS over inline styles
✅ Consistency - Align with solid-chat visual design

Design Decisions Needed

1. Breaking changes?

   • Option A: v4.0.0 (full migration, breaking)
   • Option B: v3.1.0 (hybrid approach, backward compatible)

2. Default theme?

   • Solid purple gradient or keep current colors initially?

3. Migration strategy?

   • All at once or gradual component-by-component?

Implementation Options

Option 1: Full CSS Variable Migration (Recommended)

• Effort: 2-3 weeks
• Benefits: Best long-term solution, full theming support
• Risk: Medium - requires testing all components

Option 2: Hybrid Approach

• Effort: 1-2 weeks
• Benefits: Backward compatible, gradual migration
• Risk: Low - existing code continues to work

Option 3: Extract Key Improvements Only

• Effort: 3-5 days
• Benefits: Quick visual wins on specific components
• Risk: Very low - minimal changes

Example Theme Structure

/* src/themes/default.css */
:root {
  /* Primary colors */
  --theme-primary: #805ad5;
  --theme-accent: #9f7aea;
  --theme-gradient-start: #667eea;
  --theme-gradient-end: #9f7aea;
  
  /* Backgrounds */
  --bg: #f7f8fc;
  --bg-panel: #ffffff;
  
  /* Text */
  --text: #2d3748;
  --text-secondary: #4a5568;
  --text-muted: #a0aec0;
  
  /* Borders */
  --border: #e2e8f0;
  
  /* Effects */
  --shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
  --border-radius: 0.5em;
}

References

• solid-chat themes: https://github.com/bourgeoa/solid-chat/tree/gh-pages/themes
• solid-chat theming docs: https://github.com/bourgeoa/solid-chat/blob/gh-pages/themes/README.md
• Current solid-ui styles: src/style.js, src/styleConstants.js

Related Components

The following components would benefit most from this update:

• src/chat/ - Chat messages and UI
• src/widgets/ - Buttons, inputs, forms
• src/acl/ - Access control UI
• src/login/ - Login forms
• src/header/ - Header and navigation

Questions

1. Should we maintain 100% backward compatibility or accept breaking changes for v4.0?
2. Which theme should be the default - current colors or new solid-chat style?
3. Should theme switching be opt-in or enabled by default?
4. How should this integrate with existing apps (Mashlib, etc.)?

Next Steps

1. Get community feedback on approach
2. Choose implementation option
3. Create detailed implementation plan
4. Begin with Phase 1 (foundation)

---

Labels: enhancement, design, breaking-change (maybe), help-wanted
Milestone: v4.0.0 or v3.1.0