Warna adalah salah satu elemen paling fundamental dalam desain antarmuka. Pemilihan warna yang tepat dapat membangun identitas merek, meningkatkan keterbacaan, dan memberikan pengalaman pengguna yang menyenangkan. Ionic memiliki sistem warna yang kuat dan fleksibel yang memungkinkan Anda untuk mendefinisikan dan menerapkan skema warna dengan sangat mudah.

Dalam tutorial ini, kita akan mempelajari cara kerja sistem warna di Ionic, bagaimana cara mengkustomisasi warna bawaan, dan cara menambahkan warna tema Anda sendiri. Mari warnai aplikasi kita! 🎨

Pusat Kendali Warna: variables.scss

Saat Anda membuat proyek Ionic baru, di dalam folder src/theme/, Anda akan menemukan sebuah file yang sangat penting bernama variables.scss. File ini adalah pusat kendali untuk semua warna di aplikasi Anda.

Jika Anda membukanya, Anda akan melihat serangkaian variabel CSS (CSS Custom Properties) yang sudah didefinisikan di dalam :root.

/* src/theme/variables.scss */
:root {
  --ion-color-primary: #3880ff;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8dff;

  --ion-color-secondary: #3dc2ff;
  /* ... dan seterusnya untuk secondary, tertiary, success, warning, danger, dll. ... */
}

Konsep Kunci:

• --ion-color-primary: Ini adalah warna dasar untuk kategori “primary”.
• --ion-color-primary-rgb: Versi RGB dari warna dasar, digunakan untuk properti seperti opacity.
• --ion-color-primary-contrast: Warna teks yang akan digunakan di atas warna dasar agar kontras dan mudah dibaca (biasanya hitam atau putih).
• --ion-color-primary-shade: Versi warna yang sedikit lebih gelap, digunakan untuk efek seperti hover atau saat ditekan.
• --ion-color-primary-tint: Versi warna yang sedikit lebih terang.

Ionic secara otomatis menghasilkan semua variasi ini untuk Anda. Anda hanya perlu mendefinisikan warna dasarnya saja.

Menerapkan Warna pada Komponen

Cara paling mudah untuk menggunakan warna tema ini adalah dengan menambahkan atribut color pada hampir semua komponen Ionic.

Misalnya, jika Anda ingin membuat tombol dengan warna primary atau danger, Anda cukup melakukannya seperti ini:

<ion-button color="primary">Tombol Utama</ion-button>
<ion-button color="secondary">Tombol Kedua</ion-button>
<ion-button color="danger">Hapus</ion-button>

<ion-toolbar color="primary">
  <ion-title>Header Utama</ion-title>
</ion-toolbar>

<ion-item color="light">
  <ion-label>Item dengan latar terang</ion-label>
</ion-item>

Ketika Anda menetapkan color="primary", Ionic akan secara otomatis menerapkan variabel --ion-color-primary sebagai latar belakang dan --ion-color-primary-contrast sebagai warna teksnya. Sangat praktis!

Mengkustomisasi Warna Bawaan

Sekarang, bagian yang paling seru. Misalkan brand Anda memiliki warna utama ungu, bukan biru. Anda tidak perlu mencari dan mengganti warna di setiap komponen. Cukup ubah nilainya di variables.scss.

1. Buka src/theme/variables.scss.
2. Cari blok --ion-color-primary.
3. Ganti nilai hex-nya dengan warna ungu pilihan Anda.

Sebelum:

--ion-color-primary: #3880ff;

Sesudah:

--ion-color-primary: #6a11cb;

Setelah Anda menyimpan file ini, semua komponen yang menggunakan color="primary" di seluruh aplikasi Anda akan otomatis berubah menjadi ungu. Ini adalah kekuatan dari sistem berbasis variabel.

Menambahkan Warna Tema Baru

Anda tidak terbatas pada warna-warna bawaan. Misalkan Anda membutuhkan warna khusus untuk brand Anda yang bernama “brand-orange”.

1. Tambahkan Variabel di variables.scss Di dalam :root, tambahkan definisi warna baru Anda.
   CSS

   :root {
     /* ... warna-warna lainnya ... */
   
     --ion-color-brand-orange: #ff6a00;
     --ion-color-brand-orange-rgb: 255,106,0;
     --ion-color-brand-orange-contrast: #ffffff;
     --ion-color-brand-orange-contrast-rgb: 255,255,255;
     --ion-color-brand-orange-shade: #e05d00;
     --ion-color-brand-orange-tint: #ff791a;
   }
   

   Tips: Anda bisa menggunakan generator warna online untuk mendapatkan variasi shade dan tint dengan mudah.

2. Tambahkan Class CSS Agar Ionic mengenali brand-orange sebagai pilihan untuk atribut color, Anda perlu menambahkan sebuah class CSS di bagian bawah file variables.scss (di luar :root).
   CSS

   .ion-color-brand-orange {
     --ion-color-base: var(--ion-color-brand-orange);
     --ion-color-base-rgb: var(--ion-color-brand-orange-rgb);
     --ion-color-contrast: var(--ion-color-brand-orange-contrast);
     --ion-color-contrast-rgb: var(--ion-color-brand-orange-contrast-rgb);
     --ion-color-shade: var(--ion-color-brand-orange-shade);
     --ion-color-tint: var(--ion-color-brand-orange-tint);
   }
   

3. Gunakan di Komponen Anda Sekarang Anda bisa menggunakan color="brand-orange" sama seperti warna-warna lainnya.
   HTML

   <ion-button color="brand-orange">Tombol Brand</ion-button>
   

Kesimpulan

Sistem warna di Ionic sangatlah modular dan efisien. Dengan memusatkan semua definisi warna di dalam variables.scss, Anda dapat dengan mudah mengubah seluruh tampilan dan nuansa aplikasi Anda hanya dengan mengedit beberapa baris kode.

Poin Kunci untuk Diingat:

• ✅ variables.scss adalah pusat kendali untuk semua warna.
• ✅ Gunakan atribut color pada komponen Ionic untuk menerapkan warna tema.
• ✅ Untuk mengubah skema warna, cukup modifikasi variabel CSS yang sudah ada.
• ✅ Anda bisa menambahkan warna kustom dengan mendefinisikan variabel baru dan class .ion-color-{nama-warna-baru}.

Di tutorial selanjutnya, kita akan membahas cara menambahkan dan menggunakan ikon di dalam aplikasi Ionic. Selamat berkreasi dengan warna!