تم‌دهی

به‌جای تغییر مستقیم استایل هر کامپوننت، می‌توانید مقادیر اصلی تم را تغییر دهید و ظاهر کل رابط کاربری را یکجا کنترل کنید.

Theme Tokens#

FarsiUI از توکن‌های معنایی مانند background، foreground و primary استفاده می‌کند.

برای مثال:

Copy<div className="bg-primary text-primary-foreground">
  Hello
</div>

در اینجا primary رنگ پس‌زمینه و primary-foreground رنگ متن روی آن را مشخص می‌کند.

با تغییر مقدار این توکن‌ها، ظاهر تمام کامپوننت‌هایی که از آن‌ها استفاده می‌کنند نیز تغییر می‌کند.

Token Convention#

توکن‌های رنگی معمولاً به‌صورت یک جفت background و foreground تعریف می‌شوند.

برای مثال:

Copy--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);

primary رنگ سطح اصلی و primary-foreground رنگ متن و آیکون روی آن سطح است.

این الگو برای توکن‌هایی مانند card، popover، secondary و accent نیز استفاده می‌شود.

لیست توکن‌ها#

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

Radius#

توکن --radius مقدار پایه شعاع گوشه‌ها را مشخص می‌کند.

FarsiUI از این مقدار برای ساخت مقیاس‌های مختلف radius استفاده می‌کند تا کامپوننت‌ها ظاهر یکدستی داشته باشند.

Copy@theme inline {
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
}

با تغییر --radius، مقیاس radius کل رابط کاربری تغییر می‌کند.

اضافه کردن Token جدید#

اگر برای پروژه به یک رنگ یا مقدار جدید نیاز دارید، می‌توانید Token اختصاصی خودتان را اضافه کنید.

Copy:root {
  --warning: oklch(0.84 0.16 84);
  --warning-foreground: oklch(0.28 0.07 46);
}
 
.dark {
  --warning: oklch(0.41 0.11 46);
  --warning-foreground: oklch(0.99 0.02 95);
}
 
@theme inline {
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
}

بعد از آن می‌توانید از Token جدید در کلاس‌های Tailwind استفاده کنید:

Copy<div className="bg-warning text-warning-foreground">
  هشدار
</div>

حالت تاریک#

حالت تاریک با تغییر همان Theme Tokenها در .dark کنترل می‌شود.

Copy.dark {
  --background: ...;
  --foreground: ...;
  --primary: ...;
}

بنابراین کامپوننت‌ها نیازی به تعریف جداگانه برای هر حالت ندارند و فقط از Tokenهای تم استفاده می‌کنند.

رنگ پایه#

هنگام ساخت یا تنظیم پروژه، می‌توانید رنگ پایه تم را انتخاب کنید.

رنگ پایه مقدار اولیه Tokenهای پروژه را تعیین می‌کند و می‌توانید بعداً تمام آن‌ها را مطابق Design System خود تغییر دهید.

CSS پیش‌فرض FarsiUI#

در ادامه می‌توانید CSS پیش‌فرض FarsiUI را ببینید و در صورت نیاز آن را مطابق Design System پروژه خود تغییر دهید.

Copy@import "tailwindcss";
@import "farsiui/tailwind.css";
 
@custom-variant dark (&:is(.dark *));
 
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
}
 
:root {
  --radius: 0.625rem;
  /* theme tokens */
}
 
.dark {
  /* dark theme tokens */
}

تمام این مقادیر قابل تغییر هستند و می‌توانید FarsiUI را با رنگ‌ها، radius و Design System پروژه خود هماهنگ کنید.