ฉันจะใช้ชุดรูปแบบธีมที่กำหนดเองใน Angular ได้อย่างไร


108

ฉันต้องการใช้สีแบรนด์ของ บริษัท ของฉันตลอดทั้งแอป

ฉันพบปัญหานี้: AngularJS 2 - การออกแบบวัสดุ - ตั้งค่าจานสีที่ฉันสามารถสร้างชุดรูปแบบที่กำหนดเองได้แต่โดยพื้นฐานแล้วจะใช้เพียงส่วนต่างๆของจานสีที่สร้างไว้ล่วงหน้า ฉันไม่ต้องการใช้สีที่กำหนดไว้ล่วงหน้าของ Material2 ฉันต้องการสีของแบรนด์ที่เป็นเอกลักษณ์และพิเศษของฉัน มีวิธีที่ดีกว่าในการสร้างธีมของตัวเอง_palette.scssไหม

ฉันจำเป็นต้องทำมิกซ์อินสำหรับแบรนด์ของฉันหรือไม่? ถ้ามี - มีคำแนะนำเกี่ยวกับวิธีการทำอย่างถูกต้องหรือไม่? ความหมายของเฉดสีต่างๆ (มีตัวเลขเช่น 50, 100, 200, A100, A200 ... )

ข้อมูลใด ๆ เกี่ยวกับพื้นที่นี้จะได้รับการชื่นชมมาก!



@anshuVersatile ขอบคุณสำหรับข้อมูล! ตอนนี้ฉันเข้าใจเรื่องเลขแล้ว ชื่นชมมาก :-)
Narxx

คำตอบ:


270

หลังจากการวิจัยบางส่วนฉันได้ข้อสรุปนี้ซึ่งสามารถแก้ไขได้สำหรับฉันหวังว่ามันจะช่วยคุณได้

ขั้นตอนที่ 1: สร้างจานสีของคุณเองจากสีของแบรนด์

พบเว็บไซต์ที่ยอดเยี่ยมนี้ที่คุณใส่สีของแบรนด์และสร้างจานสีที่สมบูรณ์พร้อมเฉดสีที่แตกต่างกันของสีแบรนด์นั้น: http://mcg.mbitson.com

ฉันใช้เครื่องมือนี้สำหรับทั้งprimaryสีของฉัน(ซึ่งเป็นสีแบรนด์ของฉัน) และaccentสี

ขั้นตอนที่ 2: สร้างจานสีในไฟล์ธีมที่คุณกำหนดเอง

นี่คือคำแนะนำในการสร้าง.scssไฟล์ดังกล่าว: https://github.com/angular/material2/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ดังนั้นในตัวอย่างนี้สีแบรนด์ของฉันคือ ส่วนที่เหลือเป็นเฉดสีอื่น ๆ (โดยตัวเลขที่ต่ำกว่าหมายถึงเฉดสีที่สว่างกว่าและตัวเลขที่สูงกว่าหมายถึงเฉดสีที่เข้มกว่า) AXXXมีเฉดสีที่แตกต่างกัน ไม่แน่ใจ (ยัง) ว่าใช้งานอยู่ที่ไหน อีกครั้งตัวเลขที่ต่ำกว่าหมายถึงตัวเลขที่สว่างและสูงกว่าหมายถึงมืด

contrastชุดสีตัวอักษรมากกว่าผู้สีพื้นหลัง มันยากมาก (หรือเป็นไปไม่ได้เลย) ในการคำนวณผ่าน CSS โดยที่แบบอักษรควรจะสว่าง (สีขาว) หรือสีเข้ม (สีดำที่มีความทึบ 0.87) ดังนั้นจึงสามารถอ่านได้ง่ายแม้กระทั่งกับคนตาบอดสี ดังนั้นจึงตั้งค่าด้วยตนเองและฮาร์ดโค้ดลงในนิยามจานสี คุณได้รับสิ่งนี้จากตัวสร้างจานสีที่ฉันเชื่อมโยงไว้ด้านบน (แม้ว่าจะถูกส่งออกในรูปแบบ Material1 แบบเก่าและคุณจะต้องแปลงสิ่งนี้เป็นรูปแบบ Material2 ด้วยตนเองเช่นที่ฉันโพสต์ไว้ที่นี่)

กำหนดธีมเพื่อใช้จานสีของแบรนด์เป็นprimaryสีและสิ่งที่คุณมีเพื่อเน้นเป็นaccentสีของคุณ

ขั้นตอนที่ 3: ใช้ธีมตลอดทั้งแอปทุกที่ที่คุณทำได้

องค์ประกอบบางอย่างสามารถใช้ชุดรูปแบบสีเช่น<md-toolbar>, <md-input>, <md-button>, <md-select>และอื่น ๆ พวกเขาจะใช้primaryโดยค่าเริ่มต้นดังนั้นโปรดตั้งค่าจานสีของแบรนด์เป็นหลัก หากคุณต้องการเปลี่ยนสีให้ใช้colorคำสั่ง (เป็นคำสั่งเชิงมุมหรือไม่)

ตัวอย่างเช่น:

<button mat-raised-button color="accent" type="submit">Login</button>


ในกรณีของฉันฉันใช้ตัวสร้างธีมของบุคคลที่สามและมันละเว้นสัญลักษณ์แฮชบนรหัสสีฐานสิบหก นอกจากนี้ยังรวมทุกคีย์และค่าด้วยเครื่องหมายคำพูดเดียว แต่ฉันไม่แน่ใจว่าเป็นปัญหา การเพิ่มแฮชช่วยแก้ไขปัญหาการคอมไพล์ของฉัน
isherwood

1
ใช่ฉันเพิ่งลองสิ่งนี้และได้ผล สิ่งเดียวที่เปลี่ยนไปคือส่วนของการนำเข้า คุณไม่จำเป็นต้องใช้ตัวแปรและคุณนำเข้า / รวมไฟล์การกำหนดธีมวัสดุเช่นนี้เท่านั้น: @import '~@angular/material/theming'; @include mat-core();
flackjap

2
ดูบทความนี้อธิบายวิธีการทำงานได้ดีมากblog.thoughtram.io/angular/2017/05/23/…
Martin Andersen

1
@TrevorGoodchild พูดตามตรงเราได้เลิกใช้โครงการ Angular ของเราและเขียนตั้งแต่เริ่มต้นโดยใช้ VueJS ดังนั้นฉันจำไม่ได้ว่าเราลงเอยด้วยการกำหนดธีมของเราใน Angular ได้อย่างไร :) เพียงแค่ลองเพิ่มตัวแปรสีและเพิ่มทั้งหมด ไปยังฟังก์ชัน mat-light-theme
Narxx

1
@Narxx ตามคำตอบต่อไปนี้ค่า AXXX มีไว้สำหรับปุ่มการทำงานแบบลอยและองค์ประกอบแบบโต้ตอบที่มี "A" สำหรับ "Accent" graphicdesign.stackexchange.com/a/69470
Trevor Karjanis

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.