Setiap aplikasi memiliki tampilan dengan ciri khasnya masing-masing. Baik dari warna, typografi, layout dan lain sebagainya. Bagitupun aplikasi yang kita bangun, kita menginginkan tampilan sesuai dengan konsep aplikasi yang kita buat. Pada postingan sebelumnya Memulai Menggunakan OnsenUI kita sudah belajar bagaimana menerapkan sebuah framework untuk mempercantik tampilan aplikasi. Pada tutorial kali ini akan disampaikan cara mengubah tema Onsen UI untuk aplikasi yang kita buat.
Ada 2 Cara untuk Mengganti Tema
Untuk mengganti tema (warna dasar) dari aplikasi kita dapat melakukannya dengan 2 cara, yaitu:
- Menggunakan pengaturan langsung di aplikasi kita, info lanjut silakan kesini
- Menggunakan Theme Roller sebelum menerapkan ke aplikasi kita, untuk menggunakan bisa kesini.
Cara yang pertama bisa dibilang agak sedikit ribet bahkan susah untuk pemula, karena kita perlu menggunakan node.js dan yarn. Cara yang pertama ini nantinya langsung mengubah kode di aplikasi yang kita buat. Kemudian cara yang kedua bisa dibilang mudah, karena kita tidak perlu menulis kode secara langsung. Walaupun bisa dibilang lebih mudah, cara yang kedua ini ada hal yang harus diperhatikan. Hal tersebut adalah kita harus sudah matang mengkonsep tema aplikasi yang kita buat, dengan kata lain kita sudah “fix” dalam mendesain tema aplikasi. Hal ini dikarenakan nantinya kita hanya menggunakan tema yang di awal sudah di-setup. Cara yang kedua ini kita memanfaatkan fitur yang disediakan Onsen UI melalui Theme Roller. Pada turorial kali ini kita akan menggunakan cara yang kedua.
Menggunakan Theme Roller Onsen UI
Theme Roller merupakan sebuah fitur yang disediakan oleh Onsen UI untuk melakukan customizing tema aplikasi. Untuk menggunakan fitur ini kita harus online untuk mengaksesnya. Silakan langsung saja ke website untuk memulai menggunakan Theme Roller. Tampilannya kurang lebih seperti gambar di bawah ini.
Setelah membuka website dari Theme Roller Onsen UI kita perhatikan pengaturan yang ada disebelah kiri. Terdapat beberapa menu yaitu:
- Onsen UI Version, digunakan untuk menentukan versi Onsen UI yang nantinya akan digunakan
- Theme Preset, Pilihan tema yang akan ditentukan. Perhatikan terdapat combobox Customize, pastikan tercentang untuk dapat mengedit tema dari Onsen UI yang nantinya akan diterapkan pada aplikasi kita
- Platforms, pilihan platform/OS dimana aplikasi nantinya akan diterapkan
- Categories, berisi komponen-komponen Onsen UI yang akan diedit temanya
Selain bagian yang sebelah kiri terdapat juga bagian tengah dimana berisi tampilan komponen yang terseleksi (secara default komponen yang terseleksi yang pertama yaitu Action Sheet).
Yang terakhir adalah bagian kanan, ini merupakan bagian TERPENTING dalam mengedit tema. Kita dapat mengedit melalui kode dengan mengklik “Bulk Edit” atau dapat dengan cara pilih variabel untuk mengganti warna. Disini yang perlu diperhatikan adalah bagian General Variabel dan Component Variabel. General Variabel merupakan pengaturan utama diluar komponen-komponen yang ada, misalnya backgroud halaman. kemudian untuk Component Variabel merupakan pengaturan per komponen yang digunakan misal, komponen Button, Card dan lain sebagainya.
Contoh Mengubah Tema
Bagian ini akan dicontohkan mengubah tema dari beberapa komponen yaitu, Button dan Toolbar.
Button
Silakan pilih Categories – Button pada menu sebelah kiri, bagian tampilan akan diarahkan ke komponen Button. Misalkan kita akan merubah warna Button yang tadinya biru menjadi merah. Fokus pada bagian kanan dan di bagian Component Variabel, terdapat 4 properties yang dapat kita edit. Misal kita ubah warna dasar dari Button, dengan cara klik “MD Button Background” kemudian akan muncul pilihan warna. Silakan pilih warna merah, kemudian di bagian tengah secara otomatis akan mengubah warna Button sesuai dengan pilihan kita. Kurang lebihnya seperti pada gambar di bawah ini.
Toolbar
Bagian selanjutnya kita akan coba mengubah tema Toolbar. Arahkan ke Categories pilih Toolbar. Kemudian lakukan hal yang sama seperti pada Button, pilih warna sesuai dengan yang telah ditentukan. Sebagai contoh kita gunakan warna merah yang sama untuk mengubah Toolbar Buttonnya. Kurang lebih seperti gambar di bawah ini.
Untuk bagian ataupun komponen lain silakan anda bisa mencobanya sendiri. Setelah dirasa tema sudah sesuai dengan kebutuhan tahap terakhir adalah silakan download tema yang telah kita buat dengan klik tombol download yang ada disebelah pojok kanan bawah. Setelah di download, setting projek anda dan aplikasi siap menerapkan tema yang telah dibuat. Anda dapat melakukannya seperti pada postingan sebelumnya.
Semoga Bermanfaat.
