https://github.com/json-derulo/angular-material-runtime-theme
Runtime theming for Angular Material 3 apps using Material Design 3 system tokens and CSS custom properties
https://github.com/json-derulo/angular-material-runtime-theme
Last synced: 27 days ago
JSON representation
Runtime theming for Angular Material 3 apps using Material Design 3 system tokens and CSS custom properties
- Host: GitHub
- URL: https://github.com/json-derulo/angular-material-runtime-theme
- Owner: json-derulo
- License: mit
- Created: 2026-05-15T16:31:51.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-05-24T05:33:24.000Z (about 1 month ago)
- Last Synced: 2026-05-24T07:19:27.247Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://json-derulo.github.io/angular-material-runtime-theme/
- Size: 462 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular Material Runtime Theme
Monorepo for **angular-material-runtime-theme** — runtime Material Design 3 theming for Angular Material apps.
Change the primary brand color at runtime (user settings, white-labeling, accessibility themes) without recompiling Sass. The library derives M3 system tokens from one hex value using [Material Color Utilities](https://github.com/material-foundation/material-color-utilities).
## Projects
| Project | Description |
| -------------------------------- | --------------------------------------------------- |
| [`projects/lib`](projects/lib) | Publishable library (`AngularMaterialRuntimeTheme`) |
| [`projects/demo`](projects/demo) | Interactive showcase application |
## Quick start
```bash
pnpm install
pnpm start
```
Visit [http://localhost:4200](http://localhost:4200) to explore the demo: color picker, preset palettes, light/dark mode, and a broad set of Angular Material components.
## Build
```bash
pnpm run build:lib # library → dist/
pnpm run build:demo # demo app
pnpm run build # both
```
## Documentation
Full installation, setup, API reference, and theming notes:
**[projects/lib/README.md](projects/lib/README.md)**
## Development
```bash
pnpm test
pnpm lint
pnpm format
```
## Stack
- Angular
- Angular Material (M3)
- Material Color Utilities