Lily Design System™

Jigogi

Abubuwan Lily suna da ƙugiyoyin aji masu tsayayye da sifili CSS — don haka jigo takardar salo ce kawai. Wannan koyarwar tana tafiya daga "haɗa fayil ɗaya" zuwa "bar mai amfani ya sauya jigo lokacin aiki, tare da dawwama".

Abin da za ka gina

App wanda mai amfani zai iya canza dukan kamanninsa — farawa da takardar salo ɗaya da aka haɗa, ƙarewa da mai sauya jigo mai dawwama lokacin aiki — cikin kusan mintuna 15.

Kafin ka fara

Fara gama koyarwar tsarin don tarin fasahar ka da farko, don ka sami ƙaramin fom na Lily da za ka ba jigo. Komai a nan yana aiki a dukan tsare-tsare bakwai; samfuran lamba suna nuna Svelte da HTML mai sauƙi.

Mataki na 1 — Haɗa jigon da aka shirya

themes/ kundin adireshin yana ɗauke da takardun salo 45 masu cin gashin kansu. Kwafe su zuwa kadarorin tsaye na app ɗinka ka haɗa ɗaya: 

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

Muhimman abubuwan saitin:

  • Fannin jama'a — NHS England / Scotland / Wales, kowanne a nau'ukan da suka karkata ga marasa lafiya da ƙwararru; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Masu samun kwarin gwiwa daga masu sayarwa — adobe-spectrum, mozilla-protocol.
  • Amfani gama gari — light, dark, nord, dracula, wireframe, corporate, synthwave, da wasu da yawa.

Duba aikinka: sake loda shafin. Alamar rubutun guda ɗaya da ka gina a koyarwar tsarin yanzu tana da cikakken tsari — maɓallai, shigarwa, lakabi, zoben mayar da hankali. Layin HTML ɗaya ne ya yi haka — kowane abu ya kasance daidai kamar yadda yake.

Mataki na 2 — Gyara kowane abu

An naɗe masu zaɓen jigo a cikin :where(...)wanda ba shi da ƙayyadewa — don haka kowace doka da ka rubuta tana nasara, kai tsaye: 

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

Mataki na 3 — Sauyawa lokacin aiki da theme-picker

theme-picker mai taimakon maɓallin alama ne maras kai + listbox da ke mallakar dukan zagayen rayuwar jigo: yana loda takardar salon da aka zaɓa ta musanya <link> ɗaya da ake gudanarwa (ana ɗauko jigo mai aiki kawai), yana saita data-theme="{slug}" a kan takardar, kuma na zaɓi yana riƙe a cikin localStorage. An nuna Svelte a nan; tashoshin React, Vue, Angular, HTML, Nunjucks da Blazor suna daidaita yarjejeniya da yarjejeniya: 

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

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

Wannan shi ne dukan haɗin. Halayyar maɓallan rubutu tana bin tsarin listbox na WAI-ARIA APG; abin sarrafawar da kansa maras kai ne (ƙugiyar aji .theme-picker), don haka yana ɗaukar duk jigon da ke aiki.

An tabbatar a 2026-08-29: an haɗa ainihin wannan gutsuren da fakitin 0.1.1 da aka wallafa ta svelte/server.

Mataki na 4 — Amsa jigon a CSS ɗinka

Saboda mai taimakon yana saita data-theme a tushen takardar, salonka na kanka yana iya rassa a kan sa: 

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

Bayanai don zana a sabar

Mai taimakon yana yin dukan rubuce-rubucen DOM a cikin zagayen rayuwar mount/effect na tsarin, don haka yana da aminci ga SSR ta tsari. Don guje wa walƙiya a zane na farko, zana <link> da data-theme na jigon farko a sabar (misali daga kuki) — ma'ajiyar mai taimakon Svelte tana zuwa da misalin kuki na SvelteKit da za a iya gudanarwa, kuma sauran kundayen suna rubuta tsari iri ɗaya ga tarin fasaharsu.

Matakai na gaba

  • Masu taimakon abubuwan so — tsari iri ɗaya don harshe, girman rubutu, rabawa da shigar kwanan wata/lokaci.
  • Ba da gudummawar jigo — kowanne takardar salo ce mai cin gashin kanta guda ɗaya da ke nufin ƙugiyoyin aji; duba ba da gudummawa.

Tambayoyi a hanya? Shafin taimako cike yake da amsoshi — kuma idan wani mataki zai iya zama mafi bayyana, gaya mana kuma za mu gyara koyarwar da farin ciki.