Πώς να αλλάξετε το γωνιακό θέμα σε 5 λεπτά!

είναι πολύ εύκολο να δημιουργήσετε ένα προσαρμοσμένο γωνιακό θέμα υλικού. Αυτό θα σας επιτρέψει να καθορίσετε πρωτεύοντα χρώματα, προφορά και προειδοποίηση που θα χρησιμοποιηθούν σε στοιχεία Γωνιακού Υλικού.

Το προσαρμοσμένο θέμα σας θα είναι ένα αρχείο Sass και στην περίπτωσή μας θα το ονομάσουμε theme.scss και θα το τοποθετήσουμε στο φάκελο της εφαρμογής μας / src.

Μην ανησυχείτε αν δεν χρησιμοποιείτε το Sass για την υπόλοιπη εφαρμογή σας. Εάν χρησιμοποιείτε το γωνιακό CLI, μπορείτε απλά να προσθέσετε το αρχείο Sass στη λίστα των στυλ στο αρχείο διαμόρφωσης .angular-cli.json και το γωνιακό CLI θα φροντίσει για τη σύνταξη του αρχείου CSS:

.angular-cli.json

"στυλ": [
  "styles.css",
  "theme.scss"
],

Στο αρχείο θεμάτων, θα θέλετε να εισαγάγετε πρώτα το κύριο αρχείο Sass από το Γωνιακό Υλικό και να συμπεριλάβετε τα βασικά στυλ:

theme.scss

@import '~ @ γωνιακό / υλικό / theming'?
@ include mat-core ();

Στη συνέχεια, θα δηλώσετε τις μεταβλητές για τα πρωτεύοντα, τα προφίλ και τα προειδοποιητικά σας χρώματα χρησιμοποιώντας τη λειτουργία παλέτας mat.

η παλέτα mat παίρνει ένα όνομα χρώματος ως το πρώτο της επιχείρημα και το υπόλοιπο προαιρετικό δεύτερο, τρίτο και τέταρτο ορίσματα ορίζουν μια προεπιλεγμένη τιμή, μια ελαφρύτερη τιμή και μια σκοτεινότερη τιμή. Τα ονόματα των χρωμάτων και οι ίδιες οι τιμές λαμβάνονται από τις επίσημες κατευθυντήριες οδηγίες σχεδίου υλικού:

theme.scss

$ my-app-primary: mat-παλέτα ($ mat-μπλε-γκρι);
$ my-app-accent: mat-παλέτα ($ mat-ροζ, 500, 900, A100);
$ my-app-προειδοποίηση: mat-παλέτα ($ mat-βαθιά-πορτοκαλί);
$ my-app-theme: mat-light-theme ($ my-app-primary, $ my-app-accent, $ my-app-προειδοποίηση);
@περιλαμβάνει γωνιακό υλικό-θέμα ($ my-app-theme).

Ολοκληρώνουμε δημιουργώντας μια μεταβλητή $ my-app-theme που συνδυάζει τους ορισμούς χρωμάτων με τη συνάρτηση mat-light-theme και, τέλος, συμπεριλαμβάνει το αποτέλεσμα της κλήσης της συνάρτησης γωνιακού υλικού-θέματος με το θέμα $ my-app.

Το προειδοποιητικό χρώμα είναι προαιρετικό και θα έχει προεπιλεγμένο χρώμα κόκκινο εάν δεν παρέχεται κανένα.

Πρόσθετα και εναλλακτικά θέματα

Μπορείτε επίσης να δημιουργήσετε εναλλακτικά θέματα αν αισθάνεστε τόσο διασκεδασμένοι με τη δημιουργία ενός ορισμού θέματος μέσα σε μια τάξη. Στη συνέχεια, απλά προσθέστε το όνομα της κλάσης σε ένα γονικό στοιχείο στα πρότυπά σας για να εφαρμοστεί το εναλλακτικό θέμα.

Εδώ είναι το πλήρες αρχείο μας, με ένα εναλλακτικό θέμα:

theme.scss

@import '~ @ γωνιακό / υλικό / theming'?
@ include mat-core ();
$ my-app-primary: mat-παλέτα ($ mat-μπλε-γκρι);
$ my-app-accent: mat-παλέτα ($ mat-ροζ, 500, 900, A100);
$ my-app-προειδοποίηση: mat-παλέτα ($ mat-βαθιά-πορτοκαλί);
$ my-app-theme: mat-light-theme ($ my-app-primary, $ my-app-accent, $ my-app-προειδοποίηση);
@περιλαμβάνει γωνιακό υλικό-θέμα ($ my-app-theme).
.alternate-theme {
  $ εναλλακτική-κύρια: mat-παλέτα ($ mat-light-blue);
  $ εναλλακτική-έμφαση: mat-παλέτα ($ mat-κίτρινο, 400);
  $ εναλλακτικό θέμα: mat-light-theme ($ εναλλασσόμενο-πρωτεύον, $ εναλλακτική-έμφαση);
  @ περιλαμβάνει το γωνιακό υλικό-θέμα ($ εναλλακτική-θέμα)?
}}

Δείτε πώς φαίνονται τα δύο μας θέματα:

app.component.html


  Κύριο θέμα:
  

  Εναλλακτικό Θέμα:
  

Για περισσότερες πληροφορίες,
 Γωνιακό υλικό

Μπορείτε να χρησιμοποιήσετε τον ιστότοπο http://mcg.mbitson.com για να δημιουργήσετε τη δική σας παλέτα χρωμάτων. Ευχαριστώ το Sushant Pushkarna για να το μοιραστείτε.

συμπέρασμα

Και αυτό είναι! Αυτό το δούλεψε; Παρακαλώ αφήστε τις ερωτήσεις και τα σχόλια παρακάτω!

Ευχαριστούμε που το διαβάσατε!

Αν βρήκατε αυτό το άρθρο χρήσιμο, .