تھیمز

آپ کیا بنائیں گے

ایک ایپ جس کی پوری شکل صارف بدل سکتا ہے — ایک لنک کی گئی اسٹائل شیٹ سے شروع ہو کر، محفوظ رہنے والے چلتے-وقت کے تھیم بدلنے والے پر ختم — تقریباً 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 کوکی مثال بھیجتا ہے، اور دیگر کیٹلاگ اپنے اسٹیکس کے لیے یہی نمونہ درج کرتے ہیں۔

اگلے مراحل

• ترجیحی معاونین — زبان، متن کے سائز، شیئرنگ اور تاریخ/وقت کے اندراج کے لیے یہی نمونہ۔
• ایک تھیم کا حصہ ڈالیں — ہر ایک کلاس ہُکس کو ہدف بنانے والی ایک آزاد اسٹائل شیٹ ہے؛ دیکھیں حصہ ڈالنا.

راستے میں سوالات ہیں؟ مدد کا صفحہ جوابات سے بھرا ہے — اور اگر کوئی مرحلہ مزید واضح ہو سکتا ہے، ہمیں بتائیں اور ہم خوشی سے ٹیوٹوریل بہتر بنائیں گے۔