https://github.com/tutkli/material-dynamic-theme
Angular Material Dynamic Theme Demo
https://github.com/tutkli/material-dynamic-theme
angular material
Last synced: about 1 month ago
JSON representation
Angular Material Dynamic Theme Demo
- Host: GitHub
- URL: https://github.com/tutkli/material-dynamic-theme
- Owner: tutkli
- Created: 2022-03-17T11:59:34.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-10-02T23:02:01.000Z (over 3 years ago)
- Last Synced: 2025-02-17T16:01:39.011Z (over 1 year ago)
- Topics: angular, material
- Language: TypeScript
- Homepage: https://tutkli.github.io/material-dynamic-theme/
- Size: 686 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Material Dynamic Theme
Angular Demo for an application with a dynamic theme. You can change the theme color in **real time**.
This project was generated with Angular CLI version 14.2.4.
**Check Demo at: https://tutkli.github.io/material-dynamic-theme/**
## Dependencies
* [Angular Material](https://material.angular.io/) Official Angular UI component library
* [@ctrl/tinycolor](https://github.com/scttcper/tinycolor) - A small library for color manipulation and conversion
## How it works
Through the [ThemeService](https://github.com/tutkli/material-dynamic-theme/blob/master/src/app/theme.service.ts), a theme is generated based on the selected color using Tinycolor's algorithm, then CSS variables are set with the theme values.
The Angular Material Theme is set in the [dynamic-theme](https://github.com/tutkli/material-dynamic-theme/blob/master/src/styles/dynamic-theme.scss) file, using the CSS variable names.