라이트, 다크모드 쉬운 적용 light-dark()

 light-dark() 함수를 이용해 라이트 다크모드를 쉽게 적용해보자

https://caniuse.com/?search=light-dark

"light-dark" | Can I use... Support tables for HTML5, CSS3, etc

삼성인터넷 브라우저를 제외하고 무난히 사용가능하다

mdn web docs의 내용이다

아래의 형태로 사용할 수 있다

:root {
  color-scheme: light dark;
}
body {
  color: light-dark(#333b3c, #efefec);
  background-color: light-dark(#efedea, #223a2c);
}

/* Named color values */
color: light-dark(black, white);

/* RGB color values */
color: light-dark(rgb(0 0 0), rgb(255 255 255));

/* Custom properties */
color: light-dark(var(--light), var(--dark));

Values

Functional notation: light-dark(light-color, dark-color)

light-color

<color> value to be set for light color-scheme.

dark-color

<color> value to be set for dark color-scheme.

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark