08. Live Theme Builder

Ringkasan

Live Theme Builder memungkinkan administrator mengubah skema warna utama, tipografi Google Fonts, border radius tombol/kartu, hingga kerapatan layout (density) secara visual via dashboard tanpa perlu mengubah kode CSS atau melakukan rebuild aplikasi.

Cara Kerja

Nilai konfigurasi tema disimpan di tabel AppSettings database MySQL. Saat halaman dimuat di sisi server, variabel tema disuntikkan secara otomatis langsung ke dalam atribut style dokumen HTML root (:root).

mermaid

sequenceDiagram
    autonumber
    actor Admin
    participant GUI as Theme Builder GUI (/settings/theme)
    participant tRPC as themeRouter
    participant DB as MySQL (AppSettings)
    participant Layout as Root Layout (layout.tsx)
    
    Admin->>GUI: Pilih Preset Warna (Emerald/Sapphire) & Radius
    GUI->>tRPC: theme.updateTheme({ primaryColor, radius, font })
    tRPC->>DB: Perbarui data di AppSettings
    tRPC-->>GUI: Respons sukses
    Layout->>DB: findFirst() saat refresh halaman
    Layout->>Layout: Suntikkan variabel CSS ke <html style="...">

Parameter Tema

Parameter	Pilihan	Deskripsi
Warna Utama	Default, Emerald, Sapphire, Rose, Violet, Amber	Warna aksen utama aplikasi
Tipografi Font	Inter, Roboto, Outfit, Plus Jakarta Sans	Jenis font Google Fonts
Border Radius	`0rem`, `0.3rem`, `0.5rem`, `0.75rem`, `1.0rem`	Tingkat kebulatan sudut tombol/kartu
Density Layout	Comfortable, Compact	Tingkat kerapatan jarak & padding UI
Mode Tampilan	Terang, Gelap, Sistem	Mode preferensi warna aplikasi

Berkas Terkait

src/server/api/routers/theme.ts — Router tRPC untuk query & mutasi tema

src/context/theme-context.tsx — Context React penyuplai variabel tema ke client

src/app/(admin)/settings/theme/page.tsx — Halaman GUI Live Theme Builder