ຮູບແບບສີສັນ

ສິ່ງທີ່ທ່ານຈະສ້າງ

ແອັບທີ່ຜູ້ໃຊ້ປ່ຽນລັກສະນະທັງໝົດໄດ້ — ເລີ່ມດ້ວຍ stylesheet ທີ່ເຊື່ອມຕໍ່ໜຶ່ງອັນ, ຈົບດ້ວຍຕົວສະຫຼັບຮູບແບບສີສັນຕອນແລ່ນທີ່ຄົງຢູ່ — ໃນປະມານ 15 ນາທີ.

ກ່ອນທ່ານເລີ່ມ

ເຮັດໃຫ້ສຳເລັດ ບົດສອນເຟຣມເວີກ ກ່ອນສຳລັບສະແຕັກຂອງທ່ານ, ເພື່ອໃຫ້ທ່ານມີແບບຟອມ Lily ນ້ອຍໆສຳລັບໃສ່ຮູບແບບສີສັນ. ທຸກຢ່າງທີ່ນີ້ເຮັດວຽກໃນທັງເຈັດເຟຣມເວີກ; ຕົວຢ່າງໂຄດສະແດງ Svelte ແລະ HTML ທຳມະດາ.

ຂັ້ນຕອນ 1 — ເຊື່ອມຕໍ່ຮູບແບບສີສັນສຳເລັດຮູບ

themes/ ໄດເຣັກທໍຣີມີ stylesheet ເອກະລາດ 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 ຕົວຊ່ວຍແມ່ນປຸ່ມໄອຄອນ + listbox ແບບບໍ່ມີຫົວທີ່ເປັນເຈົ້າຂອງວົງຈອນຊີວິດຮູບແບບສີສັນທັງໝົດ: ມັນໂຫຼດ stylesheet ທີ່ເລືອກໂດຍການສະຫຼັບ <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 listbox; ການຄວບຄຸມເອງເປັນແບບບໍ່ມີຫົວ (class hook .theme-picker), ສະນັ້ນມັນຮັບຮູບແບບສີສັນໃດກໍຕາມທີ່ເຄື່ອນໄຫວ.

ຂັ້ນຕອນ 4 — ຕອບສະໜອງຕໍ່ຮູບແບບສີສັນໃນ CSS ຂອງທ່ານເອງ

ເນື່ອງຈາກຕົວຊ່ວຍຕັ້ງ data-theme ທີ່ຮາກເອກະສານ, ຮູບແບບຂອງທ່ານເອງສາມາດແຕກກິ່ງຕາມມັນ:

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

ໝາຍເຫດສຳລັບການສະແດງຜົນຢູ່ເຊີບເວີ

ຕົວຊ່ວຍເຮັດການຂຽນ DOM ທັງໝົດພາຍໃນວົງຈອນຊີວິດ mount/effect ຂອງເຟຣມເວີກ, ສະນັ້ນມັນປອດໄພສຳລັບ SSR ໂດຍການອອກແບບ. ເພື່ອຫຼີກການກະພິບໃນການທາສີຄັ້ງທຳອິດ, ສະແດງ <link> ແລະ data-theme ຂອງຮູບແບບສີສັນເລີ່ມຕົ້ນຢູ່ເຊີບເວີ (ຕົວຢ່າງຈາກ cookie) — ຄັງຕົວຊ່ວຍ Svelte ສົ່ງຕົວຢ່າງ cookie SvelteKit ທີ່ແລ່ນໄດ້, ແລະແຄັດຕາລັອກອື່ນບັນທຶກຮູບແບບດຽວກັນສຳລັບສະແຕັກຂອງພວກມັນ.

ຂັ້ນຕອນຕໍ່ໄປ

• ຕົວຊ່ວຍການຕັ້ງຄ່າ — ຮູບແບບດຽວກັນສຳລັບພາສາ, ຂະໜາດຕົວອັກສອນ, ການແບ່ງປັນ ແລະການປ້ອນວັນທີ/ເວລາ.
• ປະກອບສ່ວນຮູບແບບສີສັນ — ແຕ່ລະອັນແມ່ນ stylesheet ເອກະລາດໜຶ່ງອັນທີ່ຕັ້ງເປົ້າໝາຍ class hook; ເບິ່ງ ການປະກອບສ່ວນ.

ມີຄຳຖາມລະຫວ່າງທາງບໍ? ໜ້າຊ່ວຍເຫຼືອ ເຕັມໄປດ້ວຍຄຳຕອບ — ແລະຖ້າຂັ້ນຕອນໃດຊັດເຈນຂຶ້ນໄດ້, ບອກພວກເຮົາ ແລະພວກເຮົາຍິນດີປັບປຸງບົດສອນ.