Χρώμα

Χρώματα θέματος

Χρησιμοποιούμε ένα υποσύνολο όλων των χρωμάτων για να δημιουργήσουμε μια μικρότερη χρωματική παλέτα για τη δημιουργία συνδυασμών χρωμάτων, διαθέσιμη επίσης ως μεταβλητές Sass και χάρτη Sass στο scss/_variables.scssαρχείο του Bootstrap.

Όλα αυτά τα χρώματα είναι διαθέσιμα ως χάρτης Sass, $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Δείτε τους χάρτες Sass και τα έγγραφα βρόχων για τον τρόπο τροποποίησης αυτών των χρωμάτων.

Ολα τα ΧΡΩΜΑΤΑ

Όλα τα χρώματα Bootstrap είναι διαθέσιμα ως μεταβλητές Sass και ως χάρτης Sass στο scss/_variables.scssαρχείο. Για να αποφύγουμε τα αυξημένα μεγέθη αρχείων, δεν δημιουργούμε κατηγορίες χρωμάτων κειμένου ή φόντου για καθεμία από αυτές τις μεταβλητές. Αντίθετα, επιλέγουμε ένα υποσύνολο αυτών των χρωμάτων για μια παλέτα θεμάτων .

Φροντίστε να παρακολουθείτε τους λόγους αντίθεσης καθώς προσαρμόζετε τα χρώματα. Όπως φαίνεται παρακάτω, προσθέσαμε τρεις λόγους αντίθεσης σε καθένα από τα κύρια χρώματα—ένα για τα τρέχοντα χρώματα του δείγματος, ένα για το λευκό και ένα για το μαύρο.

Σημειώσεις για τον Sass

Το Sass δεν μπορεί να δημιουργήσει μεταβλητές μέσω προγραμματισμού, επομένως δημιουργήσαμε με μη αυτόματο τρόπο μεταβλητές για κάθε απόχρωση και απόχρωση. Καθορίζουμε την τιμή του μεσαίου σημείου (π.χ., $blue-500) και χρησιμοποιούμε προσαρμοσμένες συναρτήσεις χρώματος για να βάψουμε (φωτίσει) ή να σκιάρουμε (σκούρα) τα χρώματά μας μέσω της mix()συνάρτησης χρώματος του Sass.

Η χρήση mix()δεν είναι ίδια με το lighten()και darken()—το πρώτο αναμειγνύει το καθορισμένο χρώμα με το λευκό ή το μαύρο, ενώ το δεύτερο προσαρμόζει μόνο την τιμή φωτεινότητας κάθε χρώματος. Το αποτέλεσμα είναι μια πολύ πιο ολοκληρωμένη σουίτα χρωμάτων, όπως φαίνεται σε αυτήν την επίδειξη του CodePen .

Οι συναρτήσεις μας tint-color()και shade-color()χρησιμοποιούνται mix()παράλληλα με τη $theme-color-intervalμεταβλητή μας, η οποία καθορίζει μια βαθμιαία ποσοστιαία τιμή για κάθε μικτό χρώμα που παράγουμε. Δείτε τα αρχεία scss/_functions.scssκαι scss/_variables.scssγια τον πλήρη πηγαίο κώδικα.

Έγχρωμοι χάρτες Sass

Τα πηγαία αρχεία Sass του Bootstrap περιλαμβάνουν τρεις χάρτες για να σας βοηθήσουν να κάνετε γρήγορη και εύκολη αναζήτηση μιας λίστας χρωμάτων και των εξαγωνικών τιμών τους.

• $colorsπαραθέτει όλα τα διαθέσιμα βασικά ( 500) χρώματα
• $theme-colorsπαραθέτει όλα τα χρώματα θεμάτων με σημασιολογική ονομασία (εμφανίζονται παρακάτω)
• $graysπαραθέτει όλες τις αποχρώσεις και τις αποχρώσεις του γκρι

Μέσα scss/_variables.scssστο , θα βρείτε τις μεταβλητές χρώματος του Bootstrap και τον χάρτη Sass. Ακολουθεί ένα παράδειγμα του $colorsχάρτη Sass:

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

Προσθέστε, αφαιρέστε ή τροποποιήστε τιμές εντός του χάρτη για να ενημερώσετε τον τρόπο χρήσης τους σε πολλά άλλα στοιχεία. Δυστυχώς αυτή τη στιγμή, δεν χρησιμοποιούν όλα τα στοιχεία αυτόν τον χάρτη Sass. Οι μελλοντικές ενημερώσεις θα προσπαθήσουν να το βελτιώσουν. Μέχρι τότε, σχεδιάστε να χρησιμοποιήσετε τις ${color}μεταβλητές και αυτόν τον χάρτη Sass.

Παράδειγμα

Δείτε πώς μπορείτε να τα χρησιμοποιήσετε στο Sass σας:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

Οι κατηγορίες χρησιμότητας χρώματος και φόντουcolor είναι επίσης διαθέσιμες για ρύθμιση και background-colorχρήση των 500τιμών χρώματος.