Tailwind css를 이용해서 Dark(다크)모드를 구현해보자 !!!

안녕하세요 ! 

저번 반응형 페이지에 이어서 이번에는 다크모드를 구현해보겠습니닷 !!! 

다크모드도 Tailwind css를 이용하면 너무너무 간단하게 되니까 연습 해봅시다 ! 

 

먼저 저는 리액트 환경에서 진행할것입니다 !! 

 

먼지 기존의 화면을 봐볼까요?? 

 

기존 화면

 

저렇게 있습니다 !!! 

그리고 아래에 보시면 다크모드라고 원을 만들었습니다 !! 이제 구현을 해볼까요?? 

  const [dark, setDark] = useState("다크모드"); // 다크모드 있는곳 텍스트 ! 

  const toggleDarkMode = () => {
    if (localStorage.getItem("theme") === "dark") {
      // 다크모드 -> 기본모드 
      localStorage.removeItem("theme"); // 다크모드 삭제
      document.documentElement.classList.remove("dark");  // html class에서 dark클래스 삭제 !  
      setDark("기본모드");
    } else {
      // 기본모드 -> 다크모드
      document.documentElement.classList.add("dark"); // html의 class에 dark 클래스 추가 ! 
      localStorage.setItem("theme", "dark");  // localstorage에 dark를 추가해서 ! useEffect에서 처음에 검사해서 다크모드인지 판단해주려고 ! 
      setDark("다크모드");
    }
  };

  useEffect(() => {
    // 처음에 다크모드인지 판단해서 뿌려주기 !! ( 나중에는 상태관리를 해도 괜찮습니다 ! )
    if (localStorage.getItem("theme") === "dark") {
      document.documentElement.classList.add("dark");
    }
  }, []);

먼저 간단하게 구현해봤습니다ㅣ ! 

toggleDarkMode는 다크모드 버튼을 눌렀을 때 입니다 !!! 

 

document.documentElement.classList.add("dark");

첫번째로 ! 여기서 중요한건 이것입니다 !! 

 

두번째로 중요한것은 !!! 

 

Tailwind css의 dark를 이용해서 dark모드 구현 ! 

먼저 정말 짧게 써봤습니다 ! 일단 화면부터 보고갑시다 !! 

먼저 ! 위에와 완전 다릅니다 !!! 주위가 어두워졌죠??? 

그리고 html에 dark클래스가 생겼습니다 !!! 

 

 

응?? 저거 html에 dark 클래스만 있으면 되는건가??? 

 

물론 아닙니다!!! 

 

그럼 코드를 봐볼까요?? 

아래 처럼 !! 그냥 클래스 안에다가 「dark」를 지정해주면 됩니다 !! 

그러고 ! 다크모드 일 때의 폰트라던가 글색상 등등 원하는데로 바꿔주면 됩니다 !!! 너무나 쉽지않나요? 

 

밑에는 가볍게 몇가지만 더 해보겠습니다 ! 

 

밑에 처럼 바꿔줄수도 있습니다 !!! 원하는데로 !! ㅎㅎㅎ 

 

 

 

정리하자면 ! 

먼저 !!! tailwind css에서 다크모드로 구현을 하려면 !! 

 

1.  html의 class에 dark가 있어야 하는것입니다 !  ( 아니면 자신이 html에 속성을 직접 넣어줘서 하는 방법도 있는데 제가 아는 방법에선 저게 가장 쉬운것같습니다 ! )

 

2. dark를 클래스에 직접 넣어서 ! 원하는 데로 커스텀 하는것 ! 

 

 

자 ! 요즘 거의 안쓰는곳이 없다싶이 하는 dark모드에 대해서 알아봤습니다 !! 

정말 손쉽게 구현가능하니 !!! 꼭 기능을 넣어봅시다 ^^