테마
테마 (Theming) — 다크 테마 개발자 핸드북
다크 테마를 애플리케이션에서 손쉽게 켜고 끄고, 차트와 이미지처럼 추가 작업이 필요한 부분까지 포함해 다크 테마 지원을 완성하는 방법을 알려드릴게요.
출처: 문서
본문
다크 테마 활성화 (Enabling dark theme)
PatternFly에서는 다크 테마를 기본으로 제공해요. 다크 테마를 활성화하려면 애플리케이션의 <html> 태그에 pf-[version]-theme-dark 클래스(예: pf-v6-theme-dark)를 추가하면 돼요. 이 클래스는 동적으로 추가해 애플리케이션에서 다크 테마를 켜고 끌 수 있어요.
다크 테마는 브라우저의 prefers-color-scheme 미디어 쿼리를 기반으로도 적용할 수 있어요. 이 방법을 쓸 때는 JavaScript로 미디어 쿼리를 감지해 pf-[version]-theme-dark 클래스를 적용하는 것을 권장해요. 이렇게 하면 사용자 선호에 따라 다크 테마를 토글하도록 단일 클래스를 조작할 수 있어요. Adam Argyle가 prefers-color-scheme 미디어 쿼리와 다크 테마를 토글하는 수동 버튼을 함께 사용해 JavaScript로 다크 테마 선호를 관리하는 훌륭한 글을 썼어요.
우리 토큰 리소스에는 라이트 테마와 다크 테마 양쪽 스타일이 포함돼 있어요. 다크 테마가 활성화되면 제품은 다크 테마 토큰을 자동으로 끌어와서 시각적 스타일을 적절히 적용해요.
다크 테마를 지원하려면 추가 작업이 필요한 유일한 기능은 차트(charts)와 이미지(images)예요.
차트 (Charts)
다크 테마와 함께 차트를 사용하려면 차트 개발 지침(charts)을 참고하세요.
이미지 (Images)
라이트 테마와 다크 테마에 적응하는 이미지를 만들려면 몇 가지 방법을 쓸 수 있어요:
- 인라인 SVG 사용하기: PatternFly 색상 토큰으로 설정된
fill색상을 가진 인라인 SVG를 사용하면 라이트·다크 테마에 본질적으로 적응해요. - 양쪽에서 잘 어울리는 색상으로 이미지 만들기: 라이트와 다크 테마 양쪽에서 잘 보이는 색상으로 이미지를 만드세요. 이 색상들은 WCAG AA 대비 요구사항을 충족해야 해요.
- 컨테이너 활용하기: 배경색, 테두리 색, 테두리 반경(border-radius), 패딩/간격을 활용해 동적이거나 사용자가 제공하는 이미지를 담을 수 있는 컨테이너를 만드세요.
- CSS로 두 이미지 변형 사이를 교체하기:
<img src="/light-theme.jpg" class="show-in-light" />
<img src="/dark-theme.jpg" class="show-in-dark" />
<style>
.show-in-dark,
.pf-v6-theme-dark .show-in-light {
display: none;
}
.pf-v6-theme-dark .show-in-dark {
display: revert;
}
</style>
모범 사례 (Best practices)
애플리케이션이 다크 테마를 지원하도록 하는 가장 중요한 단계는 일반 테마 모범 사례를 따르는 것이에요. 특히 하드코딩된 값 대신 디자인 토큰을 사용하는 등 이런 지침을 지키면 대부분의 도입 과제가 해결돼요.
추가로 다음 핵심 사항을 기억하세요:
- 정적 이미지를 계획하세요: 라이트·다크 배경 양쪽과 호환되는 SVG를 쓸 수 없다면 이미지의 두 버전을 만들고 활성 테마에 따라 바꿔야 해요.
- 두 테마 모두에서 커스텀 컴포넌트를 테스트하세요: 커스텀 컴포넌트를 만들 때는 항상 라이트와 다크 테마 양쪽에서 작업 결과를 확인하세요. 이렇게 하면 하드코딩된 색상이나 예상대로 적응하지 않는 스타일 같은 문제를 일찍 발견할 수 있어요.