थीम

तुम्ही काय बनवाल

एक अॅप ज्याचा संपूर्ण देखावा वापरकर्ता बदलू शकतो — एका लिंक केलेल्या स्टाइलशीटपासून सुरू होऊन, टिकणाऱ्या चालू-असताना थीम बदलकापर्यंत — सुमारे १५ मिनिटांत.

सुरू करण्यापूर्वी

आधी पूर्ण करा फ्रेमवर्क ट्युटोरियल आधी तुमच्या स्टॅकसाठी, जेणेकरून थीम द्यायला तुमच्याकडे एक छोटा Lily फॉर्म असेल. येथे सगळे सातही फ्रेमवर्कमध्ये चालते; कोड नमुने Svelte आणि साधे HTML दाखवतात.

पायरी १ — तयार थीम लिंक करा

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, आणि आणखी बरेच.

पायरी २ — काहीही ओव्हरराइड करा

थीम निवडक यात गुंडाळलेले आहेत :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), म्हणून जी थीम सक्रिय असेल ती ते घेते.

पायरी ४ — तुमच्या स्वतःच्या CSS मध्ये थीमला प्रतिसाद द्या

कारण साहाय्यक दस्तऐवजाच्या मुळावर data-theme सेट करतो, तुमच्या स्वतःच्या शैली त्यावर फांद्या करू शकतात:

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

सर्व्हर रेंडरिंगसाठी टिपा

साहाय्यक सर्व DOM लिखाण फ्रेमवर्कच्या mount/effect जीवनचक्रात करतो, म्हणून तो रचनेनेच SSR-सुरक्षित आहे. पहिल्या रंगवण्यातील लकाकी टाळण्यासाठी, सर्व्हरवर सुरुवातीच्या थीमचे <link> आणि data-theme रेंडर करा (उदाहरणार्थ कुकीमधून) — Svelte साहाय्यक रेपो चालवता येणारे SvelteKit कुकी उदाहरण पाठवतो, आणि इतर कॅटलॉग त्यांच्या स्टॅकसाठी हाच नमुना नोंदवतात.

पुढील पायऱ्या

• पसंती साहाय्यक — भाषा, मजकूर आकार, शेअरिंग आणि तारीख/वेळ नोंदीसाठी हाच नमुना.
• थीम योगदान द्या — प्रत्येक एक स्वतंत्र स्टाइलशीट आहे जी क्लास हुकना लक्ष्य करते; पहा योगदान.

वाटेत प्रश्न आहेत? मदत पृष्ठ उत्तरांनी भरलेले आहे — आणि एखादी पायरी अधिक स्पष्ट करता आली तर, आम्हाला सांगा आणि आम्ही आनंदाने ट्युटोरियल सुधारू.