سفارشی‌سازی و تم

تم‌ساز

تغییرات روی کل همین صفحه اعمال می‌شوند. کد تولیدشده را کپی کنید و در CSS پروژه بگذارید.

:root {}

چهار لایهٔ سفارشی‌سازی

۱. رنگ برند

همهٔ کامپوننت‌ها رنگ برند را از طیف --k-brand-50 تا --k-brand-950 می‌خوانند. تابع createTheme() این طیف را از یک رنگ می‌سازد:

import { createTheme } from "@kashi-ui/tokens";

const css = createTheme({ brand: "#7c3aed" });
// css را در یک تگ <style> یا فایل CSS قرار دهید

اگر طیف دقیق برندتان را دارید، آن را مستقیم بدهید:

createTheme({ brand: { 50: "#f5f3ff", 100: "#ede9fe", /* … */ 950: "#2e1065" } });

۲. پیچ‌های سراسری

۳. متغیرهای هر کامپوننت

هر کامپوننت متغیرهای عمومی با الگوی --k-{کامپوننت}-{ویژگی} دارد. فهرست کامل در صفحهٔ هر کامپوننت آمده است.

:root {
  --k-btn-radius: 999px;      /* دکمه‌های کاملاً گرد */
  --k-input-height-md: 3rem;  /* فیلدهای بلندتر */
}

/* فقط در یک بخش خاص */
.checkout {
  --k-card-padding: 2rem;
}

۴. کلاس برای هر بخش داخلی

کامپوننت‌های چندبخشی classNames می‌پذیرند تا بدون دستکاری CSS کاشی، هر بخش را جدا استایل دهید (مثلاً با Tailwind):

<Input
  label="ایمیل"
  classNames={{ label: "text-lg", box: "rounded-full", control: "font-mono" }}
/>
<DataTable classNames={{ row: "h-14", header: "uppercase" }} … />

همچنین ریشهٔ کامپوننت‌ها ویژگی‌های data-variant، data-size، data-tone، data-state و data-placement دارند:

.k-btn[data-variant="primary"][data-size="lg"] { letter-spacing: 0; }
.k-input[data-state="invalid"] { background: var(--k-bg-error-subtle); }

۵. بازنویسی مستقیم

همهٔ استایل‌های کاشی در Cascade Layer با نام kashi قرار دارند. هر CSS معمولی شما، با هر میزان اختصاصی بودن، روی آن‌ها اولویت دارد:

/* بدون !important کار می‌کند */
.k-btn { letter-spacing: 0; }

دام رایج: استایل‌های سراسری عناصر. چون CSS شما همیشه بر کاشی اولویت دارد، قاعده‌ای مثل a { color: blue } رنگ دکمه‌ای را هم که با <a class="k-btn"> ساخته شده عوض می‌کند. دو راه حل:

/* ۱. دکمه‌ها را مستثنا کنید و اختصاصی بودن را صفر نگه دارید */
:where(a:not(.k-btn)) { color: blue; }

/* ۲. یا ریست‌ها و استایل‌های پایهٔ خودتان را در لایه‌ای پیش از کاشی بگذارید */
@layer my-reset, kashi;
@layer my-reset { a { color: blue; } }

تم روشن و تیره

تم پیش‌فرض تیره است. ویژگی data-theme را روی <html> یا هر عنصری بگذارید:

<html data-theme="light">
<section data-theme="dark">…</section>

برای پیروی از تنظیم سیستم کاربر:

const dark = matchMedia("(prefers-color-scheme: dark)").matches;
document.documentElement.dataset.theme = dark ? "dark" : "light";

طیفی که createTheme() می‌سازد خودکار از نظر کنتراست بررسی نمی‌شود. پس از انتخاب رنگ برند، کنتراست دکمهٔ اصلی را بررسی کنید.