MyThemeBuilder

A powerful, modern theme builder and customization tool for DaisyUI & Tailwind CSS with live preview, AI-powered features, and professional collaboration tools.

✨ Overview

MyThemeBuilder is a comprehensive web application that empowers designers and developers to create, customize, and manage beautiful themes for DaisyUI and Tailwind CSS. With its intuitive live editor, extensive template library, and advanced features, it bridges the gap between design and development workflows.

🎯 Key Highlights

🚀 Live Theme Editor: Real-time theme customization with instant preview
📱 Responsive Design: Preview themes across multiple device sizes
🎨 40+ Built-in Themes: Professional color schemes ready to use
📤 Multi-Format Export: Export to CSS, SCSS, JSON, Tailwind config, React, and Vue
🤖 AI-Powered Features: Intelligent color suggestions and accessibility fixes
👥 Real-time Collaboration: Work together with live activity feeds
♿ Accessibility Checker: WCAG AA/AAA compliance validation
🌅 Smart Automation: Auto theme switching based on sunrise/sunset times

🚀 Quick Start

Prerequisites

Node.js 18+ and npm
Modern web browser with JavaScript enabled

Installation

Clone the repository

git clone https://github.com/codewithevilxd/my-theme-builder.git
cd my-theme-builder

Install dependencies
```
npm install
```
Start development server
```
npm run dev
```
Open your browser
```
http://localhost:3000
```

Build for Production

# Build the application
npm run build

# Start production server
npm start

# Deploy to Cloudflare (recommended)
npm run deploy

🚀 Deployment Options

Cloudflare Pages (Recommended)

This project is optimized for Cloudflare Pages deployment:

# Build for Cloudflare
npm run build:open-next

# Deploy to Cloudflare
npm run deploy

⚠️ Vercel Deployment Issues

If deploying to Vercel, you may encounter GLIBC compatibility issues:

Error: GLIBC_2.35 not found when building on Vercel

Solutions:

Use Cloudflare Pages instead (recommended)
The next.config.ts is already configured to avoid Cloudflare initialization on Vercel
Use Node.js runtime instead of Edge runtime in Vercel

The vercel.json is already provided with proper configuration:

{
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "framework": "nextjs"
}

For Cloudflare Deployment: Uncomment the Cloudflare initialization in next.config.ts:

import { initOpenNextCloudflareForDev } from "@opennextjs/cloudflare";
initOpenNextCloudflareForDev();

🔧 Build Troubleshooting

Common Issues:

GLIBC Error: Use Cloudflare Pages or downgrade wrangler
Memory Issues: Increase build memory in deployment platform
Timeout Issues: Optimize bundle size or use incremental builds

📋 Available Scripts

Command	Description
`npm run dev`	Start development server with Turbopack
`npm run build`	Build for production
`npm run build:open-next`	Build for Cloudflare deployment
`npm run start`	Start production server
`npm run lint`	Run ESLint
`npm run tidy`	Format code with Prettier
`npm run deploy`	Deploy to Cloudflare
`npm run preview`	Preview Cloudflare deployment

🏗️ Architecture

Tech Stack

Frontend: Next.js 15, React 19, TypeScript
Styling: Tailwind CSS 4, DaisyUI 5
State Management: Nano Stores, React Context
UI Components: Radix UI, Lucide Icons
Deployment: Cloudflare Pages (OpenNext.js)
Development: ESLint, Prettier, Turbopack

Project Structure

src/
├── app/                    # Next.js app router
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Landing page
│   ├── templates/         # Templates page
│   └── preview/           # Template preview pages
├── components/            # React components
│   ├── ui/               # Reusable UI components
│   ├── editor/           # Theme editor components
│   ├── landing/          # Landing page components
│   └── templates/        # Template-specific components
├── lib/                  # Utilities and constants
│   ├── constants/        # Theme definitions, templates
│   ├── exporter.ts       # Export functionality
│   └── utils.ts          # Helper functions
├── store/               # State management
│   ├── nano-store.ts    # Main store
│   ├── font-store.ts    # Font management
│   └── ui-store.ts      # UI state
└── templates/           # Template definitions
    ├── website/         # Website templates
    ├── blog/           # Blog templates
    └── app/            # App templates

🎨 Features

Core Features

Live Theme Editor

Color Picker: Professional color selection with OKLCH support
Typography: Google Fonts integration with live preview
Border Radius: Customizable corner rounding
Shadows & Effects: Advanced shadow and visual effects
Real-time Preview: See changes instantly across all templates

Template Library

Landing Pages: Modern business and SaaS landing pages
Blog Templates: Clean blog layouts with various styles
Portfolio Sites: Showcase templates for creatives
E-commerce: Product catalog and store layouts
Apps: Dashboard and application interfaces
Specialized: Recipe sites, documentation, forums, etc.

Advanced Features

🤖 AI-Powered Tools

Smart Color Suggestions: AI analyzes your theme and suggests complementary colors
Font Pairing Intelligence: Get recommendations for typography combinations
Automatic Accessibility Fixes: AI-powered color adjustments for WCAG compliance

👥 Collaboration & Team Features

Real-time Collaboration: Multiple users can work on themes simultaneously
Activity Feeds: See live updates from your collaborators
Theme Versioning: Track changes and rollback to previous versions
Comment System: Leave feedback and suggestions on themes

🎨 Professional Tools

Advanced Export Options: Export to multiple formats (CSS, SCSS, JSON, Tailwind, React, Vue)
Design Token Generation: Create design tokens compatible with Figma, Adobe XD, and Sketch
Component Builder: Drag-and-drop component creation with live code generation
Animation System: Custom keyframes and preset animations

🌐 Integration Ecosystem

Figma Integration: Import designs and export design tokens
Adobe XD Support: Seamless workflow with Adobe's design tools
Sketch Compatibility: Export styles for Sketch documents
Theme Marketplace: Community-driven theme sharing platform

♿ Accessibility & Compliance

WCAG Compliance Checker: AA and AAA accessibility standard validation
Contrast Analysis: Real-time contrast ratio calculations
Automatic Fixes: AI-suggested color adjustments for better accessibility
Accessibility Reports: Detailed compliance reports and recommendations

🌅 Smart Automation

Auto Theme Switching: Automatically switch between light and dark themes based on sunrise/sunset times
Location-Based Detection: Uses geolocation to determine local sunrise and sunset times
Manual Override: Force light/dark mode when needed
Timezone Aware: Respects user's timezone for accurate timing

📈 Analytics & Insights

Usage Analytics: Track theme creation, modification, and export patterns
Personalized Insights: Get recommendations based on your design preferences
Popular Colors: See which colors you use most frequently
Session Analytics: Monitor time spent on theme creation and productivity patterns

🎭 Theme System

Built-in Themes

MyThemeBuilder includes 40+ professionally designed themes:

Light Themes: lemonade, cupcake, bumblebee, pastel, fantasy, wireframe Dark Themes: business, night, coffee, dim, dracula, luxury Colorful Themes: cyberpunk, synthwave, retro, valentine, halloween Nature Themes: garden, forest, aqua, sunset, mint, sage Gemstone Themes: emerald, ruby, sapphire, amber, coral, rose

Custom Theme Creation

Create your own themes with:

OKLCH Color Space: Modern, perceptually uniform color representation
CSS Custom Properties: Full control over DaisyUI semantic colors
Theme Variables: Customize borders, shadows, and spacing
Font Integration: Pair with Google Fonts for perfect typography

📤 Export Formats

Export your themes in multiple formats:

CSS Variables: Standard CSS custom properties
SCSS Variables: Sass-compatible variables
JSON: Structured theme data
Tailwind Config: Direct Tailwind configuration
React Components: Theme provider components
Vue Components: Vue composition API setup
Design Tokens: Figma/Adobe XD compatible tokens

🔧 Development

Code Quality

This project uses:

ESLint: Code linting and error detection
Prettier: Code formatting
TypeScript: Type safety and better DX
Turbopack: Fast development builds

State Management

Built with Nano Stores for:

Reactive State: Automatic UI updates
Type Safety: Full TypeScript support
Performance: Optimized re-renders
Persistence: Local storage integration

Component Architecture

Atomic Design: Reusable UI components
Composition: Flexible component composition
Accessibility: WCAG compliant components
Performance: Optimized with React.memo and useMemo

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Make your changes
Run tests: npm run lint
Format code: npm run tidy
Commit changes: git commit -m 'Add amazing feature'
Push to branch: git push origin feature/amazing-feature
Open a Pull Request

Areas for Contribution

New Templates: Add more website/app templates
Theme Packs: Create themed collections
Export Formats: Support for new frameworks
Integrations: Figma, Sketch, Adobe XD plugins
Accessibility: Improve WCAG compliance
Performance: Optimize bundle size and runtime

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

DaisyUI: Beautiful component library
Tailwind CSS: Utility-first CSS framework
Radix UI: Accessible UI primitives
Nano Stores: Lightweight state management
Open Meteo: Weather API for templates

📞 Support

Issues: GitHub Issues
Discussions: GitHub Discussions
Twitter: @raj_dev_X
Email: codewithevilxd@gmail.com

Built with ❤️ using Next.js, TypeScript, and modern web technologies.

Simple NICE UI and nicer UX for everyone from UI designers to tech developers.

Name		Name	Last commit message	Last commit date
Latest commit History 8 Commits
.vscode		.vscode
public		public
src		src
.gitignore		.gitignore
README.md		README.md
cloudflare-env.d.ts		cloudflare-env.d.ts
components.json		components.json
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
open-next.config.ts		open-next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json
vercel.json		vercel.json
wrangler.jsonc		wrangler.jsonc

CodewithEvilxd/MyThemeBuilder

Folders and files

Latest commit

History

Repository files navigation