Implement Modern Theme System from solid-chat

首先，将 src/style.js 和 src/styleConstants.js 中当前的样式入口与 solid-chat 主题及主题化文档进行比较。在选择迁移方案之前，检查 src/chat/、src/widgets/、src/acl/、src/login/ 和 src/header/ 下受影响的区域。完成标准包括：达成一致的主题策略、已迁移的组件、运行时切换、兼容性预期以及更新后的 Storybook 示例。

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