Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a custom color theme with angular5 and angular materials

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!

like image 423
Dan Avatar asked Nov 26 '17 15:11

Dan


People also ask

How do I create a custom color palette in angular materials?

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”.

How do I create a custom 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!

Can we use angular material and bootstrap together?

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.


3 Answers

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);
like image 114
Z. Bagley Avatar answered Oct 17 '22 11:10

Z. Bagley


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.

like image 30
Janne Harju Avatar answered Oct 17 '22 12:10

Janne Harju


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.

  • Give it a name
  • Choose base color
  • Click the clipboard icon
  • Choose the Framework
  • Copy paste into your .scss
  • Pass the variable down
like image 4
Elias K. Avatar answered Oct 17 '22 13:10

Elias K.