🔮 Neomorph - Advanced Theme Transformation Toolkit

A complete ecosystem for building sophisticated theme transformation capabilities in web applications

Neomorph is a comprehensive solution that enables developers to quickly add advanced theme customization and transformation capabilities to their web applications. With just a few lines of code, users can design, preview, and apply dynamic themes in real-time.

🚀 Features

• 🔧 Universal SDK - Easy integration with any web framework
• 🎨 Visual Theme Designer - Drag-and-drop interface for theme creation
• ⚡ Real-time Preview - See changes instantly as you design
• 📱 Responsive Design - Works seamlessly across all devices
• 🔌 Simple Integration - Just add one script tag to get started
• 💾 Theme Export/Import - Save and share themes as JSON
• 🎯 CSS Variable Based - Works with any application using CSS custom properties

📋 Prerequisites

Your web application must use CSS custom properties (CSS variables) for theming. For example:

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --background-color: #ffffff;
  --text-color: #333333;
  --border-radius: 4px;
  --font-size-base: 16px;
}

.button {
  background-color: var(--primary-color);
  color: var(--text-color);
  border-radius: var(--border-radius);
  font-size: var(--font-size-base);
}

🏗️ Architecture

The project consists of three main components:

1. 📦 SDK (@neomorph/sdk)

The core JavaScript SDK that provides APIs for advanced theme transformation and management.

Key Features:

• Theme validation and parsing
• CSS variable management
• Event system for theme changes
• Export/import functionality
• Framework-agnostic design

2. 🎨 Loomer (@neomorph/loomer)

A sophisticated web application that provides the visual interface for dynamic theme creation and transformation.

Key Features:

• Color picker with accessibility validation
• Typography controls
• Spacing and layout adjustments
• Real-time preview
• Theme templates and presets
• Export to multiple formats

3. 🕷️ Weaver (@neomorph/weaver)

A lightweight integration script that weaves theme transformations seamlessly into your application.

Key Features:

• Automatic CSS variable detection
• Cross-origin communication
• Theme persistence
• Hot-swapping capabilities
• Minimal performance impact

🚀 Quick Start

Note: The project is currently in development. Usage examples and API documentation will be added once the interfaces are finalized.

🎯 Use Cases

• SaaS Applications - Let users customize their dashboard themes
• E-commerce Platforms - Allow merchants to brand their stores
• Content Management Systems - Enable theme customization for websites
• White-label Products - Provide branding capabilities to clients
• Design Systems - Create theme variations for different brands

🛠️ Development

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm
• Modern browser with ES2020 support

Setup

Note: Setup instructions will be finalized once the project structure is implemented.

# Clone the repository
git clone https://github.com/sinha-sahil/neomorph.git
cd neomorph

# Setup instructions coming soon...

Project Structure

neomorph/
├── packages/
│   ├── sdk/              # @neomorph/sdk - Core transformation SDK
│   ├── loomer/           # @neomorph/loomer - Theme designer UI
│   └── weaver/           # @neomorph/weaver - Integration script
├── examples/             # Integration examples
└── docs/                 # Documentation

Contributing

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

Development Workflow

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes
4. Add tests for new functionality
5. Run the test suite: pnpm test
6. Commit your changes: git commit -m 'Add amazing feature'
7. Push to the branch: git push origin feature/amazing-feature
8. Open a Pull Request

📄 License

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

---

Made with ❤️ by Sahil Sinha