தீம்கள்

நீங்கள் என்ன உருவாக்குவீர்கள்

பயனர் முழுத் தோற்றத்தையும் மாற்றக்கூடிய பயன்பாடு — ஒரு இணைக்கப்பட்ட நடைத்தாளில் தொடங்கி, நிலைத்திருக்கும் இயங்குநேர தீம் மாற்றியுடன் முடிவது — சுமார் 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 குக்கீ எடுத்துக்காட்டைக் கொண்டுள்ளது, மற்ற பட்டியல்கள் தங்கள் அடுக்குகளுக்கு அதே முறையை ஆவணப்படுத்துகின்றன.

அடுத்த படிகள்

• விருப்ப உதவியாளர்கள் — மொழி, உரை அளவு, பகிர்வு மற்றும் தேதி/நேர உள்ளீட்டுக்கு அதே முறை.
• ஒரு தீமை வழங்குங்கள் — ஒவ்வொன்றும் வகுப்புக் கொக்கிகளை இலக்காகக் கொள்ளும் ஒரு தனித்த நடைத்தாள்; பாருங்கள் பங்களிப்பு.

வழியில் கேள்விகளா? உதவிப் பக்கம் பதில்களால் நிறைந்தது — ஒரு படி இன்னும் தெளிவாக இருக்க முடிந்தால், எங்களிடம் சொல்லுங்கள் நாங்கள் மகிழ்ச்சியுடன் பயிற்சியை மேம்படுத்துவோம்.