السمات

ما الذي ستبنيه

تطبيق يستطيع المستخدم تغيير مظهره كله — بدءًا من ورقة أنماط واحدة مربوطة وانتهاءً بمبدّل سمات ثابت أثناء التشغيل — في نحو 15 دقيقة.

قبل أن تبدأ

أنهِ أولًا دليل إطار العمل لمجموعتك التقنية أولًا، ليكون لديك نموذج Lily صغير تضيف إليه السمة. كل ما هنا يعمل في أطر العمل السبعة كلها؛ وتعرض أمثلة الشيفرة Svelte وHTML العادي.

الخطوة 1 — اربط سمة جاهزة

themes/ يضم المجلد 45 ورقة أنماط مستقلة. انسخها إلى الأصول الساكنة لتطبيقك واربط واحدة:

<link rel="stylesheet" href="/assets/themes/united-kingdom-national-health-service-england-for-patients.css" />

أبرز ما في المجموعة:

• القطاع العام — NHS England / Scotland / Wales، كلٌّ بنسختين موجّهتين للمرضى وللممارسين؛ GOV.UK (united-kingdom-government-digital-service)؛ USWDS (united-states-web-design-system).
• مستوحاة من الموردين — adobe-spectrum, mozilla-protocol.
• للأغراض العامة — light, dark, nord, dracula, wireframe, corporate, synthwave، والكثير غيرها.

الخطوة 2 — تجاوز أي شيء

محدِّدات السمة ملفوفة في :where(...)وهو ذو خصوصية صفر — فأي قاعدة تكتبها تفوز، ببساطة:

/* After the theme link: your brand button, everything else themed */
.button {
  background: #7c3aed;
  border-radius: 9999px;
}

الخطوة 3 — التبديل أثناء التشغيل بـ theme-picker

theme-picker المساعد زر أيقونة عديم الرأس + قائمة منسدلة يملك دورة حياة السمة كلها: يحمّل ورقة الأنماط المختارة بتبديل <link> مُدار واحد (لا تُجلب إلا السمة النشطة)، ويضبط data-theme="{slug}" على المستند، ويحفظ اختياريًا في localStorage. يظهر Svelte هنا؛ ومنافذ React وVue وAngular وHTML وNunjucks وBlazor تطابقه عقدًا بعقد:

<script>
  import ThemePicker from "@lilydesignsystem/svelte-theme-picker";
</script>

<ThemePicker
  label="Theme"
  themesUrl="/assets/themes/"
  themes={["light", "dark", "nord", "wireframe"]}
  storageKey="my-app-theme"
/>

هذا هو التكامل كله. يتبع سلوك لوحة المفاتيح نمط القائمة في WAI-ARIA APG؛ وعنصر التحكم نفسه عديم الرأس (خطّاف الصنف .theme-picker)، فيلتقط أي سمة نشطة.

الخطوة 4 — تفاعل مع السمة في CSS الخاص بك

لأن المساعد يضبط data-theme على جذر المستند، يمكن لأنماطك أن تتفرع عليه:

[data-theme="dark"] .site-logo { filter: invert(1); }

ملاحظات للعرض على الخادم

ينفّذ المساعد كل كتابات DOM داخل دورة حياة mount/effect في الإطار، فهو آمن لـ SSR بالبناء. ولتجنّب وميض الرسم الأول، اعرض <link> و data-theme للسمة الأولية على الخادم (مثلًا من ملف تعريف ارتباط) — يأتي مستودع مساعد Svelte بمثال قابل للتشغيل لملف تعريف ارتباط SvelteKit، وتوثّق الفهارس الأخرى النمط نفسه لمجموعاتها.

الخطوات التالية

• مساعدات التفضيلات — النمط نفسه للغة وحجم النص والمشاركة وإدخال التاريخ/الوقت.
• ساهم بسمة — كلٌّ منها ورقة أنماط مستقلة واحدة تستهدف خطّافات الأصناف؛ انظر المساهمة.

أسئلة في الطريق؟ صفحة المساعدة مليئة بالإجابات — وإن أمكن توضيح خطوة أكثر، أخبرنا وسنحسّن الدليل بكل سرور.