prefers-color-scheme

시스템 혹은 브라우저의 색상 테마를 감지하여 스타일 적용하주는 미디어 쿼리

/* 라이트 모트 */
@media (prefers-color-scheme: light) {
	color: #000;
}

/* 다크 모드 */
@media (prefers-color-scheme: dark) {
	color: #fff;
}

파비콘 라이트/다크 모드

svg 파일에 지정하기

svg 파일 내부에 style 속성으로 prefers-color-cheme 속성 지정하기
변경 될 부분의 색상을 fill="currentColor"로 변경하여 color값을 상속받게 한다.
fill="none"일 경우 style 속성에서 fill 속성을 제어.
새로고침을 해야 적용이 된다.

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="65.px" height="64px" viewBox="0 0 65.000000 64.000000" preserveAspectRatio="xMidYMid meet">
  <style>
    g{
      color: #000;

      @media (prefers-color-scheme: dark) {
        color: #fff;
      }
    }
  </style>
  <rect width="100%" height="100%" fill="#F3792D" />
  <g transform="translate(0.000000,64.000000) scale(0.100000,-0.100000)"
    fill="currentColor" stroke="none">
    <path d="M142 402 l78 -47 0 -82 0 -83 110 0 110 0 0 30 0 29 -92 3 -93 3 -3
    98 -3 97 -92 0 -92 0 77 -48z"/>
    <path d="M440 405 c0 -25 3 -45 8 -45 4 0 39 21 77 45 l70 45 -77 0 -78 0 0
    -45z"/>
  </g>
</svg>

media로 직접 적용하기

link태그 안의 media 속성에 prefers-color-cheme 속성 지정하기
새로고침을 하지 않아도 적용된다.

<link rel="icon" media="(prefers-color-scheme: dark)" href="/src/assets/favicon/moon.svg" />
<link rel="icon" media="(prefers-color-scheme: light)" href="/src/assets/favicon/sun-cloud.svg" />

color-scheme

브라우저가 색상 테마를 감지하여 해당 테마에 맞는 스타일을 적용한다.

/* color-scheme을 사용하기 위한 필수 선언 */
:root {
	color-scheme: light dark;
}

light-dark()

색상 테마를 감지하여 색상 선택

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