I have been following the angular/material documentation for how to create a custom theme, followed other blogs, and checked various stack overflow similar questions, but cant seem to get this working. I have the following styles.css, angular-cli.json, theme.scss, and another sass file where my theme colors come from super-styles.sass.
styles.css
...
@import 'assets/styles/theme.scss';
...
angular-cli.json
...
"styles": [
"styles.css",
"src/assets/styles/theme.scss"
],
...
theme.scss
@import '~@angular/material/theming';
@import "super-styles";
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core()
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$candy-app-primary: mat-palette($darkblue, A400);
$candy-app-accent: mat-palette($orange, A400);
// The warn palette is optional (defaults to red).
$candy-app-warn: mat-palette($alert);
// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($candy-app-theme);
Super-styles.sass
...
$darkblue: #7faedd
$mediumblue: #85ceef
$lightblue: #c5e8f1
$yellow: #f4ef5f
$alert: #f37652
$orange: #fbb03c
...
According to the tutorials, I feel like this should be working, but angular doesnt compile and I get an error.
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./src/assets/styles/theme.scss Module build failed: Unknown word (23:1)
21 | $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn); 22 |
23 | // Include theme styles for core and each component used in your app. | ^ 24 | // Alternatively, you can import and @include the theme mixins for each component 25 | // that you are using.
Any help as to how to build a custom theme and use it in my angular app would be greatly helpful. Thanks!
Approach: Firstly, we have to create our own theme file and in that, we have to include mat-core() Sass mixin and import theming file from angular material. After that, we have to start building our color palette and at last, we have to include our created theme file in “angular-material-theme”.
To do so, open the Settings and navigate to Appearance & Behavior → Material Theme UI → Custom Theme. Once you're done customizing your colors, you'll need to select Custom Theme or Light Custom Theme from the Theme Switcher to see your colors in action. Enjoy!
Yes, you can use parts of Angular Material and Bootstrap together in the same web or mobile project. Developers need to be careful not to use the same components, which can clash. Angular Material and Bootstrap offer a variety of unique components for great website design.
In order to use a custom hex palette for an Angular - Material you will need to define the different shades as well as contrast colors for the palette, even if you only want one color. I'd suggest using at least 3 colors (light, normal, dark) so that it works flawless with Material's built in animations:
// below defines your custom color to build a theme palette from
$my-blue: (
50: #7fdddd,
100: #7faedd,
200: #7f7fdd,
300: #7faedd,
400: #7faedd,
500: #7faedd,
600: #7faedd,
700: #7faedd,
800: #7faedd,
900: #7faedd,
A100: #7faedd,
A200: #7faedd,
A400: #7faedd,
A700: #7faedd,
contrast: (
50: white,
100: white,
200: white,
300: white,
400: white,
500: white,
600: white,
700: white,
800: white,
900: white,
A100: white,
A200: white,
A400: white,
A700: white,
)
);
// below creates a primary palette with three shades of blue
$my-primary: mat-palette($my-blue, 100, 50, 200);
as Z. Bagley suggested make your own palette, but I think that you don't need to make all those colors into palette. For example this works fine.
$custom-collection: (
warning : #FFC116,
success : #0a630f,
danger: #c00000,
contrast: (
warning : #000000,
success : #FFFFFF,
danger: #FFFFFF,
)
);
Then you make palette as suggested
$my-app-custom: mat-palette($custom-collection, custom);
Then merge it to theme after mat-light-theme row like this
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
$my-app-theme: map_merge($my-app-theme, (custom: $my-app-custom));
After this you have one object where every color is located.
And may I suggest you make general custom object for this like this
$custom: map-get($my-app-theme, custom);
Then you can use it in your component like this
background-color: mat-color($custom, validation-invalid);
color: mat-color($custom, validation-invalid-contrast);
And one more suggestion. You may add mat-success to your global style file
.mat-success {
background-color: mat-color($custom, success);
color: mat-color($custom, success-contrast);
}
Now you can use color attribute like with primary and accent colors.
<button mat-flat-button color="success" >Success</button>
This works because color directive add mat-*-class to element where * is value of color. So color="foo" generates class="mat-foo" to corresponding element.
For future reference, there are tools out there such as http://mcg.mbitson.com/#!?mcgpalette0=%233f51b5 that can create the theme for you based on a starting color.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With