Tonemify is a user-friendly and open-source that helps developers and designers generate, prototype, and manage Shadcn themes with ease.
The application provides a visual editor that generates theme configurations, supports dark mode adjustments, and exports theme code directly to your clipboard.
Beyond basic color modifications, Tonemify handles the complete theme management lifecycle from creation through deployment.
Features
🎨 Theme Generation: Develop custom themes using an intuitive and straightforward interface. No more digging through configuration files to define your color palettes and styles.
📱 Responsive Design: Operate flawlessly across various devices, including desktops and mobiles. This allows for a consistent theming experience regardless of the screen size.
🌙 Dark Mode Support: Quickly toggle between light and dark theme variations. This caters to user preferences and accessibility needs with minimal effort.
🗂️ Theme Management: Save, edit, and delete your themes according to project requirements. This feature ensures that your theme configurations are organized and readily accessible for reuse or modification.
📋 Clipboard Integration: Copy generated theme configurations directly to your clipboard. This allows for immediate integration into your project without manual copying and pasting of code.
Use Cases
- Rapid Prototyping of UI Styles: Quickly visualize and iterate on different theme variations during the early stages of development. Tonemify allows developers to experiment with color schemes and design elements efficiently without extensive manual coding.
- Ensuring Consistent Branding Across Applications: Maintain a unified visual identity across multiple projects by creating and managing a library of approved themes. This is particularly useful for organizations that need to enforce brand consistency.
- Simplifying Theme Customization for Design Systems: Provide an accessible tool for designers and developers to collaborate on and adjust theme settings within a design system built with Shadcn. This reduces the learning curve for customizing the visual appearance of components.
- Dynamically Adjusting Themes Based on User Preferences: While Tonemify itself focuses on static theme generation, the exported configurations can be used as a foundation for implementing dynamic theme switching based on user settings within an application.
Installation
Follow these steps to get started with Tonemify locally:
Prerequisites
- Node.js version 14 or higher
- npm or yarn
Installation Instructions
- Clone the repository:
git clone https://github.com/BarriosXJavier/tonemify.git- Navigate to the project directory:
cd tonemify- Install dependencies:
npm install
# or
yarn install(Note: The project uses Bun for certain parts of the setup.)
- Start the development server:
npm run dev
# or
yarn dev- Open your browser and go to
http://localhost:3000.
Usage
- Creating a Theme: Use the theme generator to select your preferred color scheme. Adjust settings such as primary, secondary, and background colors to match your design needs.
- Saving a Theme: After making changes, save your theme for future use. Tonemify makes it easy to save multiple themes and access them later for editing or reuse.
- Managing Themes: You can easily manage all your saved themes—edit them, delete them, or copy them to your clipboard for quick integration into your projects.
FAQs
Q: Can I import existing themes into Tonemify?
A: Yes, Tonemify accepts JSON theme configurations that follow the Shadcn format.
Q: Does Tonemify support custom component styles?
A: The app focuses on theme-level styling. Component-specific customizations should be handled in your application code.
Q: What technologies does Tonemify use?
A: Tonemify uses React, Next.js, TypeScript for the frontend, Tailwind CSS for styling, and ShadCN for theme customization.
Q: Can I manage multiple themes in Tonemify?
A: Absolutely! Tonemify allows you to save, edit, and delete multiple themes, making it easy to manage various designs across different projects.
Preview
