[다크모드] light-dark 함수로 쉽게 구현

light-dark() 함수

먼저 영상에 나온 light-dark()함수를 써서,
prefer-color-scheme값이 dark인 상태에서 보여줄 화면을 구성하고 싶은데요
아 근데 prefer-color-scheme란..
여러분이 설정한 "난 다크모드가 좋아 or 라이트모드가 좋아" 시스템 설정입니다
처음 들어보셨다면 그냥 light상태일걸요? 저도 건드린적 없습니다 딱히
암튼간에

:root {
  color-scheme: light dark;
}

 

일단 이렇게 해서 브라우저에게 "여기는 light와 dark 테마 모두 지원합니다~"라고 알려줍시다

이제, 라이트모드와 다크모드에서 각각 달라야 하는 색상이 있다면 light-dark()함수를 쓰면 되는데
예를 들어 이렇게 되어있다고 합시다

body {
  color: black;
  background-color: white;
}

음.. 그러면.. prefers-color-scheme값이 dark일 때는..

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

이렇게 해야할까요??
너무 귀찮은데요 ㅜㅜ

근데 light-dark()라는 채신기술과 함께라면

body {
  color: light-dark(black, white);
  background-color: light-dark(white, black);
}

매우 간단해졌네요??

light-dark(light일 때의 색상, dark일 때의 색상) 이렇게 써주면 됩니다.

참고

🔅 다크모드 5초컷 with CSS 채신기술 light-dark()함수 - (Gatsby 블로그)