테마와 스타일

공통 테마를 적용하고, 필요한 범위에서 디자인 토큰을 조정합니다.

라이트·다크 테마#

컴포넌트를 감싸는 요소에 sy-theme과 테마 클래스를 지정합니다. 페이지 전체 또는 특정 영역에 적용할 수 있습니다.

Light

sy-theme-light

Primary

Default

Disabled

Dark

sy-theme-dark

Primary

Default

Disabled

같은 Button에 서로 다른 테마를 적용한 실제 예제입니다. 사이트의 테마를 전환해도 두 예제의 테마는 유지됩니다.

HTML

<section class="sy-theme sy-theme-light">
  <sy-button variant="primary">Primary</sy-button>
  <sy-button>Default</sy-button>
  <sy-button disabled>Disabled</sy-button>
</section>

<section class="sy-theme sy-theme-dark">
  <sy-button variant="primary">Primary</sy-button>
  <sy-button>Default</sy-button>
  <sy-button disabled>Disabled</sy-button>
</section>

디자인 토큰#

디자인 토큰은 CSS 커스텀 프로퍼티로 전달됩니다. 예를 들어 Primary Button의 배경색을 변경하려면 컴포넌트가 사용하는 상태별 토큰을 지정합니다.

CSS

.brand-theme {
  --button-primary-background-enabled: #1677ff;
  --button-primary-background-hover: #4096ff;
  --button-primary-background-active: #0958d9;
  --button-primary-background-focus: #1677ff;
}

스타일 적용 범위#

사용자 정의 클래스를 테마 영역에 추가합니다. 상태별 색상과 텍스트 대비를 함께 확인하고, 공통 스타일은 여러 화면에서 같은 토큰을 사용하도록 구성하세요.

HTML

<div class="sy-theme sy-theme-light brand-theme">
  <sy-button variant="primary">브랜드 색상 버튼</sy-button>
</div>

컴포넌트 내부의 HTML 구조에 의존하는 선택자보다 공개된 속성, 클래스와 토큰을 우선 사용하세요.