Live Docs

Navigation

Get Started /

stable

Theming & Tokens

Naraya itu token-first: semua warna, spacing, radius, dan shadow disetir oleh CSS variables. Ubah satu token, ratusan komponen ikut berubah.

Overview

Setiap komponen membaca var(--token), bukan nilai hardcoded. Jadi kustomisasi theme = override CSS variable, tanpa nyentuh kode komponen. Mode gelap bekerja lewat class .dark di elemen <html> yang menimpa token di :root.

Anatomi token

Token didefinisikan sebagai channel RGB supaya bisa dipakai dengan opacity Tailwind.

:root {
  --color-primary: 37 99 235;        /* biru Naraya */
  --bg-app: 255 255 255;
  --text-main: 15 23 42;
  --radius-md: 0.625rem;
}

.dark {
  --bg-app: 2 6 23;
  --text-main: 226 232 240;
  /* token yang tidak di-override ikut nilai :root */
}

Override warna brand

Tempel di CSS global kamu, setelah import token Naraya.

@import "@naraya/tokens/css";

:root {
  /* ganti primary jadi warna brand kamu (format: R G B) */
  --color-primary: 124 58 237;
}

.dark {
  --color-primary: 167 139 250;
}

Dark mode

ThemeProvider (lewat AppShell) yang ngatur class .dark + persist pilihan user.

Pasang ThemeMenu atau ThemeToggle di mana pun untuk ganti mode light / dark / system. Pilihan disimpan di localStorage, dan script anti-FOUC mencegah kedipan saat reload.

import { ThemeMenu } from "@naraya/ui";

<ThemeMenu />

Pakai token dengan opacity

Karena token = channel RGB, util alpha Tailwind langsung jalan.

// di komponen kamu
<div className="bg-primary/10 text-primary border border-primary/40" />

// atau di CSS plain
.kartu { background: rgb(var(--color-primary) / 0.1); }

Token utama

--color-primary

Warna brand utama (channel RGB)

--color-{tone}

accent / info / success / warning / error

--bg-app / --bg-surface / --bg-muted

Latar halaman, kartu, section

--text-main / --text-muted

Teks utama & sekunder

--border-subtle

Garis pembatas halus

--radius-{sm,md,lg,pill}

Sudut membulat

--shadow-{sm,md,lg,xl,glow}

Elevasi & glow

Langkah Selanjutnya