Skip to content

Commit d2c9b2a

Browse files
committed
docs: update readme
1 parent b4b7721 commit d2c9b2a

1 file changed

Lines changed: 8 additions & 7 deletions

File tree

projects/lib/README.md

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# angular-material-runtime-theme
1+
# Angular Material Runtime Theme
22

33
Runtime theming for **Angular Material 3** applications. Generate Material Design 3 system color tokens from a single primary hex color and apply them without rebuilding stylesheets.
44

@@ -8,7 +8,6 @@ Built on Google's [Material Color Utilities](https://github.com/material-foundat
88

99
- Angular **21+**
1010
- Angular Material **21+** with an M3 theme configured via `mat.theme()` (see [Material theming guide](https://material.angular.dev/guide/theming))
11-
- Your app must set `color-scheme` on `html` or `body` (`light`, `dark`, or `light dark`) so `light-dark()` tokens resolve correctly
1211

1312
## Installation
1413

@@ -22,15 +21,17 @@ pnpm add angular-material-runtime-theme
2221

2322
### 1. Configure Angular Material (build time)
2423

25-
In your global styles (for example `styles.scss`), include the Material theme mixin. The seed palette here is only a starting point — runtime tokens override the generated CSS variables.
24+
In your global styles (for example `styles.scss`), include the Material theme mixin. The seed palette here is only a starting point — runtime tokens may override the generated CSS variables.
2625

2726
```scss
2827
@use "@angular/material" as mat;
2928

3029
html {
3130
@include mat.theme(
3231
(
33-
color: (),
32+
color: (
33+
error: mat.$red-palette,
34+
),
3435
typography: Roboto,
3536
density: 0,
3637
)
@@ -60,7 +61,7 @@ import { AngularMaterialRuntimeTheme } from "angular-material-runtime-theme";
6061
})
6162
export class App {
6263
constructor() {
63-
inject(AngularMaterialRuntimeTheme).setTheme("#6750A4");
64+
inject(AngularMaterialRuntimeTheme).setTheme({ primary: "#6750A4" });
6465
}
6566
}
6667
```
@@ -80,7 +81,7 @@ You can also use `color-scheme: light dark` in CSS to follow the user's system p
8081
## How it works
8182

8283
1. Convert the primary hex to an **HCT** color.
83-
2. Build tonal palettes for primary, tertiary (analogous accent), neutral, and neutral variant.
84+
2. Build tonal palettes for primary, secondary, tertiary (analogous accent), neutral, and neutral variant.
8485
3. For each token, map light and dark tone values to `light-dark(<light>, <dark>)` and assign them on the root host via `element.style.setProperty('--mat-sys-…', value)`.
8586

8687
Angular Material components read these variables, so buttons, form fields, dialogs, and other M3 components pick up the new colors immediately.
@@ -93,7 +94,7 @@ From the repository root:
9394
pnpm start
9495
```
9596

96-
Open [http://localhost:4200](http://localhost:4200) for a live showcase with a color picker, preset swatches, dark mode toggle, and many Material components.
97+
Open [the demo](https://json-derulo.github.io/angular-material-runtime-theme/) for a live showcase with a color picker, preset swatches, dark mode toggle, and many Material components.
9798

9899
## License
99100

0 commit comments

Comments
 (0)