ToDo: 앱 전반 Tailwind로 white모드 Dark모드 구분 필요.

https://tailwindcss.com/docs/dark-mode 참조!

요지는 tailwind.config.js에

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

를 추가하면, 어떤 하위 Element의 className에서 bg-white dark:bg-black 이렇게 사용했을 때

상위 Element의 className에 "dark" 가 있으면 bg-white가 무시되고 dark:bg-black이 적용된다~ 입니다.

ex. 다크모드 켜짐

<html class="dark">  // <- 최상단에 class="dark"가 있지요?
<body>
  <!-- Will be black -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

ex. 다크모드 꺼짐

<html>
<body>
  <!-- Will be white -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

저희 경우에는 흠, Header.tsx 같은 곳에 버튼 만들어서, 눌렀을 때 태그나 태그를 document.querySelector() 같은거로 직접 조작하는 게 어떨까 싶어요

modulersYJ / ganoverflow-front

ToDo: 앱 전반 Tailwind로 white모드 Dark모드 구분 필요. #11