Setelah memahami navigasi pada admin panel, langkah berikutnya adalah membahas Filament Theme, yaitu fitur yang memungkinkan kamu mengatur tampilan dan style admin panel Filament. Filament hadir dengan desain clean dan modern secara default, namun tetap fleksibel untuk dikustomisasi sesuai brand aplikasi. Dengan memanfaatkan fitur theme ini, kamu dapat mengubah mulai dari warna, logo, hingga layout certain component tanpa mengubah core Filament.

Apa Itu Filament Theme?

Filament Theme mengacu pada keseluruhan tampilan antarmuka (UI) Filament Admin, mencakup:

• Warna dan palet (colors)
• Logo dan branding
• Typography
• Dark mode support
• Tailwind CSS utility
• Component styling
• Layout panel

Filament Theme memanfaatkan Tailwind CSS sebagai basis styling sehingga developer dapat mengubah tema dengan cepat dan fleksibel.

Branding Panel: Logo, Nama, dan Warna

Kamu bisa mengatur branding dasar panel seperti logo dan nama melalui Panel Provider.

Contoh mengatur brand name:

$panel->brandName('Admin Portal');

Contoh menambahkan logo:

$panel->brandLogo(asset('images/logo.svg'));

Branding ini akan muncul pada:

✔ Sidebar

✔ Header top

✔ Halaman login

Mengubah Warna Tema (Primary Color)

Filament memungkinkan perubahan warna utama dengan mudah.

Contoh:

$panel->colors([
    'primary' => '#2563eb',
]);

Warna ini memengaruhi elemen seperti:

• Tombol utama (primary button)
• Link aktif
• Selection warna
• Badge primary

Kamu dapat menambahkan warna lain jika perlu.

Filament dan Tailwind CSS

Karena Filament berbasis Tailwind, kamu dapat melakukan override pada konfigurasi melalui tailwind.config.js.

Contoh override:

export default {
  content: [
    './resources/**/*.blade.php',
    './vendor/filament/**/*.blade.php',
  ],
  theme: {
    extend: {
      colors: {
        brand: '#1E293B',
      }
    }
  }
}

Selanjutnya kamu dapat menggunakan warna brand di komponen Filament.

Aktivasi Dark Mode

Filament mendukung dark mode secara default.

Untuk mengaktifkannya:

$panel->darkMode(true);

User juga dapat mengubah tema dari UI jika toggle tersedia.

Dark Mode sangat berguna untuk:

✔ Mengurangi silau saat bekerja

✔ Meningkatkan ergonomi UI

✔ Estetika modern

Custom Login Page Theme

Login page bisa diubah logonya, brand name, hingga warna tombol.

Contoh menambahkan logo login:

$panel->login()
      ->brandLogo(asset('images/logo-login.svg'));

Kamu juga dapat override view login jika butuh element unik seperti:

• reCAPTCHA
• Social login (Google, GitHub)
• Custom text atau Terms & Policy

Custom CSS untuk Filament Theme

Jika styling default tidak cukup, kamu bisa menambahkan file CSS custom.

Tambahkan di resources/css/filament.css:

.filament-sidebar {
    background-color: #0f172a !important;
}

Lalu impor di provider panel:

$panel->viteTheme('resources/css/filament.css');

Custom Blade View

Untuk custom UI yang lebih dalam, Filament menyediakan view override.

Contoh override view login:

Buat folder:

resources/views/vendor/filament/pages/login.blade.php

Kemudian kamu bebas edit UI login sesuai kebutuhan branding.

Font dan Typography

Jika kamu ingin menerapkan font custom seperti Inter, Roboto, atau Poppins, kamu dapat menambahkan melalui Vite:

Pada resources/css/filament.css:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

Typography baru akan diterapkan ke seluruh panel.

Menambahkan Komponen UI Tambahan

Dengan Tailwind, komponen UI baru dapat ditambahkan seperti:

✔ Footer panel

✔ Header custom

✔ Notification bar

✔ Sidebar custom item

Contoh menambahkan footer custom:

Buat component:

resources/views/components/admin-footer.blade.php

Isi:

<div class="text-center text-xs text-gray-500 py-4">
    © {{ date('Y') }} My Company. All rights reserved.
</div>

Lalu panggil di layout panel provider.

Filament Theme dengan Plugin

Ada banyak plugin yang membantu kustomisasi tema, misalnya:

• Filament Breezy (auth UI enhancer)
• Filament Shield (permissions)
• Filament Themes (community theme pack)

Plugin ini mempermudah styling tanpa menulis kustom CSS yang berat.

Best Practice untuk Styling Filament Theme

Untuk hasil terbaik, ikuti praktik berikut:

✔ Gunakan warna brand yang konsisten

✔ Gunakan Google Fonts atau Inter untuk modern look

✔ Aktifkan dark mode untuk kenyamanan UI

✔ Uji tampilan pada perangkat tablet & mobile

✔ Hindari override CSS berlebihan

✔ Gunakan Tailwind agar maintainable

Dengan cara ini UI panel kamu akan tampil profesional dan tetap mudah dirawat.

Kesimpulan

Filament Theme memungkinkan developer untuk mengatur tampilan admin panel secara fleksibel, mulai dari branding, warna, typography, dark mode, hingga override tailwind dan blade views. Berkat integrasi dengan Tailwind CSS, proses kustomisasi menjadi cepat tanpa mengorbankan struktur dan maintainability.

Baca Juga: Filament User Management di Laravel: Mengelola User, Role, dan Permission