‫ساخت تم سفارشی در انگیولار متریال ۲ - بخش اول

در قسمت قبل بیان شد همراه با نصب Angular Material، تعدادی تم از قبل ساخته شده نیز نصب خواهند شد که شامل یکسری استایل با رنگهای مشخصی هستند. این تم‌ها عبارتند از:

• indigo-pink
• deeppurple-amber
• purple-green
• pink-bluegrey 

انگیولار متریال ۲ علاوه بر این، امکاناتی برای ایجاد تم سفارشی رانیز فراهم کرده است. در این بخش قصد داریم برای قالب نمونه‌ای که قبلا ایجاد کرده بودیم یک تم سفارشی بسازیم.

مقدمه

تم در انگیولار متریال، از ترکیب چند پالت رنگی، ساخته می‌‌شود. پالت‌های رنگ را در طراحی متریال (Material Design) در اینجا می‌توانید مشاهده کنید. انگیولار متریال رنگهای مورد استفاده خود را در گروه‌های زیر دسته بندی کرده است. 

• Primary: این پالت رنگی به صورت گسترده در بخشهای مختلف صفحه و کامپوننت‌ها مورد استفاده قرار می‌گیرد.
  
• Accent: این پالت رنگی برای دکمه‌های شناور و همچنین المنتهای تعاملی مورد استفاده قرار می‌گیرد.
  
• Warn: این پالت رنگی برای مشخص کردن حالت‌های خطا، مورد استفاده قرار می‌گیرد.
  
• Foreground: این پالت رنگی برای متون و آیکونها مورد استفاده قرار می‌گیرد.
  
• Background: این پالت رنگی برای المنت‌های پس زمینه مورد استفاده قرار می‌گیرد.
  

در انگیولار متریال تمامی تم‌ها در زمان buildبه صورت استاتیک تولید می‌شوند. این قابلیت با خارج کردن چرخه تولید تم از چرخه راه‌اندازی برنامه، باعث بهبود در راه‌اندازی خواهد شد. 

تعریف تم سفارشی

برای ساخت تم سفارشی نیاز به یک فایل Sassخواهیم داشت. پس در مسیر /srcیک فایل Sassرا با نام my-custom-theme.scssایجاد می‌کنیم (شما می‌توانید از هر نام دیگری برای فایل Sass استفاده کنید). اگر از AngularCLIبرای برنامه‌های خود استفاده می‌کنید، بایستی فایل Sass ایجاد شده را به لیست استایل‌ها در فایل angular-cli.jsonاضافه کنید. این کار باعث می‌شود AngularCLIاین فایل Sassرا در زمان buildبه cssکامپایل کند. 

نکته: استفاده از فایل Sassبرای ساختن تم سفارشی به این معنی نیست که شما از Sassبرای سایر Styleهای برنامه خود استفاده کنید.

"styles": [
  "styles.css",
  "my-custom-theme.scss"
],

اگر از AngularCLI استفاده نمی‌کنید، شما نیاز به ابزاری برای کامپایل فایل Sass به css خواهید داشت. ابزارهای بسیاری در این زمینه وجود دارند از جمله: gulp-sassو grunt-sass. ولی ساده‌ترین ابزار برای این کار node-sassمی‌باشد. کافی است بعد از نصب، دستور زیر را اجرا کنید تا فایل sass به css کامپایل شود. فایل css تولید شده را مستقیما در صفحه index.html خود می‌توانید استفاده کنید.

node-sass src/my-custom-theme.scss dist/my-custom-theme.css

در فایل تم ایجاد شده (my-custom-theme.scss) ابتدا بایستی فایل Sassاصلی انگیولار متریال را وارد کنید.

@import '~@angular/material/theming';

در قدم بعدی mixin تعریف شده با نام mat-core را در فایل Sass انگیولار متریال، وارد می‌کنیم. این mixin شامل تمامی Styleهای مشترکی استکه توسط کامپوننت‌های مختلف استفاده می‌شود. 

@include mat-core();

نکته:مطمئن شوید فقط یک بار این mixinرا در سرتاسر برنامه خود وارد کرده باشید. در غیر این صورت،فایل cssتولید شده شامل یکسری Styleتکراری خواهد بود و این باعث بزرگ و حجیم شدن فایل css نهایی خواهد شد. 

تا اینجا فایل تم ایجاد شده اینگونه خواهد بود: 

@import '~@angular/material/theming';
@include mat-core();

حالا نوبت تعریف تم سفارشی است. ولی قبل از آن باید با سیستم رنگها در طراحی متریال (Material Design) آشنایی داشته باشیم. در طراحی متریال ۱۹ پالت رنگی با نام‌های مختلف وجود دارند. برای ۱۶ پالت رنگی، ۱۴ طیف رنگی و برای ۳ پالت رنگی دیگر، ۱۰ طیف رنگی در نظر گرفته شده است. هر کدام از این طیف‌های رنگی، دارای یک مقدار عددی است. یعنی یک رنگ در سیستم طراحی متریال متشکل از یک نام رنگ و یک شماره طیف رنگ است که مقدار پیش فرض طیف رنگ، عدد ۵۰۰ می‌باشد. 

حالا با استفاده از تابع mat-paletteتعریف شده در فایل Sassانگیولار متریال، سه متغیر را برای رنگهای Primary، Accentو Warnدر فایل my-custom-theme.scss، به شکل زیر تعریف می‌کنیم. 

$my-app-primary: mat-palette($mat-indigo);
$my-app-accent:  mat-palette($mat-pink, 500, A100, A400);
$my-app-warn:    mat-palette($mat-deep-orange);

تابع mat-paletteدر فایل Sassاصلی انگیولار متریال، به شکل زیر تعریف شده است. 

@function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700)

این تابع یک پارامتر اجباری دارد و بقیه پارامترها اختیاری هستند.  

• base-palette$: نام رنگ را دریافت می‌کند. این پارامتر اجباری است و باید مشخص شود. 
  
• default$: با این پارامتر، طیف پیش‌فرض رنگ انتخاب شده را مشخص می‌کنیم. این پارامتر اختیاری است و مقدار پیش فرض آن 500 است.
  
• lighter$: با این پارامتر، طیف روشن رنگ انتخاب شده را مشخص می‌کنیم. این پارامتر اختیاری است و مقدار پیش فرض آن 100 است.
  
• darker$: با این پارامتر، طیف تیره رنگ انتخاب شده را مشخص می‌کنیم. این پارامتر اختیاری است و مقدار پیش فرض آن 700 است.  
  

@import '~@angular/material/theming';
@include mat-core();
$my-app-primary: mat-palette($mat-teal);
$my-app-accent:  mat-palette($mat-amber, 500, A100, A400);
$my-app-warn:    mat-palette($mat-deep-orange);

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

@include angular-material-theme($my-app-theme);

<md-card><button md-raised-button color="primary">
    Primary</button><button md-raised-button color="accent">
    Accent</button><button md-raised-button color="warn">
    Warning</button></md-card>