ରଙ୍ଗ

ଥିମ୍ ରଙ୍ଗ |

scss/_variables.scssରଙ୍ଗ ସ୍କିମ୍ ସୃଷ୍ଟି କରିବା ପାଇଁ ଏକ ଛୋଟ ରଙ୍ଗ ପ୍ୟାଲେଟ୍ ସୃଷ୍ଟି କରିବାକୁ ଆମେ ସମସ୍ତ ରଙ୍ଗର ଏକ ସବ୍ସେଟ୍ ବ୍ୟବହାର କରୁ, ବୁଟ୍ଷ୍ଟ୍ରାପ୍ ଫାଇଲ୍ ରେ ସାସ୍ ଭେରିଏବଲ୍ ଏବଂ ସାସ୍ ମାନଚିତ୍ର ଭାବରେ ମଧ୍ୟ ଉପଲବ୍ଧ |

ଏହି ସମସ୍ତ ରଙ୍ଗ ଏକ ସାସ୍ ମାନଚିତ୍ର ଭାବରେ ଉପଲବ୍ଧ , $theme-colors।

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

ଏହି ରଙ୍ଗଗୁଡ଼ିକୁ କିପରି ରୂପାନ୍ତର କରାଯିବ ସେଥିପାଇଁ ଆମର ସାସ୍ ମାନଚିତ୍ର ଏବଂ ଲୁପ୍ ଡକସ୍ ଯାଞ୍ଚ କରନ୍ତୁ |

ସମସ୍ତ ରଙ୍ଗ |

scss/_variables.scssସମସ୍ତ ବୁଟଷ୍ଟ୍ରାପ୍ ରଙ୍ଗ ସାସ୍ ଭେରିଏବଲ୍ ଏବଂ ଫାଇଲରେ ଏକ ସାସ୍ ମାନଚିତ୍ର ଭାବରେ ଉପଲବ୍ଧ | ବର୍ଦ୍ଧିତ ଫାଇଲ୍ ଆକାରକୁ ଏଡାଇବା ପାଇଁ, ଆମେ ଏହି ପ୍ରତ୍ୟେକ ଭେରିଏବଲ୍ ପାଇଁ ଟେକ୍ସଟ୍ କିମ୍ବା ବ୍ୟାକଗ୍ରାଉଣ୍ଡ୍ ରଙ୍ଗ କ୍ଲାସ୍ ସୃଷ୍ଟି କରୁନାହୁଁ | ଏହା ପରିବର୍ତ୍ତେ, ଏକ ଥିମ୍ ପ୍ୟାଲେଟ୍ ପାଇଁ ଆମେ ଏହି ରଙ୍ଗର ଏକ ସବ୍ସେଟ୍ ବାଛୁ |

ତୁମେ ରଙ୍ଗ କଷ୍ଟୋମାଇଜ୍ କଲାବେଳେ ବିପରୀତ ଅନୁପାତ ଉପରେ ନଜର ରଖିବାକୁ ନିଶ୍ଚିତ ହୁଅ | ନିମ୍ନରେ ଦେଖାଯାଇଥିବା ପରି, ଆମେ ପ୍ରତ୍ୟେକ ମୁଖ୍ୟ ରଙ୍ଗରେ ତିନୋଟି ବିପରୀତ ଅନୁପାତ ଯୋଡିଛୁ - ଗୋଟିଏ ସ୍ୱିଚ୍ ର ସାମ୍ପ୍ରତିକ ରଙ୍ଗ ପାଇଁ, ଗୋଟିଏ ଧଳା ଏବଂ ଅନ୍ୟଟି କଳା ପାଇଁ |

ସାସ୍ ଉପରେ ଟିପ୍ପଣୀ |

ସାସ୍ ପ୍ରୋଗ୍ରାମେଟିକ୍ ଭେରିଏବଲ୍ ସୃଷ୍ଟି କରିପାରିବ ନାହିଁ, ତେଣୁ ଆମେ ମାନୁଆଲ ଭାବରେ ପ୍ରତ୍ୟେକ ଟିଣ୍ଟ୍ ପାଇଁ ଭେରିଏବଲ୍ ସୃଷ୍ଟି କରି ନିଜକୁ ଛାଇ କରିଥାଉ | ଆମେ ମିଡପଏଣ୍ଟ ମୂଲ୍ୟ ନିର୍ଦ୍ଦିଷ୍ଟ କରୁ (ଯଥା, $blue-500) ଏବଂ ସାସ୍ ର mix()ରଙ୍ଗ ଫଙ୍କସନ୍ ମାଧ୍ୟମରେ ଆମର ରଙ୍ଗକୁ ଟାଇଟ୍ (ହାଲୁକା) କିମ୍ବା ଛାଇ (ଗା dark ଼) କରିବା ପାଇଁ କଷ୍ଟମ୍ ରଙ୍ଗ ଫଙ୍କସନ୍ ବ୍ୟବହାର କରୁ |

ବ୍ୟବହାର mix()କରିବା ସମାନ ନୁହେଁ lighten()ଏବଂ darken()- ପୂର୍ବ ନିର୍ଦ୍ଦିଷ୍ଟ ରଙ୍ଗକୁ ଧଳା କିମ୍ବା କଳା ସହିତ ମିଶ୍ରଣ କରିଥାଏ, ଶେଷଟି କେବଳ ପ୍ରତ୍ୟେକ ରଙ୍ଗର ହାଲୁକା ମୂଲ୍ୟକୁ ସଜାଡିଥାଏ | ଏହି କୋଡପେନ୍ ଡେମୋରେ ଦେଖାଯାଇଥିବା ପରି ଫଳାଫଳ ହେଉଛି ରଙ୍ଗର ଏକ ସମ୍ପୂର୍ଣ୍ଣ ସଂପୂର୍ଣ୍ଣ ସୁଟ୍ |

ଆମର tint-color()ଏବଂ shade-color()ଫଙ୍କସନ୍ ଗୁଡିକ mix()ଆମର $theme-color-intervalଭେରିଏବଲ୍ ସହିତ ବ୍ୟବହାର କରେ, ଯାହା ଆମେ ଉତ୍ପାଦନ କରୁଥିବା ପ୍ରତ୍ୟେକ ମିଶ୍ରିତ ରଙ୍ଗ ପାଇଁ ଏକ ଷ୍ଟେପ୍ ଶତକଡ଼ା ମୂଲ୍ୟ ନିର୍ଦ୍ଦିଷ୍ଟ କରେ | ପୂର୍ଣ୍ଣ ଉତ୍ସ କୋଡ୍ ପାଇଁ scss/_functions.scssଏବଂ ଫାଇଲଗୁଡିକ ଦେଖନ୍ତୁ |scss/_variables.scss

ରଙ୍ଗ ସାସ୍ ମାନଚିତ୍ରଗୁଡିକ |

ବୁଟଷ୍ଟ୍ରାପ୍ ର ଉତ୍ସ ସାସ୍ ଫାଇଲଗୁଡିକ ତିନୋଟି ମାନଚିତ୍ର ଅନ୍ତର୍ଭୂକ୍ତ କରେ ଯାହା ଆପଣଙ୍କୁ ଶୀଘ୍ର ଏବଂ ସହଜରେ ରଙ୍ଗ ତାଲିକା ଏବଂ ସେମାନଙ୍କର ହେକ୍ସ ମୂଲ୍ୟ ଉପରେ ଲୁପ୍ କରିବାରେ ସାହାଯ୍ୟ କରେ |

• $colors500ଆମର ସମସ୍ତ ଉପଲବ୍ଧ ଆଧାର ( ) ରଙ୍ଗ ତାଲିକାଭୁକ୍ତ କରେ |
• $theme-colorsସମସ୍ତ ଅର୍ଥଗତ ଭାବରେ ନାମିତ ଥିମ୍ ରଙ୍ଗଗୁଡିକ ତାଲିକାଭୁକ୍ତ କରେ (ନିମ୍ନରେ ଦର୍ଶାଯାଇଛି)
• $graysଧୂସର ରଙ୍ଗର ସମସ୍ତ ରଙ୍ଗ ଏବଂ ଛାୟା ତାଲିକାଭୁକ୍ତ କରେ |

ଭିତରେ scss/_variables.scss, ଆପଣ ବୁଟଷ୍ଟ୍ରାପ୍ ର ରଙ୍ଗ ଭେରିଏବଲ୍ ଏବଂ ସାସ୍ ମାନଚିତ୍ର ପାଇବେ | $colorsସାସ୍ ମାନଚିତ୍ରର ଏକ ଉଦାହରଣ ଏଠାରେ ଅଛି :

$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
);

ମାନଚିତ୍ରରେ ମୂଲ୍ୟଗୁଡିକ ଯୋଡନ୍ତୁ, ଅପସାରଣ କରନ୍ତୁ କିମ୍ବା ପରିବର୍ତ୍ତନ କରନ୍ତୁ, ସେମାନେ ଅନ୍ୟାନ୍ୟ ଉପାଦାନରେ କିପରି ବ୍ୟବହାର କରନ୍ତି ତାହା ଅଦ୍ୟତନ କରିବାକୁ | ଦୁର୍ଭାଗ୍ୟବଶତ this ଏହି ସମୟରେ, ପ୍ରତ୍ୟେକ ଉପାଦାନ ଏହି ସାସ୍ ମାନଚିତ୍ର ବ୍ୟବହାର କରେ ନାହିଁ | ଭବିଷ୍ୟତର ଅଦ୍ୟତନଗୁଡ଼ିକ ଏଥିରେ ଉନ୍ନତି କରିବାକୁ ଚେଷ୍ଟା କରିବ | ସେପର୍ଯ୍ୟନ୍ତ, ${color}ଭେରିଏବଲ୍ ଏବଂ ଏହି ସାସ୍ ମାନଚିତ୍ର ବ୍ୟବହାର କରିବାକୁ ଯୋଜନା କରନ୍ତୁ |

ଉଦାହରଣ |

ତୁମ ସାସରେ ତୁମେ ଏହାକୁ କିପରି ବ୍ୟବହାର କରିପାରିବ ତାହା ଏଠାରେ ଅଛି:

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

ରଙ୍ଗ ମୂଲ୍ୟ ସେଟିଂ ଏବଂ ବ୍ୟବହାର ପାଇଁ ରଙ୍ଗ ଏବଂ ପୃଷ୍ଠଭୂମି ଉପଯୋଗୀତା ଶ୍ରେଣୀଗୁଡ଼ିକ ମଧ୍ୟ ଉପଲବ୍ଧ |colorbackground-color500