主題
Lily 元件帶有穩定嘅類別掛鉤同零 CSS — 所以主題只係一份樣式表。呢個教學由「連結一個檔案」去到「讓使用者喺執行時切換主題,並保存落嚟」。
你會建立啲乜
一個整體外觀都可以由使用者更改嘅應用程式 — 由一份連結嘅樣式表開始,以一個持久嘅執行時主題切換器完結 — 大約 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); }伺服器渲染備註
輔助工具喺框架嘅 mount/effect 生命週期內執行所有 DOM 寫入,所以設計上對 SSR 安全。為咗避免首次繪製閃爍,喺伺服器渲染初始主題嘅 <link> 同
data-theme (例如來自 cookie)— Svelte 輔助工具倉庫附帶一個可運行嘅 SvelteKit cookie 範例,而其他目錄為佢哋嘅技術棧記錄同一個模式。