You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: projects/lib/README.md
+8-7Lines changed: 8 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,4 @@
1
-
# angular-material-runtime-theme
1
+
# Angular Material Runtime Theme
2
2
3
3
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.
4
4
@@ -8,7 +8,6 @@ Built on Google's [Material Color Utilities](https://github.com/material-foundat
8
8
9
9
- Angular **21+**
10
10
- 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
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.
26
25
27
26
```scss
28
27
@use"@angular/material"asmat;
29
28
30
29
html {
31
30
@includemat.theme(
32
31
(
33
-
color: (),
32
+
color: (
33
+
error: mat.$red-palette,
34
+
),
34
35
typography: Roboto,
35
36
density: 0,
36
37
)
@@ -60,7 +61,7 @@ import { AngularMaterialRuntimeTheme } from "angular-material-runtime-theme";
@@ -80,7 +81,7 @@ You can also use `color-scheme: light dark` in CSS to follow the user's system p
80
81
## How it works
81
82
82
83
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.
84
85
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)`.
85
86
86
87
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:
93
94
pnpm start
94
95
```
95
96
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.
0 commit comments