Skip to content

Commit 30b7605

Browse files
dvCodeWorlddvCodeWorld
committed
Initial commit: Angular Material 16 Dynamic Custom Theme
1 parent 60654c1 commit 30b7605

161 files changed

Lines changed: 8915 additions & 548 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.env.example‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Angular Material 16 Dynamic Custom Theme - Environment Configuration
2+
3+
# Application Configuration
4+
APP_NAME=Angular Material 16 Dynamic Custom Theme
5+
APP_VERSION=1.0.0
6+
APP_DESCRIPTION=A comprehensive Angular Material 16 application demonstrating dynamic custom theming
7+
8+
# Development Configuration
9+
NODE_ENV=development
10+
PORT=4200
11+
12+
# Theme Configuration (Optional - these are defaults)
13+
DEFAULT_PRIMARY_COLOR=#1976d2
14+
DEFAULT_ACCENT_COLOR=#ff4081
15+
DEFAULT_WARN_COLOR=#f44336
16+
17+
# Feature Flags (Optional)
18+
ENABLE_THEME_HISTORY=true
19+
ENABLE_DRAGGABLE_PICKER=true
20+
MAX_THEME_HISTORY=5
21+
22+
# Analytics (Optional - if you want to add analytics)
23+
# GOOGLE_ANALYTICS_ID=your-ga-id
24+
# ENABLE_ANALYTICS=false
25+
26+
# API Configuration (Optional - if you plan to add backend integration)
27+
# API_BASE_URL=http://localhost:3000/api
28+
# API_TIMEOUT=30000
29+
30+
# Build Configuration
31+
# BUILD_OPTIMIZATION=true
32+
# SOURCE_MAP=true

‎.github/ISSUE_TEMPLATE/bug_report.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
name: Bug report
3+
about: Create a report to help us improve
4+
title: '[BUG] '
5+
labels: 'bug'
6+
assignees: ''
7+
8+
---
9+
10+
**Describe the bug**
11+
A clear and concise description of what the bug is.
12+
13+
**To Reproduce**
14+
Steps to reproduce the behavior:
15+
1. Go to '...'
16+
2. Click on '....'
17+
3. Scroll down to '....'
18+
4. See error
19+
20+
**Expected behavior**
21+
A clear and concise description of what you expected to happen.
22+
23+
**Screenshots**
24+
If applicable, add screenshots to help explain your problem.
25+
26+
**Environment (please complete the following information):**
27+
- OS: [e.g. Windows, macOS, Linux]
28+
- Browser [e.g. chrome, safari]
29+
- Version [e.g. 22]
30+
- Angular version: [e.g. 16.1.0]
31+
- Node.js version: [e.g. 18.17.0]
32+
33+
**Theme Configuration**
34+
- Theme scheme: [e.g. light, dark]
35+
- Custom colors used: [e.g. primary: #1976d2, accent: #ff4081]
36+
- Browser localStorage data: [if relevant]
37+
38+
**Additional context**
39+
Add any other context about the problem here.
40+
41+
**Console Errors**
42+
If applicable, paste any console errors or warnings here:
43+
```
44+
Paste console output here
45+
```

‎.github/ISSUE_TEMPLATE/feature_request.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
name: Feature request
3+
about: Suggest an idea for this project
4+
title: '[FEATURE] '
5+
labels: 'enhancement'
6+
assignees: ''
7+
8+
---
9+
10+
**Is your feature request related to a problem? Please describe.**
11+
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12+
13+
**Describe the solution you'd like**
14+
A clear and concise description of what you want to happen.
15+
16+
**Describe alternatives you've considered**
17+
A clear and concise description of any alternative solutions or features you've considered.
18+
19+
**Additional context**
20+
Add any other context or screenshots about the feature request here.
21+
22+
**Implementation Details (if applicable)**
23+
- Which components would be affected?
24+
- Would this require new dependencies?
25+
- Any breaking changes?
26+
- Estimated complexity: [Low/Medium/High]
27+
28+
**Mockups/Examples**
29+
If you have any mockups, wireframes, or examples from other applications, please include them here.

‎.github/pull_request_template.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
## Description
2+
Brief description of the changes made in this PR.
3+
4+
## Type of Change
5+
- [ ] Bug fix (non-breaking change which fixes an issue)
6+
- [ ] New feature (non-breaking change which adds functionality)
7+
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
8+
- [ ] Documentation update
9+
- [ ] Performance improvement
10+
- [ ] Code refactoring
11+
12+
## Related Issues
13+
Fixes #(issue number)
14+
15+
## Changes Made
16+
- [ ] List the specific changes made
17+
- [ ] Include any new components or services
18+
- [ ] Mention any deleted or modified files
19+
20+
## Testing
21+
- [ ] Unit tests pass
22+
- [ ] Integration tests pass
23+
- [ ] Manual testing completed
24+
- [ ] Tested in multiple browsers
25+
- [ ] Tested responsive design
26+
- [ ] Tested theme switching functionality
27+
28+
## Screenshots (if applicable)
29+
Add screenshots to help explain your changes.
30+
31+
## Checklist
32+
- [ ] My code follows the style guidelines of this project
33+
- [ ] I have performed a self-review of my own code
34+
- [ ] I have commented my code, particularly in hard-to-understand areas
35+
- [ ] I have made corresponding changes to the documentation
36+
- [ ] My changes generate no new warnings
37+
- [ ] I have added tests that prove my fix is effective or that my feature works
38+
- [ ] New and existing unit tests pass locally with my changes
39+
- [ ] Any dependent changes have been merged and published
40+
41+
## Additional Notes
42+
Add any additional notes or context about the PR here.

‎.github/workflows/ci.yml‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
name: CI/CD Pipeline
2+
3+
on:
4+
push:
5+
branches: [ main, develop ]
6+
pull_request:
7+
branches: [ main ]
8+
9+
jobs:
10+
test:
11+
runs-on: ubuntu-latest
12+
13+
strategy:
14+
matrix:
15+
node-version: [16.x, 18.x]
16+
17+
steps:
18+
- name: Checkout repository
19+
uses: actions/checkout@v3
20+
21+
- name: Setup Node.js ${{ matrix.node-version }}
22+
uses: actions/setup-node@v3
23+
with:
24+
node-version: ${{ matrix.node-version }}
25+
cache: 'npm'
26+
27+
- name: Install dependencies
28+
run: npm ci
29+
30+
- name: Run linting
31+
run: npm run lint --if-present
32+
33+
- name: Run tests
34+
run: npm run test:coverage --if-present
35+
36+
- name: Build application
37+
run: npm run build:prod
38+
39+
- name: Upload coverage reports
40+
uses: codecov/codecov-action@v3
41+
if: matrix.node-version == '18.x'
42+
with:
43+
file: ./coverage/lcov.info
44+
flags: unittests
45+
name: codecov-umbrella
46+
47+
build-and-deploy:
48+
needs: test
49+
runs-on: ubuntu-latest
50+
if: github.ref == 'refs/heads/main'
51+
52+
steps:
53+
- name: Checkout repository
54+
uses: actions/checkout@v3
55+
56+
- name: Setup Node.js
57+
uses: actions/setup-node@v3
58+
with:
59+
node-version: '18.x'
60+
cache: 'npm'
61+
62+
- name: Install dependencies
63+
run: npm ci
64+
65+
- name: Build for production
66+
run: npm run build:prod
67+
68+
- name: Deploy to GitHub Pages
69+
uses: peaceiris/actions-gh-pages@v3
70+
if: github.ref == 'refs/heads/main'
71+
with:
72+
github_token: ${{ secrets.GITHUB_TOKEN }}
73+
publish_dir: ./dist/angular-material-16-dynamic-theme
74+
cname: your-custom-domain.com # Optional: replace with your domain

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,3 +40,6 @@ testem.log
4040
# System files
4141
.DS_Store
4242
Thumbs.db
43+
44+
# Other
45+
*.zip

‎CHANGELOG.md‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
# Changelog
2+
3+
All notable changes to this project will be documented in this file.
4+
5+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7+
8+
## [1.0.0] - 2024-01-22
9+
10+
### Added
11+
- 🎨 **Dynamic Theme System**
12+
- Real-time color picker with primary, accent, and warn color customization
13+
- Draggable theme controller with persistent positioning
14+
- Theme history management (stores last 5 applied themes)
15+
- Light/Dark mode toggle functionality
16+
- LocalStorage integration for theme persistence
17+
18+
- 🧩 **Complete Material Components Showcase**
19+
- All Angular Material 16 components demonstration
20+
- Interactive examples for each component
21+
- Responsive design for desktop and mobile
22+
- Component navigation and routing
23+
24+
- 🎯 **Advanced Features**
25+
- Hex color validation with real-time feedback
26+
- Color preview circles for visual confirmation
27+
- Theme selection highlighting
28+
- Delete theme functionality with confirmation
29+
- Auto-reset to default when all themes are deleted
30+
31+
- 📚 **Comprehensive Documentation**
32+
- Detailed README with setup instructions
33+
- JSDoc documentation throughout codebase
34+
- Contributing guidelines
35+
- MIT License
36+
- Code of conduct
37+
38+
- 🔧 **Technical Implementation**
39+
- Angular 16.1.0 with TypeScript 5.1.3
40+
- Angular Material 16.2.14 with full component library
41+
- SCSS styling with CSS custom properties
42+
- RxJS for reactive programming
43+
- Modular architecture with core, shared, and feature modules
44+
45+
### Technical Details
46+
- **ThemeService**: Central theme management with CSS variable manipulation
47+
- **Theme Color Picker Component**: Draggable interface with form validation
48+
- **Material Module**: Complete import of all Angular Material components
49+
- **Responsive Design**: Mobile-first approach with Material Design principles
50+
- **Type Safety**: Full TypeScript implementation with strict mode
51+
- **Performance**: Optimized bundle size and lazy loading where applicable
52+
53+
### Project Structure
54+
```
55+
src/app/
56+
├── core/services/ # Theme management service
57+
├── material/ # Material component examples
58+
├── shared/ # Reusable components and models
59+
└── assets/styles/ # Global styles and theme files
60+
```
61+
62+
### Browser Support
63+
- Chrome (latest)
64+
- Firefox (latest)
65+
- Safari (latest)
66+
- Edge (latest)
67+
68+
### Dependencies
69+
- Angular 16.1.0
70+
- Angular Material 16.2.14
71+
- Angular CDK 16.2.14
72+
- TypeScript 5.1.3
73+
- RxJS 7.8.0
74+
75+
---
76+
77+
## Future Releases
78+
79+
### Planned Features for v1.1.0
80+
- [ ] Export/Import theme configurations
81+
- [ ] Predefined theme templates
82+
- [ ] Advanced color palette generator
83+
- [ ] Theme preview mode
84+
- [ ] Accessibility improvements
85+
86+
### Planned Features for v1.2.0
87+
- [ ] Custom component theming examples
88+
- [ ] Theme animation transitions
89+
- [ ] Multi-language support
90+
- [ ] Theme sharing functionality
91+
- [ ] Advanced color theory tools
92+
93+
---
94+
95+
**Note**: This project follows semantic versioning. For more information about version numbering, see [Semantic Versioning](https://semver.org/).

0 commit comments

Comments
 (0)