ਥੀਮ ਟਿਊਟੋਰਿਅਲ

ਤੁਸੀਂ ਕੀ ਬਣਾਓਗੇ

ਇੱਕ ਐਪ ਜਿਸਦੀ ਪੂਰੀ ਦਿੱਖ ਵਰਤੋਂਕਾਰ ਬਦਲ ਸਕਦਾ ਹੈ — ਇੱਕ ਲਿੰਕ ਕੀਤੀ ਸਟਾਈਲਸ਼ੀਟ ਤੋਂ ਸ਼ੁਰੂ ਹੋ ਕੇ, ਚੱਲਦੇ ਸਮੇਂ ਦੇ ਸਾਂਭੇ ਥੀਮ ਬਦਲਣ ਵਾਲੇ ਤੱਕ ਪਹੁੰਚਦੀ — ਲਗਭਗ 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 ਕੁੱਕੀ ਉਦਾਹਰਨ ਭੇਜਦੀ ਹੈ, ਅਤੇ ਬਾਕੀ ਕੈਟਾਲਾਗ ਆਪਣੇ ਸਟੈਕਾਂ ਲਈ ਇਹੀ ਪੈਟਰਨ ਦਰਜ ਕਰਦੇ ਹਨ।

ਅਗਲੇ ਕਦਮ

ਤਰਜੀਹ ਸਹਾਇਕ — ਭਾਸ਼ਾ, ਲਿਖਤ ਆਕਾਰ, ਸਾਂਝਾ ਕਰਨ ਅਤੇ ਮਿਤੀ/ਸਮਾਂ ਦਰਜ ਕਰਨ ਲਈ ਇਹੀ ਪੈਟਰਨ।
ਇੱਕ ਥੀਮ ਦਾ ਯੋਗਦਾਨ ਦਿਓ — ਹਰ ਇੱਕ ਕਲਾਸ ਹੁੱਕਾਂ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦੀ ਇੱਕ ਆਜ਼ਾਦ ਸਟਾਈਲਸ਼ੀਟ ਹੈ; ਵੇਖੋ ਯੋਗਦਾਨ.

ਰਾਹ ਵਿੱਚ ਸਵਾਲ ਹਨ? ਮਦਦ ਪੰਨਾ ਜਵਾਬਾਂ ਨਾਲ ਭਰਿਆ ਹੈ — ਅਤੇ ਜੇ ਕੋਈ ਕਦਮ ਹੋਰ ਸਾਫ਼ ਹੋ ਸਕਦਾ ਹੈ, ਸਾਨੂੰ ਦੱਸੋ ਅਤੇ ਅਸੀਂ ਖ਼ੁਸ਼ੀ ਨਾਲ ਟਿਊਟੋਰਿਅਲ ਸੁਧਾਰਾਂਗੇ।