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(...)명시도가 0이므로 직접 작성한 규칙이 항상 이깁니다. 간단합니다: 

/* 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); }

서버 렌더링 관련 참고

이 헬퍼는 모든 DOM 쓰기를 프레임워크의 마운트/이펙트 수명 주기 안에서 수행하므로 구조적으로 SSR에 안전합니다. 첫 페인트 때의 깜빡임을 피하려면, 서버에서(예: 쿠키를 보고) 초기 테마의 <link> 와 data-theme 를 렌더링하세요. Svelte 헬퍼 저장소에는 실행 가능한 SvelteKit 쿠키 예제가 있고, 다른 카탈로그도 각자의 스택에 맞는 같은 패턴을 문서화하고 있습니다.

다음 단계

  • 환경설정 헬퍼 — 언어, 텍스트 크기, 공유, 날짜/시간 입력에도 같은 패턴이 쓰입니다.
  • 테마 기여하기 — 각 테마는 클래스 훅을 대상으로 하는 독립된 스타일시트 하나입니다. 다음을 보세요: 기여 안내.

진행하다가 궁금한 점이 있다면 도움말 페이지 에 답이 많이 있습니다. 어떤 단계가 더 명확해질 수 있다면 알려 주세요 . 기꺼이 튜토리얼을 개선하겠습니다.