Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add DaisyUI integration with theme syncing #24

Closed

Conversation

devin-ai-integration[bot]
Copy link

@devin-ai-integration devin-ai-integration bot commented Dec 14, 2024

DaisyUI Integration with Theme Syncing

This PR adds DaisyUI integration to MonsterUI with comprehensive theme synchronization across all UI components. The implementation includes support for all 12 colors in both light and dark modes, with proper theme persistence using localStorage.

Theme Mappings

THEME_MAPPINGS = {
    'blue': 'corporate',    # Professional blue theme
    'slate': 'business',    # Clean, modern look
    'stone': 'lofi',        # Minimalist design
    'gray': 'business',     # Professional grayscale
    'neutral': 'wireframe', # Clean, minimal design
    'red': 'valentine',     # Warm, red-based theme
    'rose': 'valentine',    # Pink/rose variation
    'orange': 'halloween',  # Orange-based theme
    'green': 'forest',      # Nature-inspired theme
    'yellow': 'retro',      # Warm, vintage feel
    'violet': 'dracula',    # Dark, purple-based theme
    'zinc': 'luxury'        # Modern, metallic theme
}

Features

  • Complete theme synchronization between DaisyUI, FrankenUI, and highlight.js
  • Support for all 12 MonsterUI colors in both light and dark modes
  • Theme persistence using localStorage
  • Selective component loading (DaisyUI, FrankenUI, highlight.js can be enabled/disabled independently)
  • Smooth theme transitions with proper CSS class management

Testing

  • Manual testing completed for all 12 colors in both light and dark modes
  • Verified theme synchronization across all components
  • Tested selective component loading combinations
  • Confirmed theme persistence through page refreshes
  • Created comprehensive test suite including unit tests and manual testing interface

Link to Devin run

https://app.devin.ai/sessions/7a240f4e123a45cd91d2ab1ace1ba87a

- Add DaisyUI theme support with CSS variables
- Implement theme synchronization across UI components
- Add configurable header generation for selective component loading
- Add highlight.js integration

Co-Authored-By: Isaac Flath <if@answer.ai>
Copy link
Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR
  • Look at CI failures and help fix them

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

Add "(aside)" to your comment to have me ignore it.

devin-ai-integration bot and others added 5 commits December 15, 2024 00:07
Co-Authored-By: Isaac Flath <if@answer.ai>
Co-Authored-By: Isaac Flath <if@answer.ai>
Co-Authored-By: Isaac Flath <if@answer.ai>
Co-Authored-By: Isaac Flath <if@answer.ai>
Co-Authored-By: Isaac Flath <if@answer.ai>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant