Lily Design System™

Теми

Компонентите на 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 помощникът е headless бутон-икона + listbox, който притежава целия жизнен цикъл на темата: зарежда избраната таблица със стилове, като сменя един управляван <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 (класова кука .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, а другите каталози документират същия модел за своите стекове.

Следващи стъпки

  • Помощници за предпочитания — същият модел за език, размер на текста, споделяне и въвеждане на дата/час.
  • Допринесете с тема — всяка е една самостоятелна таблица със стилове, насочена към класовите куки; вижте приноса.

Въпроси по пътя? Страницата за помощ е пълна с отговори — а ако някоя стъпка може да е по-ясна, кажете ни и с радост ще подобрим ръководството.