CSS light-dark() 함수

정의와 사용법

CSS의 light-dark() 함수는 두 가지 색상 값을 설정할 수 있으며, 사용자가 밝은 테마를 설정하면 첫 번째 값을 반환하고, 어둡은 테마를 설정하면 두 번째 값을 반환합니다。

사용하려면 light-dark() 함수, CSS의 color-scheme 속성은 light dark로 설정되어야 합니다。

ヒント：사용자는 운영 체제 설정(밝은 테마 또는 어둡은 테마) 또는 브라우저 설정을 통해 자신의 색상 패턴 선호도를 지정할 수 있습니다。

예제

사용 light-dark() 함수는 두 가지 색상 값을 설정할 수 있습니다：

:root {
  color-scheme: light dark;
  --light-bg: snow;
  --light-color: black;
  --dark-bg: black;
  --dark-color: snow;
}
* {
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  color: light-dark(var(--light-color), var(--dark-color));
}

직접 테스트해 보세요

CSS 문법

light-dark(lightcolor, darkcolor)

기술 세부 사항

브라우저 지원

표格에 나타난 숫자는 이 함수를 최초로 완전히 지원하는 브라우저 버전을 나타냅니다。

관련 페이지

참조:CSS color-scheme 속성

참조:CSS var() 함수

강의:CSS 변수