Mandhari

Utakachojenga

Programu ambayo mwonekano wake wote mtumiaji anaweza kubadilisha — kuanzia karatasi moja ya mitindo iliyounganishwa, hadi kibadilishaji cha mandhari cha wakati wa utekelezaji kinachohifadhiwa — kwa takriban dakika 15.

Kabla ya kuanza

Maliza mafunzo ya mfumo wa kazi kwa teknolojia yako kwanza, ili uwe na fomu ndogo ya Lily ya kuwekea mandhari. Kila kitu hapa kinafanya kazi katika mifumo yote saba ya kazi; mifano ya msimbo inaonyesha Svelte na HTML ya kawaida.

Hatua ya 1 — Unganisha mandhari yaliyo tayari

themes/ saraka ina karatasi 45 huru za mitindo. Zinakili kwenye mali tuli za programu yako na uunganishe moja:

<link rel="stylesheet" href="/assets/themes/united-kingdom-national-health-service-england-for-patients.css" />

Mambo muhimu ya seti hiyo:

• Sekta ya umma — NHS England / Scotland / Wales, kila moja katika matoleo ya wagonjwa na ya watendaji; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
• Yaliyotokana na wauzaji — adobe-spectrum, mozilla-protocol.
• Matumizi ya jumla — light, dark, nord, dracula, wireframe, corporate, synthwave, na mengine mengi.

Hatua ya 2 — Batilisha chochote

Vichaguzi vya mandhari vimefungwa katika :where(...)ambayo ina umahususi sifuri — kwa hivyo kanuni yoyote unayoandika hushinda, kwa urahisi kabisa:

/* After the theme link: your brand button, everything else themed */
.button {
  background: #7c3aed;
  border-radius: 9999px;
}

Hatua ya 3 — Kubadili wakati wa utekelezaji kwa theme-picker

theme-picker kisaidizi ni kitufe cha ikoni + kisanduku cha orodha kisicho na mwonekano kinachomiliki mzunguko mzima wa maisha wa mandhari: hupakia karatasi ya mitindo iliyochaguliwa kwa kubadilisha <link> moja inayosimamiwa (ni mandhari amilifu pekee hupakuliwa), huweka data-theme="{slug}" kwenye hati, na hiari huhifadhi kwenye localStorage. Svelte imeonyeshwa hapa; matoleo ya React, Vue, Angular, HTML, Nunjucks, na Blazor yanalingana mkataba kwa mkataba:

<script>
  import ThemePicker from "@lilydesignsystem/svelte-theme-picker";
</script>

<ThemePicker
  label="Theme"
  themesUrl="/assets/themes/"
  themes={["light", "dark", "nord", "wireframe"]}
  storageKey="my-app-theme"
/>

Huo ndio ujumuishaji wote. Tabia ya kibodi hufuata mchoro wa kisanduku cha orodha cha WAI-ARIA APG; kidhibiti chenyewe hakina mwonekano (kishikio cha darasa .theme-picker), hivyo huchukua mandhari yoyote iliyo amilifu.

Hatua ya 4 — Itikia mandhari katika CSS yako mwenyewe

Kwa kuwa kisaidizi huweka data-theme kwenye mzizi wa hati, mitindo yako mwenyewe inaweza kutawanyika kulingana nayo:

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

Maelezo kwa uonyeshaji wa seva

Kisaidizi hufanya uandishi wote wa DOM ndani ya mzunguko wa maisha wa kupachika/athari wa mfumo wa kazi, hivyo ni salama kwa SSR kwa muundo. Ili kuepuka kuvuma kwa mchoro wa kwanza, onyesha <link> na data-theme ya mandhari ya awali kwenye seva (kwa mfano kutoka kwenye kidakuzi) — hifadhi ya kisaidizi cha Svelte ina mfano wa kidakuzi wa SvelteKit unaoweza kuendeshwa, na orodha nyingine huandika mchoro uleule kwa teknolojia zao.

Hatua zinazofuata

• Visaidizi vya mapendeleo — mchoro uleule kwa lugha, ukubwa wa maandishi, kushiriki, na uingizaji wa tarehe/saa.
• Changia mandhari — kila moja ni karatasi moja huru ya mitindo inayolenga vishikio vya darasa; tazama mwongozo wa kuchangia.

Una maswali njiani? Ukurasa wa msaada umejaa majibu — na kama hatua inaweza kuwa wazi zaidi, tuambie na tutafurahi kuboresha mafunzo.