기존의 다크모드를 적용하는 법

• CSS에는 prefers-color-scheme라는 미디어 쿼리 조건이 있다.
• 이를 사용해 다크모드에서의 스타일 변경을 해줄 수 있다.

body {
  background-color: white;
}

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

• 문제는 미디어 쿼리 내부에 스타일 설정을 따로 해주어야 하기 때문에, css 작성을 하는 코드가 길어진다는 단점을 가지고 있다.

light-dark()

• light-dark 함수는 이를 해결하고, css 구문을 단순화하기 위해 등장하였다.
• 함수 내부에 라이트/다크 모드 시 적용할 색상을 적용하기만 하면, 해당 모드에 맞게 색을 적용시켜준다.
• 현재는 최신 파이어폭스에서만 사용 가능하지만, 다른 브라우저에서도 지원 예정에 있다.
• 색상값에만 적용 가능하며, 다른 스타일에는 사용이 제한됨에 유의하자.

:root {
/* 현재 사이트에서 라이트, 다크모드를 지원함을 알림 */
  color-scale: light dark;
}

:root {
/* 라이트 모드에서는 #333, 다크 모드에서는 #ccc 값을 반환 */
  --text-color: light-dark(#333, #ccc); 
}

p {
/* 다크 모드로 고정 */
  color-scheme: dark;
  background-color: light-dark(#FFF, #000);
}

출처:
https://www.amitmerchant.com/the-new-light-dark-function-to-switch-theme-color-in-css/