DashPalette

Create, visualize, and export color palettes for your dashboard interfaces instantly.

---

📖 Table of Contents

• About
• Features
• Demo
• Technologies
• Installation
• Usage
• Scripts
• Project Structure
• Contributing
• License
• Author

---

🎨 About

DashPalette is a powerful web application that helps designers and developers create beautiful, cohesive color schemes for dashboard interfaces. With an intuitive interface and real-time preview, you can experiment with different color combinations and instantly see how they look in a fully-featured dashboard mockup.

The tool allows you to customize primary, sidebar, and surface colors, preview them in both light and dark modes, and export the palette in multiple formats including CSS, SCSS, and Tailwind CSS configuration.

---

✨ Features

• 🎨 Real-time Color Customization - Adjust primary, sidebar, and surface colors with instant visual feedback
• 🌓 Dark/Light Mode Toggle - Preview your palette in both themes
• 📊 Live Dashboard Preview - See your colors applied to a realistic dashboard with charts, cards, and UI components
• 🎲 Random Palette Generator - Get instant inspiration with randomly generated color schemes
• 📋 Multiple Export Formats:
  • CSS Variables
  • SCSS Variables
  • Tailwind CSS Configuration
• 🔗 Shareable URLs - Share your color palettes with others via URL
• 📱 Responsive Design - Works seamlessly on desktop, tablet, and mobile devices
• ✅ Color Validation - Ensures valid hex color codes in real-time

---

🎥 Demo

Live Demo (Add deployment URL here)

---

🛠 Technologies

This project is built with modern web technologies:

• Vite - Next generation frontend tooling
• Alpine.js - Lightweight JavaScript framework
• Tailwind CSS - Utility-first CSS framework
• Chart.js - JavaScript charting library
• Prism.js - Syntax highlighting
• Colord - Color manipulation library
• ESLint - Code linting with Neostandard

---

📦 Installation

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v16 or higher)
• npm (v7 or higher)

Steps

1. Clone the repository

   git clone https://github.com/OriC28/DashPalette.git

2. Navigate to the project directory

   cd DashPalette

3. Install dependencies

   npm install

4. Start the development server

   npm run dev

5. Open your browser

   Visit http://localhost:5173 (or the port shown in your terminal)

---

🚀 Usage

Creating a Color Palette

1. Choose your colors using the color pickers or by entering hex values directly:

   • Primary Color - Main accent color for buttons, links, and highlights
   • Sidebar Color - Background color for the navigation sidebar
   • Surface Color - Background color for cards and content areas

2. Preview in real-time - The dashboard mockup updates instantly as you adjust colors

3. Toggle dark mode - Use the theme switch to see how your palette looks in dark mode

4. Generate random palettes - Click "Random palette" for instant inspiration

Exporting Your Palette

1. Click the "Export theme" button
2. Choose your preferred format:
   • CSS - CSS custom properties (variables)
   • SCSS - SCSS variables
   • Tailwind Config - Tailwind CSS configuration object
3. Click "Copy to clipboard" to copy the code

Sharing Your Palette

Click the "Share theme" button to copy a shareable URL with your current color scheme encoded in the parameters.

---

📜 Scripts

The following scripts are available in package.json:

Command	Description
npm run dev	Start the development server with hot reload
npm run build	Build the project for production
npm run preview	Preview the production build locally
npm run lint	Run ESLint to check for code issues

---

📁 Project Structure

DashPalette/
├── public/              # Static assets
├── src/
│   ├── assets/          # Images, fonts, and other assets
│   ├── components/      # Alpine.js components
│   │   ├── Clipboard.js
│   │   ├── Dashboard.js
│   │   ├── darkModeToggle.js
│   │   └── ExportModal.js
│   ├── config/          # Configuration files
│   │   └── charts.js
│   ├── data/            # Static data and content
│   │   └── data.js
│   ├── icons/           # SVG icon collections
│   ├── services/        # External services integration
│   ├── utils/           # Utility functions
│   │   ├── charts.js
│   │   ├── generators.js
│   │   ├── textHelpers.js
│   │   ├── theme.js
│   │   ├── url.js
│   │   └── validators.js
│   ├── main.js          # Application entry point
│   └── style.css        # Global styles
├── index.html           # Main HTML file
├── package.json         # Project dependencies and scripts
├── vite.config.js       # Vite configuration
├── tailwind.config.js   # Tailwind CSS configuration
├── eslint.config.js     # ESLint configuration
└── README.md            # This file

---

🤝 Contributing

Contributions are welcome! Here's how you can help:

Reporting Issues

If you find a bug or have a feature request:

1. Check if the issue already exists in the Issues section
2. If not, create a new issue with a clear description and steps to reproduce (for bugs)

Submitting Pull Requests

1. Fork the repository

   git clone https://github.com/YOUR_USERNAME/DashPalette.git

2. Create a new branch

   git checkout -b feature/your-feature-name

3. Make your changes and ensure they follow the project's coding standards

4. Run linting

   npm run lint

5. Test your changes

   npm run dev

6. Commit your changes

   git commit -m "Add: description of your changes"

7. Push to your fork

   git push origin feature/your-feature-name

8. Open a Pull Request on the main repository

Code Style Guidelines

• Follow the existing code style
• Use meaningful variable and function names
• Comment complex logic
• Keep functions small and focused
• Run npm run lint before committing

---

📄 License

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

---

👤 Author

OriC28

• GitHub: @OriC28

---

If you find this project useful, please consider giving it a ⭐️!

Made with ❤️ by OriC28