Toko temaPanduan penulisan

🎨 Panduan penulisan tema

Pelajari skema JSON tema ForcedSkin dan aturan field palet — rancang palet untuk situs apa pun dan kirim ke komunitas.

Mulai cepat

Pilih mode

Tentukan apakah tema berjalan dalam light (palet terang) atau dark (palet gelap).

Isi warna

Ikuti spesifikasi field di bawah — setidaknya semua kunci wajib harus ada di JSON Anda.

Kirim untuk ditinjau

Di halaman Tema klik “Kirim tema”. Admin menyetujui sebelum tampil untuk semua orang.

Field warna

Semua entri palet harus berupa string hex (#RRGGBB) atau nilai CSS rgba(...).

backgroundWajib

Latar halaman utama — tema terang dekat putih, tema gelap dekat netral dalam. Variabel CSS: --color-background

Contoh: #F8FFF8 / #101410

foregroundWajib

Teks utama — kontras yang mudah dibaca terhadap latar. Variabel CSS: --color-foreground

Contoh: #2C3E2C / #E0E0E0

surfaceWajib

Isian kartu/panel/kontainer — sedikit terangkat dari latar. Variabel CSS: --color-surface

Contoh: #F0FFF0 / #1E221E

surfaceMutedOpsional

Hover redup / sub-kontainer selangkah dari surface. Variabel CSS: --color-surface-muted

Contoh: #F5FDF5 / #161816

borderWajib

Garis tipis & pemisah — biasanya abu saturasi rendah / nada semi-transparan. Variabel CSS: --color-border

Contoh: #D8E8D8 / #333633

mutedWajib

Teks sekunder & placeholder. Variabel CSS: --color-muted

Contoh: #6C7E6C / #A0A0A0

primaryWajib

Tangga merek utama untuk tombol/tautan/fokus — bisa satu warna atau tangga (50–950). Minimal nuansa 500/600/700. Dipetakan ke variabel CSS --color-primary- plus token nuansa (50–950)

Contoh: { "500": "#4CAF50", "600": "#43A047", "700": "#388E3C" }

secondaryOpsional

Tangga aksen sekunder untuk chip/tombol ghost — strukturnya sama dengan primary — dipetakan ke --color-secondary- plus token nuansa

Contoh: { "500": "#AAA", ... }

accentOpsional

Sorotan, lencana, warna spotlight — strukturnya sama dengan primary — dipetakan ke --color-accent- plus token nuansa

Contoh: { "500": "#FFEB3B", ... }

varsOpsional

Properti kustom CSS bebas — kunci tanpa “--”; nilai diterapkan apa adanya pada :root

Contoh: { "custom-radius": "8px" }

Tangga warna

Kunci JSON primary, secondary, dan accent masing-masing menerima salah satu gaya penulisan di bawah:

Ringkas (tiga nuansa inti)

{
  "primary": {
    "500": "#4CAF50",
    "600": "#43A047",
    "700": "#388E3C"
  }
}

Mesin menjadikan nuansa 500 sebagai hue default; 600/700 untuk hover/aktif.

Tangga penuh (50 → 950, sebelas titik)

{
  "primary": {
    "50":  "#E8F5E9",
    "100": "#C8E6C9",
    ...
    "500": "#4CAF50",
    ...
    "950": "#0F3D12"
  }
}

Memublikasikan tangga lengkap menghasilkan transisi tonal yang lebih halus di mana-mana.

Tips: ID nuansa mengikuti tangga gaya Tailwind: 50 paling terang, 950 paling gelap. Tema terang terutama memakai 500/600/700; tema gelap sering mengandalkan 400/500/600.

Contoh lengkap

🌿 Contoh terang (light-mint)

{
  "background": "#F8FFF8",
  "foreground": "#2C3E2C",
  "surface": "#F0FFF0",
  "surfaceMuted": "#F5FDF5",
  "border": "#D8E8D8",
  "muted": "#6C7E6C",
  "primary": {
    "50": "#E8F5E9",
    "100": "#C8E6C9",
    "200": "#A5D6A7",
    "300": "#81C784",
    "400": "#66BB6A",
    "500": "#4CAF50",
    "600": "#43A047",
    "700": "#388E3C",
    "800": "#2E7D32",
    "900": "#1B5E20",
    "950": "#0F3D12"
  },
  "secondary": {
    "500": "#AAAAAA",
    "600": "#999999",
    "700": "#777777"
  },
  "accent": {
    "500": "#FFEB3B",
    "600": "#FDD835",
    "700": "#FBC02D"
  }
}

🌑 Contoh gelap (dark-forest)

{
  "background": "#101410",
  "foreground": "#E0E0E0",
  "surface": "#1E221E",
  "surfaceMuted": "#161816",
  "border": "#333633",
  "muted": "#A0A0A0",
  "primary": {
    "500": "#4A9B6B",
    "600": "#3F855C",
    "700": "#346F4D"
  }
}

Variabel kustom (vars)

Jika token default kurang, tambahkan variabel CSS extra di bawah node vars — hilangkan awalan -- pada setiap kunci.

{
  "background": "#101010",
  "foreground": "#E0E0E0",
  ...
  "vars": {
    "radius-card": "16px",
    "shadow-card": "0 2px 12px rgba(0,0,0,0.4)"
  }
}

Aturan slug (name)

Hanya huruf ASCII kecil, angka, dan tanda hubung ( a-z 0-9 - ).
Utamakan pasangan ringkas “mode-gaya” seperti “dark-ocean” atau “light-sakura”.
Slug harus unik secara global — tidak dapat diubah setelah dipublikasikan, jadi periksa ulang sebelumnya.
Panjang maksimum 50 karakter.

Pengiriman & tinjauan

🔐 Masuk sebelum mengirim.

⏳ Kiriman masuk antrean tinjauan — tim biasanya merespons dalam 1–3 hari kerja.

✅ Tema yang disetujui muncul di toko agar semua orang bisa memfavoritkannya.

❌ Warna tidak valid, nama bentrok, atau pelanggaran kebijakan akan ditolak — hapus dan kirim versi yang diperbaiki.

🚫 Tidak ada kode berbahaya, konten kebencian, atau palet yang jelas melanggar hak.

Siap? Buka toko tema dan publikasikan palet Anda.

🎨 Kirim tema