Here is a basic example to set up theming for Angular Material, with both light and dark themes that respect prefers-color-scheme.
@use "@angular/material" as mat;
-@use "@s-libs/ng-mat-core/theming";
-
-@include theming.full-theming(
- $dark-palettes: (
- primary: mat.define-palette(mat.$light-blue-palette),
- accent: mat.define-palette(mat.$orange-palette, A200, A100, A400),
- ),
- $light-palettes: (
- primary: mat.define-palette(mat.$blue-palette),
- accent: mat.define-palette(mat.$orange-palette, A400, A200, A700),
- )
-);If you only want one theme, that is possible.
@use "@angular/material" as mat;
-@use "@s-libs/ng-mat-core/theming";
-
-@include mat.core(); // needed when you don't use the `full-theming` mixin
-@include theming.light-theme(
- (
- light-palettes: (
- primary: mat.define-palette(mat.$blue-palette),
- accent: mat.define-palette(mat.$orange-palette, A400, A200, A700),
- ),
- )
-);Here is a more complex example. It uses the same colors for light and dark themes, and adds a third high-contrast theme. By default, it respects prefers-color-scheme to choose between light and dark. But it allows you to force a specific theme when you add a class to any element (like body), so that you can implement a theme chooser.
This also demonstrates restricting the emitted styles to only the components you include in your app.
@use "@angular/material" as mat;
-@use "@s-libs/ng-mat-core/theming";
-
-$main-palettes: (
- primary: mat.define-palette(mat.$blue-grey-palette, 600, 300, 800, 500),
- accent: mat.define-palette(mat.$brown-palette, A400, A200, A700),
-);
-$high-contrast-palettes: (
- primary: mat.define-palette(mat.$blue-grey-palette, 400, 400),
- accent: mat.define-palette(mat.$orange-palette, 500),
-);
-$config: (
- dark-palettes: $main-palettes,
- light-palettes: $main-palettes,
- contrast-palettes: $high-contrast-palettes,
- modules: (
- "core",
- "button",
- "card",
- "checkbox",
- "form-field",
- "input",
- "list",
- ),
-);
-
-@include theming.full-theming($config...);
-.force-light-theme {
- @include theming.light-theme-colors($config);
-}
-.force-dark-theme {
- @include theming.dark-theme-colors($config);
-}
-.force-contrast-theme {
- @include theming.light-theme-colors($config, "contrast-palettes");
-}Theming
mixins
dark-theme-colors
@s-libs/ng-mat-core - v20.0.0-next.1 \ No newline at end of file + }" data-collapsed="@mixin light-theme() { ... }"> Theming helpers for Angular Material are deprecated. Their latest API is much easier to use. We recommend updating to the latest techniques here: https://material.angular.dev/guide/theming. These helpers may be removed in a future major version of
s-libs.
Theming
mixinsdark-theme-colors
@mixin dark-theme-colors($config, $palette-key: "dark-palettes") { ... }Description
Includes just the colors for a dark theme.
Parameters
parameter Name parameter Description parameter Type parameter Default value $configThe config object used for multiple mixins in this library. See the example in
mixin-full-theming()for a description of all its options.Map— none $palette-keyWhich color to use from
$config.String"dark-palettes"light-theme-colors
@mixin dark-theme-colors() { ... }Description
Deprecated. Angular Material's latest API is much easier to use. Recommend updating to latest techniques here: https://material.angular.dev/guide/theming.
Parameters
None.
light-theme-colors
@mixin light-theme-colors($config, $palette-key: "light-palettes") { ... }Description
Includes just the colors for a light theme.
Parameters
parameter Name parameter Description parameter Type parameter Default value $configThe config object used for multiple mixins in this library. See the example in
mixin-full-theming()for a description of all its options.Map— none $palette-keyWhich color to use from
$config.String"light-palettes"full-theming
@mixin light-theme-colors() { ... }Description
Deprecated. Angular Material's latest API is much easier to use. Recommend updating to latest techniques here: https://material.angular.dev/guide/theming.
Parameters
None.
full-theming
@mixin full-theming($config) { ... }Description
A convenience mixin to set up all Angular Material theming for your app, including separate light and dark themes that respect
prefers-color-scheme.Important: This even does
@include mat.core()for you, so do not include it yourself.Parameters
parameter Name parameter Description parameter Type parameter Default value $configThe config object used for multiple mixins in this library. See the example for a description of all its options.
Map— none Example
$config: ( - // The `color` value in the map passed to `mat.generate-dark-theme()`. - // Required when defining a dark theme unless you call `dark-theme()` - // directly and pass it a different `$palette-key`. - dark-palettes: ( - primary: mat.define-palette(mat.$light-blue-palette), - accent: mat.define-palette(mat.$orange-palette, A200, A100, A400), - ), - - // The `color` value in the map passed to `mat.generate-light-theme()`. - // Required when defining a light theme unless you call `light-theme()` - // directly and pass it a different `$palette-key`. - light-palettes: ( - primary: mat.define-palette(mat.$blue-palette), - accent: mat.define-palette(mat.$orange-palette, A400, A200, A700), - ), - - // The `typography` value in the map passed to `mat.generate-*-theme()`. - // Defaults to `mat.define-typography-config()`. Pass `null` to omit - // typography from your theming. - typography: mat.define-typography-config("sans-serif"), - - // The `density` value in the map passed to `mat.generate-*-theme()`. - // Defaults to `0`. - density: -1, - - // The Angular Material modules to include themes/colors for. - // Defaults to all modules. - modules: ( - "core", - "button", - "card", - "checkbox", - "form-field", - "input", - "list", - ), -);dark-theme
@mixin full-theming() { ... }Description
Deprecated. Angular Material's latest API is much easier to use. Recommend updating to latest techniques here: https://material.angular.dev/guide/theming.
Parameters
None.
dark-theme
@mixin dark-theme($config, $palette-key: "dark-palettes") { ... }Description
Includes a dark theme for your app. This defines colors, typography, and density.
Parameters
parameter Name parameter Description parameter Type parameter Default value $configThe config object used for multiple mixins in this library. See the example in
mixin-full-theming()for a description of all its options.Map— none $palette-keyWhich color to use from
$config.String"dark-palettes"light-theme
@mixin dark-theme() { ... }Description
Deprecated. Angular Material's latest API is much easier to use. Recommend updating to latest techniques here: https://material.angular.dev/guide/theming.
Parameters
None.
light-theme
@mixin light-theme($config, $palette-key: "light-palettes") { ... }Description
Includes a light theme for your app. This defines colors, typography, and density.
Parameters
parameter Name parameter Description parameter Type parameter Default value $configThe config object used for multiple mixins in this library. See the example in
mixin-full-theming()for a description of all its options.Map— none $palette-keyWhich color to use from
$config.String"light-palettes"@mixin light-theme() { ... }
Description
Deprecated. Angular Material's latest API is much easier to use. Recommend updating to latest techniques here: https://material.angular.dev/guide/theming.
Parameters
None.
A store that is automatically saved to and restored from local storage. This is suitable for small stores that can very quickly be (de)serialized to/from JSON without any noticeable delay.
- -At this point, if you change
- +_versionthe store will be reset to the default state. This is a convenience during initial development of your app. Once it is released to real users, you will want to use a MigrationManager to avoid wiping out your users' data:Class PersistentStore<State, Persisted>
A store that is automatically saved to and restored from local storage. This is suitable for small stores that can very quickly be (de)serialized to/from JSON without any noticeable delay.
+ + +At this point, if you change
+ +_versionthe store will be reset to the default state. This is a convenience during initial development of your app. Once it is released to real users, you will want to use a MigrationManager to avoid wiping out your users' data:If you want to persist something a little different from what is in the store, for example to omit some properties, use a PersistenceCodec:
- -Type Parameters
Hierarchy (view full)
Select a slice of the store to operate on. For example
-store('currentUser')will return a newStorethat represents thecurrentUserproperty.Type Parameters
Parameters
Returns Store<V>
Parameters
Rest...args: [attr: keyof State]Returns Store<State[keyof State]>
Type Parameters
Parameters
Returns Store<State[K]>
Index
Constructors
Properties
Methods
Constructors
constructor
Type Parameters
Parameters
the key in local storage at which to persist the state
-used when the state has not been persisted yet
-codec: undefined | PersistenceCodec<State, Persisted>;
migrator: undefined | MigrationManager<Persisted>;
} = {}
codec: undefined | PersistenceCodec<State, Persisted>
use to persist a different format than what is kept in the store
-migrator: undefined | MigrationManager<Persisted>
used to update the state when it was at a lower VersionedObject._version when it was last persisted
-Returns PersistentStore<State, Persisted>
Properties
Readonly$An
-Observableof the state of this store object.Protectedactiveget
Type declaration
Returns RootStore<object>
ProtectedOptionallastProtectedsubscribersMethods
ProtectedactivateParameters
Returns void
assign
Assigns the given values to state of this store object. The resulting state will be like
-Object.assign(store.state(), value).Parameters
Returns void
batch
Turns off this store's observables while
- -funcis executing, emitting only once afterward, if the store changed. This allows you to batch multiple mutations into a single update at the end.Parameters
Returns void
ProtecteddeactivateParameters
Returns void
delete
Removes the state represented by this store object from its parent. E.g. to remove the current user:
- -Returns void
ProtectedisParameters
Returns boolean
ProtectedmaybeReturns void
ProtectedmaybeReturns void
ProtectedmaybeReturns void
mutate
Runs
+ + +funcon a shallow clone of the state, replacing the state with the clone. The first argument tofuncwill be the cloned state, followed by the arguments inargs.Type Parameters
Hierarchy (View Summary)
Select a slice of the store to operate on. For example
+store('currentUser')will return a newStorethat represents thecurrentUserproperty.Type Parameters
Parameters
Returns Store<V>
Parameters
Returns Store<State[keyof State]>
Type Parameters
Parameters
Returns Store<State[K]>
Index
Constructors
Properties
Methods
Constructors
constructor
State extends VersionedObject,
Persisted extends VersionedObject = State,
>(
persistenceKey: string,
defaultState: State,
__namedParameters?: {
codec?: PersistenceCodec<State, Persisted>;
migrator?: MigrationManager<Persisted>;
},
): PersistentStore<State, Persisted>
Type Parameters
Parameters
the key in local storage at which to persist the state
+used when the state has not been persisted yet
+codec?: PersistenceCodec<State, Persisted>;
migrator?: MigrationManager<Persisted>;
} = {}
Optionalcodec?: PersistenceCodec<State, Persisted>use to persist a different format than what is kept in the store
+Optionalmigrator?: MigrationManager<Persisted>used to update the state when it was at a lower VersionedObject._version when it was last persisted
+Returns PersistentStore<State, Persisted>
Properties
Readonly$An
+Observableof the state of this store object.Protectedactiveget
ProtectedOptionallastProtectedsubscribersMethods
ProtectedactivateParameters
Returns void
assign
Assigns the given values to state of this store object. The resulting state will be like
+Object.assign(store.state(), value).Parameters
Returns void
batch
Turns off this store's observables while
+ + +funcis executing, emitting only once afterward, if the store changed. This allows you to batch multiple mutations into a single update at the end.Parameters
Returns void
ProtecteddeactivateParameters
Returns void
delete
Removes the state represented by this store object from its parent. E.g. to remove the current user:
+ + +Returns void
ProtectedisParameters
Returns boolean
ProtectedmaybeReturns void
ProtectedmaybeReturns void
ProtectedmaybeReturns void
mutate
func: (state: State, ...args: A) => void,
...args: A,
): void
Runs
funcon a shallow clone of the state, replacing the state with the clone. The first argument tofuncwill be the cloned state, followed by the arguments inargs.WARNING: You SHOULD NOT use a function that will mutate nested objects within the state.
-Type Parameters
Parameters
Parameters
Rest...args: AReturns void
Rest...args: AReturns void
refers
Parameters
Returns boolean
whether the given
-Storeoperates on the same slice of the store as this object.set
Replace the state represented by this store object with the given value.
-Parameters
Returns void
set
Runs
+funcon the state and replaces it with the return value. The first argument tofuncwill be the state, followed by the arguments inargs.Type Parameters
Parameters
Returns void
refers
Parameters
Returns boolean
whether the given
+Storeoperates on the same slice of the store as this object.set
Replace the state represented by this store object with the given value.
+Parameters
Returns void
set
func: (state: State, ...args: A) => State,
...args: A,
): void
Runs
funcon the state and replaces it with the return value. The first argument tofuncwill be the state, followed by the arguments inargs.WARNING: You SHOULD NOT use a function that will mutate the state.
-Type Parameters
Parameters
Parameters
Rest...args: AReturns State
Rest...args: AReturns void
state
Retrieve the current state represented by this store object.
-Returns State
ProtectedupdateParameters
Returns void
Settings
Member Visibility
Theme
On This Page
Type Parameters
Parameters
Returns void