ערכות נושא

מה תבנו

אפליקציה שכל המראה שלה ניתן לשינוי על ידי המשתמש — החל בגיליון סגנון אחד מקושר ועד מחליף ערכות נושא בזמן ריצה שנשמר — בכ-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 שניתנת להרצה, והקטלוגים האחרים מתעדים את אותה תבנית לערימות שלהם.

השלבים הבאים

• עוזרי העדפות — אותה תבנית לשפה, גודל טקסט, שיתוף והזנת תאריך/שעה.
• תרמו ערכת נושא — כל אחת היא גיליון סגנון עצמאי אחד שמכוון לווי המחלקה; ראו תרומה.

שאלות בדרך? עמוד העזרה מלא בתשובות — ואם שלב יכול להיות ברור יותר, ספרו לנו ונשמח לשפר את המדריך.