تخصيص الثيمات

نفس المكوّنات تعمل مع أربعة ثيمات: كود المنصات، طراز، محيط، وحبر. يحدد مزوّد الثيم الألوان والحواف والاتجاه داخل نطاقه.

اختيار الثيم

import { Theme } from "@/components/tirazkit/theme";

<Theme theme="tiraz" mode="light" locale="ar">
  {children}
</Theme>

تخصيص الألوان

عدّل القيم في ملف themes.ts، أو مرّر تخصيصاتك في overrides. تصل التخصيصات إلى القوائم والنوافذ المنبثقة أيضًا.

import type { CSSProperties } from "react";

const brand = {
  "--tk-primary": "#5945e6",
  "--tk-hover": "#4935c9",
  "--tk-pressed": "#38249f",
  "--tk-soft": "#f1effe",
  "--tk-radius": "12px",
} as CSSProperties;

<Theme theme="tiraz" overrides={brand}>
  {children}
</Theme>

عدّل ألوان التحويم والضغط مع اللون الأساسي، وراجع تباين النص والحدود بعد التعديل. الرموز تبدأ بـ --tk- لتكون مستقلة عن هوية الموقع المضيف.

تصدير الرموز

في صفحة الثيمات اختر الثيم والمظهر، ثم نزّل ملف TypeScript للرموز. استورد themeTokens ومرّرها إلى خاصية overrides.

المظهر الداكن

<Theme theme="ocean" mode="dark" locale="ar">
  {children}
</Theme>

المظهر الداكن منفصل عن مظهر موقع التوثيق. يمكنك وضع معاينتين بثيمين مختلفين في الصفحة نفسها. النسخة الداكنة لثيم كود المنصات تكييف تجريبي من طرازكت.

حدود النطاق

المزوّد يضيف حاوية فعلية في الصفحة ويستخدم متغيرات CSS. ضعه حول واجهتك أو قسم منها، ثم عالج تخطيط الحاوية عبر className. مكوّناتك الأصلية خارج هذا النطاق تحتفظ بإعداداتها.