CSS Custom Properties(CSS 변수)를 활용하여 다크 모드, 브랜드 테마 등 동적인 테마 시스템을 구축하는 방법을 설명하고, JavaScript와의 연동 및 폴백(fallback) 전략에 대해 구체적인 코드 예시와 함께 논해주세요.

CSS Custom Properties, 즉 CSS 변수를 활용하면 동적인 테마 시스템을 효과적으로 구축할 수 있습니다. 먼저 :root에 테마의 기본 색상들을 변수로 정의합니다. 예를 들어 --primary-color: blue; 와 같이 설정하고, var(--primary-color)를 사용하여 요소에 적용합니다.

다크 모드처럼 테마를 변경하려면, 미디어 쿼리나 JavaScript를 사용하여 변수 값을 재정의합니다. JavaScript를 사용할 경우, 특정 이벤트 발생 시 documentElement의 style 속성을 통해 변수 값을 변경할 수 있습니다.

document.documentElement.style.setProperty('--primary-color', 'darkgreen');

폴백 전략으로는, CSS 변수를 지원하지 않는 브라우저를 위해 일반 CSS 속성 값을 먼저 정의하고, 그 다음에 변수를 사용하는 방법을 고려할 수 있습니다. @supports 규칙을 사용하여 CSS 변수 지원 여부에 따라 다른 스타일을 적용할 수도 있습니다. 예를 들어 @supports not ( --example: value ) { /* CSS 변수 미지원 시 스타일 */ } 와 같이 사용할 수 있습니다.