কিছু গবেষণার পরে আমি এই উপসংহারটি শেষ করেছি যা এটি আমার জন্য সমাধান করেছে, আশা করি এটি আপনাকেও সহায়তা করবে।
পদক্ষেপ 1: ব্র্যান্ডিং রঙগুলি থেকে আপনার নিজস্ব প্যালেটগুলি তৈরি করুন।
আপনি আপনার ব্র্যান্ডের রঙটি প্রবেশ করেছেন সেখানে এই দুর্দান্ত ওয়েবসাইটটি পেয়েছেন এবং এটি ব্র্যান্ড রঙের বিভিন্ন শেডের সাথে একটি সম্পূর্ণ প্যালেট তৈরি করে: http://mcg.mbitson.com
আমি এই সরঞ্জামটি আমার primaryরঙ (যা আমার ব্র্যান্ড রঙ) এবং রঙ উভয়ের জন্য ব্যবহার করেছি accent।
পদক্ষেপ 2: আপনার কাস্টম থিম ফাইলে প্যালেটগুলি তৈরি করুন
এই জাতীয় .scssফাইল কীভাবে তৈরি করবেন তা এখানে একটি গাইড : https://github.com/angular/matory2/blob/master/guides/theming.md
@import '~@angular/material/theming';
// Be sure that you only ever include 'mat-core' mixin once!
// it should not be included for each theme.
@include mat-core();
// define a real custom palette (using http://mcg.mbitson.com)
$bv-brand: (
50: #ffffff,
100: #dde6f3,
200: #b4c9e4,
300: #7fa3d1,
400: #6992c9,
500: #5282c1,
600: #4072b4,
700: #38649d,
800: #305687,
900: #284770,
A100: #ffffff,
A200: #dde6f3,
A400: #6992c9,
A700: #38649d,
contrast: (
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: $black-87-opacity,
500: white,
600: white,
700: white,
800: white,
900: white,
A100: $black-87-opacity,
A200: $black-87-opacity,
A400: $black-87-opacity,
A700: white,
)
);
$bv-orange: (
50: #ffffff,
100: #fff7f4,
200: #fecdbd,
300: #fc9977,
400: #fc8259,
500: #fb6c3b,
600: #fa551d,
700: #f44205,
800: #d63a04,
900: #b83204,
A100: #ffffff,
A200: #fff7f4,
A400: #fc8259,
A700: #f44205,
contrast: (
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: $black-87-opacity,
500: white,
600: white,
700: white,
800: white,
900: white,
A100: $black-87-opacity,
A200: $black-87-opacity,
A400: $black-87-opacity,
A700: white,
)
);
// mandatory stuff for theming
$bv-palette-primary: mat-palette($bv-brand);
$bv-palette-accent: mat-palette($bv-orange);
// include the custom theme components into a theme object
$bv-theme: mat-light-theme($bv-palette-primary, $bv-palette-accent);
// include the custom theme object into the angular material theme
@include angular-material-theme($bv-theme);
উপরের কোড সম্পর্কে কিছু ব্যাখ্যা
বাম দিকে সংখ্যাগুলি উজ্জ্বলতার "স্তর" সেট করে। ডিফল্টটি 500 (যা আমার ব্র্যান্ডের রঙ / অ্যাকসেন্ট রঙের আসল ছায়া)। সুতরাং এই উদাহরণে, আমার ব্র্যান্ড রঙ হয় #5282c1। বাকিগুলি সেই রঙের অন্যান্য শেড (যেখানে কম সংখ্যার অর্থ উজ্জ্বল শেড এবং উচ্চতর সংখ্যার অর্থ গা dark় শেড হয়)। AXXXবিভিন্ন ছায়া গো আছে। নিশ্চিত নয় (এখনও) তারা কোথায় ব্যবহার করছে। আবার, একটি কম সংখ্যার অর্থ উজ্জ্বল এবং উচ্চতর সংখ্যার অর্থ গা .়।
এই contrastপটভূমির রঙগুলির উপর ফন্টের রঙ সেট করে। সিএসএসের মাধ্যমে গণনা করা খুব শক্ত (বা এমনকি অসম্ভব) যেখানে ফন্টটি উজ্জ্বল (সাদা) বা গা (় (০.৮87 ধাপে ধীরে ধীরে কালো) হওয়া উচিত তাই অন্ধ লোকদের রঙ করা এমনকি এটি সহজেই পঠনযোগ্য। সুতরাং এটি ম্যানুয়ালি সেট করা হয়েছে এবং প্যালেট সংজ্ঞাতে হার্ড-কোডড। এটি আমি উপরে লিঙ্কযুক্ত প্যালেট জেনারেটর থেকেও পেয়েছি (যদিও এটি পুরাতন ম্যাটারিয়াল 1 ফর্ম্যাটে আউটপুট করা হচ্ছে, এবং আমি এখানে পোস্ট করার মতোভাবে আপনাকে এটি ম্যানুয়ালি 2 রূপান্তর করতে হবে)।
ব্র্যান্ড রঙের প্যালেটটিকে রঙ হিসাবে ব্যবহার করতে primaryএবং আপনার accentরঙ হিসাবে অ্যাকসেন্টের জন্য যা কিছু আছে তা থিম সেট করুন ।
স্টিপি 3: আপনি যেখানেই পারেন অ্যাপ্লিকেশন জুড়ে থিমটি ব্যবহার করুন
কিছু উপাদান থিম রং, মত সময় লাগতে পারে <md-toolbar>, <md-input>, <md-button>, <md-select>ইত্যাদি। তারা primaryডিফল্টরূপে ব্যবহার করবে তাই আপনি ব্র্যান্ডের রঙের প্যালেটটিকে প্রাথমিক হিসাবে সেট করেছেন তা নিশ্চিত করুন। আপনি যদি রঙটি পরিবর্তন করতে চান তবে colorনির্দেশিকাটি ব্যবহার করুন (এটি কোনও কৌনিক নির্দেশিকা?)।
উদাহরণ স্বরূপ:
<button mat-raised-button color="accent" type="submit">Login</button>