ثيم واحد يغيّر كل التفاصيل.

نفس الأساس. طراز مختلف.

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

كيف أخصّص الثيم؟

مساحة التجربة غيّر الثيم. شاهد الفرق.

اختر طرازكاستكشف الثيمات

بوابة الخدمات

نفس المكوّنات. هوية تناسبك.معاينة حيّة

الأفراد

طلب إصدار شهادة

قدّم طلبك إلكترونيًا وتابع حالته بكل سهولة، في مكان واحد.

5 دقائق لإكمال الطلب

استعرض الخدمة

ابدأ رحلتك

تفاصيل تصنع الفرق

مكتملقيد المراجعة

كل ما تحتاجه، واضح ومنظّم.

اكتمال الطلب65%

تفعيل الإشعارات

معاينات حقيقية من نفس الكود الذي تنزّله إلى مشروعك.ابدأ باستخدامه

تفاصيل ثيم كود المنصات

أخضر واضح، تباين متوازن وهوية مستندة إلى مرجع كود المنصات.

اللون الأساسي

#1b8354

لون النص

#161616

لون الحدود

#d2d6db

الخلفية

#ffffff

الخلفية المساعدة

#f3fcf6

استدارة الحواف

4px

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

الثيم في ثلاثة أسطر

example.tsx

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

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

عرض رموز التصميم كاملة

tirazkit-dga.ts

import type { CSSProperties } from "react";

export const themeTokens = {
  "--tk-primary": "#1b8354",
  "--tk-hover": "#166a45",
  "--tk-pressed": "#104631",
  "--tk-on-primary": "#ffffff",
  "--tk-soft": "#f3fcf6",
  "--tk-radius": "4px",
  "--tk-bg": "#ffffff",
  "--tk-fg": "#161616",
  "--tk-muted": "#596472",
  "--tk-surface": "#f8f9fb",
  "--tk-border": "#d2d6db",
  "--tk-success": "#067647",
  "--tk-success-bg": "#ecfdf3",
  "--tk-warning": "#935c08",
  "--tk-warning-bg": "#fffaeb",
  "--tk-danger": "#b42318",
  "--tk-danger-bg": "#fef3f2",
  "--tk-info": "#175cd3",
  "--tk-info-bg": "#eff8ff"
} as CSSProperties;

استخدم الملف الذي نزّلته مع الخاصية overrides في مزوّد الثيم. يشمل الملف الألوان والحواف، وينطبق على النوافذ المنبثقة أيضًا.