Skip to content

README.md

Latest commit

 

History

History
216 lines (169 loc) · 7.17 KB

README.md

File metadata and controls

216 lines (169 loc) · 7.17 KB
Raw

Angular Material 16 Dynamic Custom Theme

A comprehensive Angular Material 16 application that demonstrates dynamic custom theming with real-time color picker, theme history, and showcase of all Material Design components.

🚀 Features

🎨 Dynamic Theme System

  • Real-time Color Picker: Change primary, accent, and warn colors instantly
  • Draggable Theme Controller: Floating paint icon that can be positioned anywhere on screen
  • Theme History: Automatically saves last 5 applied color schemes with timestamps
  • Persistent Storage: Theme preferences and position saved to localStorage
  • Light/Dark Mode: Toggle between light and dark theme schemes

🧩 Complete Material Components Showcase

  • All Angular Material 16 Components: Comprehensive demonstration of every available component
  • Interactive Examples: Live examples showing component functionality
  • Responsive Design: Optimized for both desktop and mobile devices
  • Component Navigation: Easy navigation between different component categories

🎯 Advanced Features

  • Hex Color Validation: Real-time validation of hex color inputs
  • Color Preview: Visual preview circles for selected colors
  • Theme Selection Highlighting: Visual indication of currently selected theme
  • Delete Theme Functionality: Remove unwanted themes from history
  • Auto-Reset to Default: Automatically resets when all custom themes are deleted

🛠️ Tech Stack

  • Angular 16.1.0 - Modern Angular framework
  • Angular Material 16.2.14 - Complete Material Design component library
  • Angular CDK 16.2.14 - Component Development Kit for advanced functionality
  • TypeScript 5.1.3 - Type-safe development
  • SCSS - Enhanced CSS with variables and mixins
  • RxJS 7.8.0 - Reactive programming with observables

📦 Installation

Prerequisites

  • Node.js (version 16 or higher)
  • npm or yarn package manager
  • Angular CLI (optional but recommended)

Setup Instructions

  1. Clone the repository

    git clone https://github.com/yourusername/angular-material-16-dynamic-theme.git
cd angular-material-16-dynamic-theme

  2. Install dependencies

    npm install

  3. Start the development server

    npm start
# or
ng serve

  4. Open your browser Navigate to http://localhost:4200/

🎮 Usage Guide

Theme Customization

  1. Access Theme Picker

    • Look for the floating paint icon (🎨) in the bottom-right corner
    • Click and drag to reposition the icon anywhere on screen
    • Click the icon to open the theme customization dialog

  2. Customize Colors

    • Primary Color: Main brand color (required)
    • Accent Color: Secondary accent color (optional)
    • Warn Color: Error/warning color (optional)
    • Use either the color picker or enter hex values directly

  3. Apply Changes

    • Click "Apply Theme" to save and apply your custom colors
    • Your theme will be automatically saved to history
    • The new theme will be applied instantly across all components

  4. Manage Theme History

    • View your last 5 applied themes in the history section
    • Click any previous theme to reapply it
    • Hover over themes to see delete option
    • Delete unwanted themes with the red × button

Component Exploration

  1. Navigation

    • Use the main navigation to browse different component categories
    • Each section demonstrates specific Material Design components
    • Interactive examples show real component functionality

  2. Theme Testing

    • Apply different themes while exploring components
    • See how your custom colors affect different UI elements
    • Test both light and dark mode variations

🏗️ Project Structure

src/
├── app/
│   ├── core/
│   │   └── services/
│   │       └── theme.service.ts          # Main theme management service
│   ├── material/
│   │   ├── components/                   # Material component examples
│   │   ├── material.module.ts           # Material modules configuration
│   │   └── material-routing.module.ts   # Component routing
│   ├── shared/
│   │   ├── components/
│   │   │   ├── theme-color-picker/      # Draggable theme picker
│   │   │   └── breadcrumb/              # Navigation breadcrumb
│   │   ├── models/
│   │   │   └── theme.models.ts          # Theme-related interfaces
│   │   └── shared.module.ts             # Shared components module
│   ├── app.component.*                   # Root application component
│   └── app.module.ts                     # Main application module
├── assets/
│   └── styles/                          # Global styles and theme files
└── styles.scss                          # Global application styles

🔧 Key Components

ThemeService

Central service managing all theme operations:

  • Theme initialization and persistence
  • Color application and CSS variable management
  • Theme history management
  • Light/dark mode switching

Theme Color Picker

Draggable component providing:

  • Real-time color selection
  • Position persistence
  • Theme history management
  • Validation and error handling

Material Components Showcase

Comprehensive examples of:

  • Form controls (inputs, selects, checkboxes, etc.)
  • Navigation (menus, tabs, breadcrumbs)
  • Layout (cards, dividers, expansion panels)
  • Buttons and indicators (buttons, chips, badges)
  • Data tables and lists
  • Modals and overlays

🎨 Customization

Adding New Themes

  1. Extend the ThemeScheme enum in theme.models.ts
  2. Add corresponding CSS classes in your global styles
  3. Update the theme service to handle new theme types

Custom Color Palettes

  1. Modify the default colors in theme.service.ts
  2. Add new color properties to the theme interface
  3. Update the color picker component to handle additional colors

Component Styling

  1. Override Material Design variables in styles.scss
  2. Create custom SCSS mixins for consistent theming
  3. Use CSS custom properties for dynamic color application

🚀 Build and Deployment

Development Build

npm run build

Production Build

npm run build --prod

Testing

npm test

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

📄 License

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

🙏 Acknowledgments

📞 Support

If you encounter any issues or have questions:

  1. Check the Issues section
  2. Create a new issue with detailed description
  3. Provide steps to reproduce any bugs

Made with ❤️ using Angular Material 16