Beranda / Super Admin / Personalisasi Tampilan

Personalisasi Tampilan: Atur Tema, Warna & Layout Default Dasbor

Tentukan pengalaman visual pertama yang didapatkan setiap akun EO baru — dari palet warna hingga posisi sidebar bawaan.

Personalisasi Tampilan adalah pengaturan yang menentukan preferensi visual bawaan yang akan diwarisi oleh setiap akun Event Organizer (EO) dan Staff Lapangan baru. Berbeda dengan pengaturan Whitelabel yang berfokus pada unggahan aset fisik, modul ini sepenuhnya mengatur skema warna, tema terang/gelap, dan perilaku layout navigasi tanpa perlu mengunggah satu berkas pun.

Cakupan Modul Ini

Panduan ini khusus membahas preferensi visual yang diwarisi akun baru: preset palet warna, tema Dark/Light Mode, kode HEX custom, dan layout sidebar. Untuk penggantian logo, favicon, nama aplikasi, dan gambar latar, silakan baca panduan Whitelabel & Identitas Brand →

Fitur Unggulan Modul Personalisasi

  • Preset Palet Warna (Dark & Light): Pilih dari 12 palet warna siap pakai (6 Dark Mode + 6 Light Mode) yang dirancang secara estetis dan harmonis.
  • Custom Warna HEX: Masukkan kode warna tepat dari panduan brand agensi Anda untuk Warna Aksen, Warna Sidebar, dan Warna Background secara manual.
  • Dark/Light Mode Default: Paksa seluruh dasbor akun baru menggunakan tema gelap atau terang secara bawaan — atau ikuti preferensi OS pengguna.
  • Default Sidebar State: Tentukan apakah sidebar kiri tampil melebar (Expanded) atau melipat (Collapsed) saat pertama kali dasbor dibuka.
  • Preview Simulator: Panel simulasi interaktif yang menampilkan pratinjau perpaduan warna secara instan sebelum disimpan.
  • Allow User Theme Switcher: Kontrol apakah akun EO diizinkan mengganti tema visual mereka sendiri, atau dikunci mengikuti pengaturan global Super Admin.

Skenario Pengalaman Onboarding EO Baru

Ketika seorang vendor Event Organizer mendaftar dan masuk ke dasbornya untuk pertama kali, mereka langsung disambut antarmuka dengan tema Dark Mode — Sage & Mustard, warna aksen emas #D4A017, dan sidebar yang melipat otomatis. Pengaturan rapi ini langsung diwariskan dari konfigurasi personalisasi global yang Anda tetapkan — tanpa perlu EO tersebut melakukan pengaturan apapun secara mandiri.

1. Mengatur Skema Warna Default

Menentukan palet warna dominan yang akan menjadi identitas visual bawaan seluruh dasbor akun baru:

Pengaturan Skema Warna dan Tema Whitelabel BukuTamu Pro

Visual: Panel pemilihan preset tema Dark/Light Mode, color picker Warna Aksen, Warna Sidebar, Warna Background, dan simulator Preview.

Preset Palet yang Tersedia:

  • Dark Mode Presets (6 palet): Sage & Mustard, Rose Gold, Ocean Blue, Emerald Night, Royal Purple, Sunset Orange.
  • Light Mode Presets (6 palet): Classic White, Sage Light, Warm Cream, Blush Pink, Sky Minimal, Lavender Soft.

Langkah Konfigurasi Warna:

  1. Masuk ke dasbor Super Admin.
  2. Akses menu Settings di bilah navigasi samping kiri.
  3. Buka tab Warna & Tema.
  4. Pilih salah satu palet preset yang tersedia, atau isi manual kode HEX pada kolom berikut:
    • Warna Aksen: Warna tombol utama, penanda aktif, dan sorotan (contoh: #DB2777).
    • Warna Sidebar: Warna latar belakang panel navigasi kiri (contoh: #1e293b).
    • Warna Background: Warna latar belakang area konten utama kanan (contoh: #f8fafc).
  5. Amati perubahan secara instan di Preview Simulator di bawah form.
  6. Klik Simpan Palet Warna untuk menerapkan.

Tips: Konsistensi Visual Brand

Ambil warna primer dari logo perusahaan Anda untuk dijadikan Warna Aksen, lalu gunakan versi gelap/senada untuk Warna Sidebar. Kombinasi ini memberikan kesan bahwa software dibangun khusus dan eksklusif oleh perusahaan Anda.

2. Memilih Mode Tema Bawaan (Dark / Light)

Mengonfigurasi gaya tampilan antarmuka global yang akan diterima oleh setiap akun EO baru:

Langkah Konfigurasi:

  1. Pada tab Warna & Tema, temukan bagian Default Theme Mode.
  2. Pilih salah satu opsi:
    • Light Mode: Tampilan dasbor latar putih bersih dan minimalis — cocok untuk lingkungan kantor terang.
    • Dark Mode: Tampilan dasbor gelap elegan yang mereduksi ketegangan mata — ideal untuk penggunaan malam hari atau layar besar.
    • System Default: Mengikuti pengaturan mode gelap/terang bawaan sistem operasi perangkat pengguna.
  3. Tentukan apakah Anda mengizinkan EO mengganti tema secara mandiri melalui toggle Allow User Theme Switcher:
    • Aktif: EO dapat mengubah tema dari preferensi profil dasbor mereka.
    • Nonaktif: Tema dikunci sesuai pengaturan Super Admin — tombol peralihan tema tidak muncul di dasbor EO.
  4. Klik Simpan Pengaturan Tema.

3. Mengatur Layout Sidebar Navigasi Bawaan

Menentukan kondisi awal bilah menu navigasi samping dasbor saat pertama kali dibuka oleh pengguna:

Langkah Konfigurasi:

  1. Buka tab Warna & Tema (pengaturan sidebar terdapat pada bagian bawah di tab yang sama).
  2. Atur Default Sidebar State sesuai kebutuhan:
    • Expanded (Default): Sidebar selalu terbuka menampilkan teks nama menu secara lengkap — direkomendasikan untuk pengguna komputer desktop.
    • Collapsed: Sidebar melipat secara bawaan dan hanya menampilkan ikon menu — ideal untuk pengguna tablet agar area tabel data tamu tidak terpotong.
  3. Klik Simpan Palet Warna untuk menyelesaikan.

Tips Responsibilitas Tablet

Untuk EO yang sering memantau data tamu dari tablet di lapangan, setelan Collapsed Sidebar secara bawaan sangat disarankan agar tampilan tabel tamu dapat termuat lebih optimal tanpa terpotong oleh panel navigasi.

Tanya Jawab (FAQ)

T: Apakah perubahan tema warna ini langsung mengubah tampilan dasbor EO yang sudah lama terdaftar?

J: Tidak. Pengaturan default personalisasi global hanya diwariskan secara otomatis ke akun EO dan Staff baru yang mendaftar setelah perubahan disimpan. Akun lama mempertahankan konfigurasi warna pribadi mereka kecuali mereka mereset warna secara mandiri dari profil dasbor masing-masing.

T: Bagaimana jika kode HEX warna yang saya masukkan tidak muncul di dasbor?

J: Pastikan kode HEX ditulis dengan format yang valid dan menyertakan simbol pagar di awal (Contoh: #6366f1, bukan 6366f1). Jika tetap tidak muncul, coba bersihkan cache browser dengan menekan Ctrl + F5 dan muat ulang halaman.

T: Apakah saya bisa mengunci tema agar EO tidak bisa beralih ke Light Mode?

J: Bisa. Nonaktifkan toggle Allow User Theme Switcher pada pengaturan tema di tab Warna & Tema. Tindakan ini akan menyembunyikan tombol peralihan tema dari seluruh dasbor EO secara permanen, sehingga mereka tidak dapat mengubah tampilan secara mandiri.

T: Apa perbedaan antara modul ini dan pengaturan Whitelabel?

J: Personalisasi Tampilan mengatur preferensi visual bawaan yang diwariskan ke akun baru: warna, tema, dan layout sidebar — tanpa mengunggah file. Sementara Whitelabel mengatur aset identitas statis yang berlaku global ke semua akun: logo, favicon, nama aplikasi, dan gambar latar. Keduanya saling melengkapi.

Pelajari Selanjutnya