Lily Design System™

थीम

Lily घटक में स्थिर क्लास हुक आ शून्य CSS बा — एहसे थीम खाली एगो स्टाइलशीट ह। ई ट्यूटोरियल "एगो फाइल लिंक करीं" से "प्रयोगकर्ता के चलत समय थीम बदले दीं, सँजो के" तक जाला।

रउआ का बनाईब

एगो ऐप जेकर पूरा रूप प्रयोगकर्ता बदल सकेला — एगो लिंक कइल स्टाइलशीट से शुरू होके, टिकल चलत-समय थीम बदले वाला पर खतम — करीब 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, आ अउरी बहुत।

आपन काम जाँचीं: पन्ना फेर लोड करीं। उहे मार्कअप जवन रउआ फ्रेमवर्क ट्यूटोरियल में बनइनी अब पूरा शैली वाला बा — बटन, इनपुट, लेबल, फोकस घेरा। HTML के एगो पंक्ति ई कइलस — हर घटक ठीक वइसहीं रहल जइसे रहे।

कदम 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), एहसे जवन थीम सक्रिय होखे ओकरा के उठा लेला।

2026-08-29 के जाँचल: ठीक एह टुकड़ा के प्रकाशित 0.1.1 पैकेज के खिलाफ कंपाइल कइल गइल, एकरा से svelte/server.

कदम 4 — आपन CSS में थीम के जवाब दीं

काहे कि सहायक दस्तावेज के जड़ पर data-theme सेट करेला, रउआ के आपन शैली ओकरा पर शाखा बना सकेलें: 

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

सर्वर रेंडरिंग खातिर टिप्पणी

सहायक सब DOM लिखाई फ्रेमवर्क के mount/effect जीवनचक्र के भीतर करेला, एहसे बनावट से SSR-सुरक्षित बा। पहिला रंगाई में झिलमिलाहट से बचे खातिर, सर्वर पर शुरुआती थीम के <link> आ data-theme रेंडर करीं (उदाहरण खातिर कुकी से) — Svelte सहायक रेपो चलावे लायक SvelteKit कुकी उदाहरण भेजेला, आ दोसर कैटलॉग आपन स्टैक खातिर उहे पैटर्न दर्ज करेलें।

अगिला कदम

  • पसंद सहायक — भाषा, पाठ आकार, साझा करे आ तारीख/समय प्रविष्टि खातिर उहे पैटर्न।
  • एगो थीम के योगदान दीं — हर एक क्लास हुक के निशाना बनावे वाली एगो स्वतंत्र स्टाइलशीट ह; देखीं योगदान.

रास्ता में सवाल बा? मदद पन्ना जवाब से भरल बा — आ अगर कवनो कदम अउरी साफ हो सकेला, हमनी के बताईं आ हमनी खुशी से ट्यूटोरियल सुधारब।