థీమ్‌లు
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 కుకీ ఉదాహరణను అందిస్తుంది, ఇతర కేటలాగ్‌లు తమ స్టాక్‌ల కోసం అదే నమూనాను నమోదు చేస్తాయి.
తదుపరి దశలు
- ప్రాధాన్యత సహాయకాలు — భాష, టెక్స్ట్ పరిమాణం, షేరింగ్ మరియు తేదీ/సమయ ఎంట్రీకి అదే నమూనా.
- ఒక థీమ్‌ను అందించండి — ప్రతిదీ క్లాస్ హుక్‌లను లక్ష్యంగా చేసుకునే ఒక స్వతంత్ర స్టైల్‌షీట్; చూడండి సహకారం.
దారిలో ప్రశ్నలా? సహాయ పేజీ సమాధానాలతో నిండి ఉంది — మరియు ఏదైనా దశను మరింత స్పష్టంగా చేయవచ్చంటే, మాకు చెప్పండి మరియు మేము సంతోషంగా ట్యుటోరియల్‌ను మెరుగుపరుస్తాము.