[React] 다크 모드가 어디서 설정되는지 모르겠을때

분명 index.html, js 파일을 샅샅이 뒤져봐도 다크모드가 될 만한 요소가 없을 때

답은 tailwind.css에 있었다. 밑의 prefers-color-scheme: dark 이 녀석 때문에 저녁만 되면 자동으로 dark 모드가 되었던 것이다.

이 친구를 제거해주니 dark 모드가 적용이 안되었다.

반대로 다크모드를 시간에 따라 자동으로 변경되도록 하고 싶다면 이 요소를 추가하면 되겠다.

@media (prefers-color-scheme: dark) {
  .dark\:border-white\/20 {
    border-color: rgb(255 255 255 / 0.2);
  }

  .dark\:bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
  }

  .dark\:bg-white\/5 {
    background-color: rgb(255 255 255 / 0.05);
  }

  .dark\:text-gray-100 {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity));
  }

  .dark\:text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
  }

  .dark\:hover\:bg-gray-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity));
  }

  .dark\:hover\:bg-gray-900:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity));
  }
}

추가) css 파일에서 지우면 rebuilding이 되면 좀비같이 다시 태어날 거다. 이를 막기 위해서 tailwind.config.js에서 다음과 같이 설정해주면 된다.

module.exports = {
  darkMode: 'class',
  // ...
}

기존에는 'media'로 되어 있는 걸 'class'로 바꾸게 되면 수동적으로 바꿀 수 있게 된다. 즉 자동으로 안바뀐다.