CSS만 사용해 PWA에서 라이트 및 다크 테마를 지원하는 방법

Source: Dev.to

Overview

웹 애플리케이션은 이제 라이트 모드와 다크 모드를 모두 지원해야 합니다. 사용자는 선호하는 외관을 선택할 수 있어야 하며, 이는 브라우저가 light-dark() 함수 또는 prefers-color-scheme 미디어 기능을 지원할 때 순수 CSS만으로 구현할 수 있습니다.

Using light-dark() (CSS 4)

브라우저가 light-dark() 함수를 구현하고 있다면, 시스템 또는 브라우저 테마에 따라 자동으로 값을 전환하는 CSS 커스텀 프로퍼티를 정의할 수 있습니다:

/* style.css */
:root {
  color-scheme: light dark;
  --background: light-dark(white, black);
  --color: light-dark(black, white);
}

• 첫 번째 인수(white, black)는 라이트 테마에 적용됩니다.
• 두 번째 인수(black, white)는 다크 테마에 적용됩니다.
• 어떤 커스텀 프로퍼티 이름이든 사용할 수 있으며, 동일한 light-dark() 구문을 따르기만 하면 됩니다.

추가적인 JavaScript나 프레임워크 코드는 필요하지 않습니다.

Fallback with prefers-color-scheme

light-dark()를 지원하지 않지만 prefers-color-scheme 미디어 쿼리를 지원하는 브라우저의 경우, 간단한 미디어 규칙을 사용합니다:

/* style.css */
:root {
  color-scheme: light dark;
  --background: white;
  --color: black;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: black;
    --color: white;
  }
}

브라우저가 light-dark()와 prefers-color-scheme 둘 다 지원하지 않을 경우, CSS는 아무 효과도 없으며 실질적인 대체 수단은 없습니다.

Limitations

• 이 접근 방식은 시스템 전체 테마 설정(운영 체제 또는 브라우저)만을 반영합니다. 앱 내에서 토글을 제공하지는 않습니다.
• Internet Explorer를 포함한 구형 브라우저는 light-dark()와 prefers-color-scheme 모두를 지원하지 않으므로 테마가 자동으로 변경되지 않습니다.
• 애플리케이션 별 테마 전환을 제공하거나 파비콘, 매니페스트 색상 및 기타 UI 요소를 업데이트하려면 추가적인 JavaScript가 필요합니다.

Extending the Solution

1. SCSS Variables – 원시 색상 값을 SCSS 변수로 교체하여 유지 보수를 용이하게 합니다.
2. JavaScript Enhancements – 사용자의 선호도를 감지하고 수동 오버라이드를 저장하며 동적으로 업데이트합니다:
   • 메타 theme-color
   • PWA 매니페스트 아이콘
   • 선택된 테마를 반영해야 하는 기타 DOM 요소들
3. Framework Integration – 순수 CSS 방법은 프레임워크와 무관하게 작동하지만, 필요에 따라 컴포넌트 라이브러리(예: styled‑components)에 통합할 수 있습니다. 필수는 아닙니다.

위의 CSS 스니펫을 기본으로 유지하고, 필요한 경우에만 JavaScript를 추가함으로써 최소한의 복잡도로 완전한 다크 테마 지원을 달성할 수 있습니다.