Theming Angular Material
These settings contains the settings of scss for angular material
and provides
helpers that helps in applications styling.
table of content
- modules that is customizable depending on the theme
- global functions the work as helpers during theming the application
- placeholders that could be extended to reduce the bundle size instead of classes (coming soon)
- useful mixins to be used amoung different modules through the app.
- it makes life easier when it comes to define a new theme for angular material.
installation.
-
create a new file at your styles folder for example:
theme.scss
-
import
src/theming.scss
-
customize the theme and palette and settings variables if you need as:
// settings of padding and base font size $font-size-base: 16; // by default $font-size-html: unquote('#{$font-size-base}px'); // $primary, $accent, $warn, $gray // note gray is not used in theming but will be used // in global settings, variables, mixins and functions. @include override-palettes($mat-indigo, $mat-yellow, $mat-red, $mat-gray); // or with custom tones // will be compiled // $primary: mat-palette($mat-indigo, A400, A500) @include override-palettes($mat-indigo A400 A500, $mat-yellow, $mat-red, $mat-gray);
-
at the global
styles.scss
that is in your app root, import the aforementioned filetheme.scss
(created file in step 1) then includeinit-mat-theme
// this would initialize light theme by default @include mat-core(); @include init-mat-theme(); // to multiple themes .dark-theme { @include init-mat-theme($dark-theme); } .light-theme { @include init-mat-theme($theme); }
-
at
angular.json
add the following lines atbuild.options
:"stylePreprocessorOptions": { "includePaths": [ "projects/project-name/src/styles" ] }
then you are free to import the file created in step
1
(theme.scss) at any scss file for any component like@import 'theme'
full example
// app/src/styles/theme.scss
@import '~@angular/material/theming';
@import '~@pencilpix/angular-material-theme/src/theming';
/* overriding palettes and variables */
$font-size-base: 16; /* by default */
$font-size-html: unquote('#{$font-size-base}px');
@include override-palettes($mat-purple, $mat-amber, $mat-red, $mat-gray);
// app/src/styles.scss
@import 'theme';
@include mat-core();
@include init-mat-theme();
// at any scss/sass file
.classname {
@extend %demo-placeholder;
color: get(primary, 500);
}
// also you can extend whole element using `bem` mixin
// @include bem(placeholder, blockClass, element1 element2, modifier1 modifier2)
// instead of multiple includes for each block and it's elements.
@include bem(avatar, author, img icon, small medium large inverted);
// that would compile: author, author__img, author__icon, author--small, author--medium, ... etc
// with the applied styles to the placeholder