थीम ट्यूटोरियल

आप क्या बनाएँगे

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

अगले चरण

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

रास्ते में सवाल हैं? सहायता पृष्ठ उत्तरों से भरा है — और अगर कोई चरण और स्पष्ट हो सकता है, हमें बताएँ और हम खुशी से ट्यूटोरियल सुधारेंगे।