angular - আমি কৌনিকটিতে কীভাবে কাস্টম থিম প্যালেটগুলি ব্যবহার করতে পারি?



sass material-design (1)

কিছু গবেষণার পরে আমি এই উপসংহারটি শেষ করেছি যা এটি আমার জন্য সমাধান করেছে, আশা করি এটি আপনাকেও সহায়তা করবে।

পদক্ষেপ 1: ব্র্যান্ডিং রঙগুলি থেকে আপনার নিজস্ব প্যালেটগুলি তৈরি করুন।

আপনি আপনার ব্র্যান্ডের রঙটি প্রবেশ করেছেন সেখানে দুর্দান্ত এই ওয়েবসাইটটি পেয়েছে এবং এটি সেই ব্র্যান্ড রঙের বিভিন্ন শেডের সাথে একটি সম্পূর্ণ প্যালেট তৈরি করে: http://mcg.mbitson.com

আমি আমার primary রঙ (যা আমার ব্র্যান্ড রঙ) এবং accent রঙ উভয়ের জন্যই এই সরঞ্জামটি ব্যবহার করেছি।

পদক্ষেপ 2: আপনার কাস্টম থিম ফাইলে প্যালেটগুলি তৈরি করুন

এই জাতীয় .scss ফাইলটি কীভাবে তৈরি করবেন তা এখানে একটি গাইড: https://github.com/angular/material2/blob/master/guides/theming.md

@import '[email protected]/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 বিভিন্ন শেড। তারা কোথায় ব্যবহার করছে তা নিশ্চিত (এখনও) না। আবার, একটি কম সংখ্যার অর্থ উজ্জ্বল এবং উচ্চতর সংখ্যার অর্থ গাer়।

contrast background পটভূমির রঙগুলির চেয়ে ফন্টের রঙ নির্ধারণ করা হয়। সিএসএসের মাধ্যমে গণনা করা খুব শক্ত (বা এমনকি অসম্ভব) যেখানে ফন্টটি উজ্জ্বল (সাদা) বা গা dark় (০.৮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>

আমি আমার অ্যাপ্লিকেশন জুড়ে আমার সংস্থার ব্র্যান্ডের রঙগুলি ব্যবহার করতে চাই।

আমি এই সমস্যাটি পেয়েছি: AngularJS 2 - ম্যাটেরিয়াল ডিজাইন - রঙ প্যালেট সেট করুন যেখানে আমি একটি কাস্টম থিম তৈরি করতে পারি তবে এটি মূলত প্রাক-বিল্ট প্যালেটগুলির বিভিন্ন অংশ ব্যবহার করে। আমি ম্যাটারিয়াল 2 এর পূর্বনির্ধারিত রঙগুলি ব্যবহার করতে চাই না। আমি আমার অনন্য এবং বিশেষ ব্র্যান্ডের রঙগুলি চাই। _palette.scss সাথে চারপাশে হ্যাক না করে নিজের থিম তৈরি করার জন্য আরও ভাল উপায় (রাইটার?) থাকতে পারে?

আমার ব্র্যান্ড প্যালেটটির জন্য কি আমার একটি মিশ্রণ তৈরি করা দরকার? যদি তাই হয় - এটি সঠিকভাবে কীভাবে করবেন তার কোনও গাইড? রঙের বিভিন্ন শেডের অর্থগুলি কী: (50, 100, 200, A100, A200 এর মতো সংখ্যায় চিহ্নিত)?

এই অঞ্চল সম্পর্কে কোনও তথ্য অনেক প্রশংসা করা হবে!





angular-material2