تم‌ها
مؤلفه‌های Lily قلاب‌های کلاس پایدار و صفر CSS دارند — پس تم فقط یک شیوه‌نامه است. این آموزش از «یک فایل را پیوند دهید» تا «بگذارید کاربر در زمان اجرا تم را عوض کند، ماندگار» می‌رود.
چه چیزی می‌سازید
برنامه‌ای که کاربر می‌تواند کل ظاهرش را عوض کند — از یک شیوه‌نامه پیوندشده آغاز می‌شود و به یک تعویض‌گر تم ماندگار در زمان اجرا می‌رسد — در حدود ۱۵ دقیقه.
پیش از شروع
نخست آموزش چارچوب نخست برای پشته خود، تا یک فرم کوچک Lily برای تم‌دادن داشته باشید. همه‌چیز این‌جا در هر هفت چارچوب کار می‌کند؛ نمونه‌های کد Svelte و HTML ساده را نشان می‌دهند.
گام ۱ — یک تم آماده را پیوند دهید
themes/ پوشه ۴۵ شیوه‌نامه مستقل دارد. آن‌ها را در دارایی‌های ایستای برنامه خود کپی کنید و یکی را پیوند دهید:
<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، و بسیاری دیگر.
کارتان را بررسی کنید: صفحه را دوباره بارگذاری کنید. همان نشانه‌گذاری که در آموزش چارچوب ساختید اکنون کاملاً استایل‌دار است — دکمه‌ها، ورودی‌ها، برچسب‌ها، حلقه‌های تمرکز. یک خط HTML این کار را کرد — هر مؤلفه دقیقاً همان‌گونه که بود ماند.
گام ۲ — هر چیزی را بازنویسی کنید
انتخابگرهای تم درون :where(...)پیچیده شده‌اند که ویژگی‌داری صفر دارد — پس هر قاعده‌ای که بنویسید برنده است، ساده:
/* After the theme link: your brand button, everything else themed */
.button {
background: #7c3aed;
border-radius: 9999px;
}گام ۳ — تعویض در زمان اجرا با 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)، پس هر تمی که فعال باشد را می‌گیرد.
تأییدشده در ۲۰۲۶-۰۸-۲۹: دقیقاً همین قطعه در برابر بسته منتشرشده 0.1.1 کامپایل شد، از طریق
svelte/server.
گام ۴ — در CSS خودتان به تم واکنش نشان دهید
چون کمکی data-theme را روی ریشه سند تنظیم می‌کند، استایل‌های خودتان می‌توانند بر آن شاخه شوند:
[data-theme="dark"] .site-logo { filter: invert(1); }نکاتی برای رندر سمت سرور
کمکی همه نوشتن‌های DOM را درون چرخه عمر mount/effect چارچوب انجام می‌دهد، پس از بنیاد ایمن برای SSR است. برای پرهیز از چشمک در نخستین نقاشی، در سرور <link> و
data-theme تم آغازین را رندر کنید (برای نمونه از یک کوکی) — مخزن کمکی Svelte یک نمونه اجراشدنی کوکی SvelteKit دارد، و فهرست‌های دیگر همین الگو را برای پشته‌های خود مستند می‌کنند.
گام‌های بعدی
- کمکی‌های ترجیحات — همین الگو برای زبان، اندازه متن، اشتراک‌گذاری و ورود تاریخ/زمان.
- یک تم مشارکت کنید — هر کدام یک شیوه‌نامه مستقل است که قلاب‌های کلاس را هدف می‌گیرد؛ ببینید مشارکت.
در مسیر پرسشی دارید؟ صفحه راهنما پر از پاسخ است — و اگر گامی می‌تواند روشن‌تر باشد، به ما بگویید و ما با کمال میل آموزش را بهبود می‌دهیم.