การกำหนดธีม

สิ่งที่คุณจะสร้าง

แอปที่ผู้ใช้เปลี่ยนรูปลักษณ์ทั้งหมดได้ — เริ่มจากสไตล์ชีตที่ลิงก์ไว้หนึ่งไฟล์ ไปจนถึงตัวสลับธีมขณะรันไทม์ที่เก็บค่าไว้ — ภายในประมาณ 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 ตัวช่วยเป็นปุ่มไอคอน + listbox แบบ headless ที่ดูแลวงจรชีวิตของธีมทั้งหมด: โหลดสไตล์ชีตที่เลือกโดยสลับ <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"
/>

นั่นคือการเชื่อมต่อทั้งหมด พฤติกรรมแป้นพิมพ์เป็นไปตามรูปแบบ listbox ของ WAI-ARIA APG ตัวควบคุมเองเป็น headless (class hook .theme-picker) จึงรับธีมใดก็ตามที่ใช้งานอยู่

ขั้นที่ 4 — ตอบสนองต่อธีมใน CSS ของคุณเอง

เพราะตัวช่วยตั้งค่า data-theme ที่รากของเอกสาร สไตล์ของคุณเองจึงแตกกิ่งตามค่านั้นได้:

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

หมายเหตุสำหรับการเรนเดอร์บนเซิร์ฟเวอร์

ตัวช่วยทำการเขียน DOM ทั้งหมดภายในวงจรชีวิต mount/effect ของเฟรมเวิร์ก จึงปลอดภัยสำหรับ SSR โดยโครงสร้าง เพื่อหลีกเลี่ยงการกะพริบในการวาดครั้งแรก ให้เรนเดอร์ <link> และ data-theme ของธีมเริ่มต้นบนเซิร์ฟเวอร์ (เช่นจากคุกกี้) — รีโพของตัวช่วย Svelte มีตัวอย่างคุกกี้ SvelteKit ที่รันได้ และแคตตาล็อกอื่นบันทึกรูปแบบเดียวกันสำหรับสแต็กของตน

ขั้นต่อไป

• ตัวช่วยการตั้งค่า — รูปแบบเดียวกันสำหรับภาษา ขนาดตัวอักษร การแชร์ และการกรอกวันที่/เวลา
• มีส่วนร่วมกับธีม — แต่ละธีมเป็นสไตล์ชีตแยกอิสระหนึ่งไฟล์ที่มุ่งเป้าไปที่ class hook ดู แนวทางการมีส่วนร่วม.

มีคำถามระหว่างทางไหม? หน้าช่วยเหลือ เต็มไปด้วยคำตอบ — และถ้าขั้นตอนไหนทำให้ชัดเจนกว่านี้ได้ บอกเรา แล้วเรายินดีปรับปรุงบทเรียน