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

تم‌ساز

تغییرات روی کل همین صفحه اعمال می‌شوند. کد تولیدشده را کپی کنید و در 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;
}

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

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

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

تم روشن و تیره

تم پیش‌فرض تیره است. ویژگی 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() می‌سازد خودکار از نظر کنتراست بررسی نمی‌شود. پس از انتخاب رنگ برند، کنتراست دکمهٔ اصلی را بررسی کنید.