Konfigurasi Color Theme dan Icon di Laravel 12 Livewire dengan Flux UI

Untuk melakukan kustomisasi warna tema dan menambahkan ikon baru pada aplikasi Laravel + Livewire menggunakan Flux UI Starter Kit, teman-teman bisa mengikuti langkah-langkah berikut.

1. Mengubah Warna Tema (Accent Color)

Buka file:

resources/css/app.css

Lalu ubah bagian variabel CSS berikut sesuai warna yang teman-teman inginkan:

:root {
    --color-accent: var(--color-orange-500);
    --color-accent-content: var(--color-orange-600);
    --color-accent-foreground: var(--color-white);
}

.dark {
    --color-accent: var(--color-orange-400);
    --color-accent-content: var(--color-orange-400);
    --color-accent-foreground: var(--color-orange-950);
}

Teman-teman bisa mengganti orange-500 dengan warna lain seperti blue-600, emerald-500, dll. Warna-warna ini mengikuti skala Tailwind CSS.

2. Referensi Warna & Theme

Untuk melihat daftar lengkap warna dan cara kustomisasi tema lainnya, kunjungi dokumentasi resmi Flux UI di:

https://fluxui.dev/themes

3. Konfigurasi Icon Custom di Flux UI (Laravel 12 Livewire)

Agar ikon dapat ditampilkan secara kustom di dalam proyek Laravel + Flux UI, teman-teman bisa menambahkan file ikon SVG sesuai kebutuhan menggunakan komponen Blade.

Buat file baru dengan nama:

resources/flux/icon/notebook-text.blade.php

Isi file tersebut dengan kode Blade berikut:

{{-- Credit: Lucide (https://lucide.dev) --}}

@props([
    'variant' => 'outline',
])

@php
if ($variant === 'solid') {
    throw new \Exception('The "solid" variant is not supported in Lucide.');
}

$classes = Flux::classes('shrink-0')->add(
    match ($variant) {
        'outline' => '[:where(&)]:size-6',
        'solid' => '[:where(&)]:size-6',
        'mini' => '[:where(&)]:size-5',
        'micro' => '[:where(&)]:size-4',
    },
);

$strokeWidth = match ($variant) {
    'outline' => 2,
    'mini' => 2.25,
    'micro' => 2.5,
};
@endphp

<svg
    {{ $attributes->class($classes) }}
    data-flux-icon
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="{{ $strokeWidth }}"
    stroke-linecap="round"
    stroke-linejoin="round"
    aria-hidden="true"
    data-slot="icon">
    <path d="M2 6h4" />
    <path d="M2 10h4" />
    <path d="M2 14h4" />
    <path d="M2 18h4" />
    <rect width="16" height="20" x="4" y="2" rx="2" />
    <path d="M9.5 8h5" />
    <path d="M9.5 12H16" />
    <path d="M9.5 16H14" />
</svg>

Penjelasan

Bagian penting dari SVG tersebut adalah potongan <path> dan <rect> yang merepresentasikan bentuk icon notebook. Berikut adalah SVG path-nya:

<path d="M2 6h4" />
<path d="M2 10h4" />
<path d="M2 14h4" />
<path d="M2 18h4" />
<rect width="16" height="20" x="4" y="2" rx="2" />
<path d="M9.5 8h5" />
<path d="M9.5 12H16" />
<path d="M9.5 16H14" />

Sumber Ikon

teman-teman bisa mencari dan mengambil ikon SVG lainnya dari website Lucide berikut ini:

https://lucide.dev/icons/

Cukup pilih ikon yang teman-teman suka, lalu klik ikon tersebut dan salin potongan SVG-nya.

Lanjut ke Materi Berikutnya

Pada materi selanjutnya, kita akan melakukan:

• Konfigurasi menu pada sidebar
• Menambahkan icon custom (notebook-text) ke dalam menu catatan.