Uygulamamıza Yeni Renkler Katalım

  Merhabalar
  Uygulamamızı geliştirirken daha öncesinde gördüğümüz gibi buton ya da arka plan rengi değiştirmek istediğimizde karşımıza 9 renk seçeneği geliyordu (Primary,Secondary,Tertiary,Success,Warning,Danger,Dark,Medium,Light). Bunlardan hariç bir renk seçmek istesek o zaman ne yapacağız?
  Bu hafta uygulamalarımızda kullanmak için istediğimiz rengi oluşturup bunu uygulamada nasıl kullandığımızı göreceğiz.

  Renk Özellikleri

 Her rengin aşağıda sıralanan özellikleri vardır:
⭐base        :baz alınan renk(ana rengimiz)
⭐contrast  : base rengin tersi (genelde beyaz renk olarak alınıyor.)
⭐shade      :base rengin bir ton koyusu
⭐tint          :base rengin bir açık tonu

  Rengimizi tanımlarken hex değerinden hariç bir de rgb değerini tanımlıyoruz.Bunun nedeni tüm browser'ların hex değerini tanıyamama sorunsalıdır.


  örnek olarak gösterecek olursak:

Base	#ebbcad
Base (rgb)	Rgb(235,188,173)
Contrast	#ffffff
Contrast (rgb)	255,255,255
Shade	#e6ac98
Tint	#f0cdc1

İstediğniz rengi seçmek ve bir koyu ve bir açık tonunu bulmak için bu siteden yardım alabilirsiniz: HTML Color Picker


Bu özellikleri kodumuza nasıl entegre edeceğimize bir bakalım:
  Css özelliği tanımlayacağız ve bunun tüm sayfalarımızda tanımlı olmasını istiyorsak Visual Studio code IDE 'mizdeki src dosyasının içinde bulunan global.scss dosyasının içerisine yazabiliriz.

.ion-color-newcolor{
    --ion-color-base: #ebbcad;
  --ion-color-base-rgb: rgb(235, 188, 173);
  --ion-color-contrast: #ffffff;
  --ion-color-contrast-rgb: 255,255,255;
  --ion-color-shade: #e6ac98;
  --ion-color-tint:  #f0cdc1;

}

Yukarıda  .ion-color-(istediğimiz herhangi bir isim)  diyerek rengi tanıtmaya başladık.Bu rengi buraya tanımladıktan sonra istediğimiz herhangi bir sayfada color: newcolor diyerek kullanabiliriz.


Önceden oluşturmuş olduğumuz cafe uygulamamızdaki butonda bu özelliği deneyelim.

.ion-color-newcolor{
    --ion-color-base: #006600;
  --ion-color-base-rgb: rgb(0, 102, 0);
  --ion-color-contrast: #ffffff;
  --ion-color-contrast-rgb: 255,255,255;
  --ion-color-shade: #004d00;
  --ion-color-tint:  #008000;

}

   src → global.scss

<ion-button shape="round" color="newcolor" fill="outline" (click)="presentToastWithOption()">Add</ion-button>

  src → app → yemekler → yemekler.page.html

  Butonumuzun rengini bu şekilde değiştirmiş olduk. Bu rengi arka plan olarak da değiştirebiliriz ya da  checkbox ta kullanabiliriz isteğimize kalmış :)  .

   Gelecek hafta görüşmek üzere
   Hayırlı Günler



Yararlandığım Kaynaklar:
https://www.w3schools.com/colors/colors_picker.asp
https://beta.ionicframework.com/docs/theming/advanced/