થીમ

તમે શું બનાવશો

એક એપ જેનો આખો દેખાવ વપરાશકર્તા બદલી શકે — એક લિંક કરેલી સ્ટાઇલશીટથી શરૂ કરી, સાચવાતા ચાલતી-વખતના થીમ બદલનાર સુધી — લગભગ 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, અને બીજી ઘણી.

પગલું 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), તેથી જે થીમ સક્રિય હોય તે તે લઈ લે છે.

પગલું 4 — તમારા પોતાના CSS માં થીમને પ્રતિસાદ આપો

કારણ કે સહાયક દસ્તાવેજના મૂળ પર data-theme સેટ કરે છે, તમારી પોતાની શૈલીઓ તેના પર ફાંટા પાડી શકે છે:

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

સર્વર રેન્ડરિંગ માટે નોંધો

સહાયક બધું DOM લખાણ ફ્રેમવર્કના mount/effect જીવનચક્રની અંદર કરે છે, તેથી બંધારણથી જ SSR-સુરક્ષિત છે. પહેલા રંગકામમાં ઝબકારો ટાળવા, સર્વર પર પ્રારંભિક થીમનું <link> અને data-theme રેન્ડર કરો (ઉદાહરણ તરીકે કૂકીમાંથી) — Svelte સહાયક રિપો ચલાવી શકાય તેવું SvelteKit કૂકી ઉદાહરણ મોકલે છે, અને બીજા કેટલોગ તેમના સ્ટૅક માટે આ જ પેટર્ન નોંધે છે.

આગળનાં પગલાં

• પસંદગી સહાયકો — ભાષા, લખાણ કદ, શેરિંગ અને તારીખ/સમય દાખલ માટે એ જ પેટર્ન.
• થીમ ફાળો આપો — દરેક એક સ્વતંત્ર સ્ટાઇલશીટ છે જે ક્લાસ હૂકને લક્ષ્ય બનાવે છે; જુઓ ફાળો આપવો.

રસ્તામાં પ્રશ્નો છે? મદદ પૃષ્ઠ જવાબોથી ભરેલું છે — અને જો કોઈ પગલું વધુ સ્પષ્ટ થઈ શકે, અમને કહો અને અમે ખુશીથી ટ્યુટોરિયલ સુધારીશું.