A modern Angular application demonstrating theme switching capabilities using Angular 19.2's latest features. This project showcases responsive card layouts, dynamic theme switching, and modern Angular patterns.

• 🌓 Dynamic theme switching (Light/Dark/System)
• 🎨 CSS Variables for theming
• 📱 Responsive design
• 🔄 Persistent theme preferences
• ⚡️ Modern Angular features:
  • Signals for state management
  • Standalone components
  • New control flow syntax (@if)
  • CSS custom properties

The application consists of two main components:

• Handles theme switching logic
• Uses Angular signals for state management
• Persists theme preference in localStorage
• Responds to system theme changes

• Demonstrates theme-aware styling
• Content projection for flexible usage
• Three example implementations:
  • User profile card
  • Project dashboard card
  • Quick actions card

• Node.js (v18 or higher)
• Angular CLI 19.2.5

# Clone the repository
git clone <repository-url>

# Navigate to project directory
cd theme-switcher

# Install dependencies
npm install

Run the development server:

ng serve

Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

The project uses a modern approach to theming:

• CSS Variables for dynamic theme switching
• Consistent spacing and typography
• Responsive breakpoints
• Smooth transitions between themes
• Accessible color contrasts

Build the project for production:

ng build

The build artifacts will be stored in the dist/ directory.

Run unit tests:

ng test

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

This project is licensed under the MIT License

• Angular team for the amazing framework
• The open-source community for inspiration and support