[react-project] Darkmode 만들기 (tailwind, recoil)

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx,tsx}"],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        "accent-blue": "#1976D2",
      },
      fontFamily: {
        logo: ["logo"],
      },
    },
  },
  plugins: [],
};

- tailwind.config.js에 darkMode: "class" 추가하여 다크모드 스타일 적용하기

 

 

 

 

* {
  @apply transition-colors duration-100;
}

.dark {
  background-color: #23272f;
  color: #fff;
}

- tailwind를 관리하는 css에서 dark 스타일 작성하기

- 전체 스타일에 색상의 변화 효과를 1초를 주어 부드럽게 다크모드, 라이트모드 전환하게 해주기

 

 

 

import { atom } from "recoil";

export const darkModeState = atom({
  key: "darkModeState",
  default: false,
});

- recoil을 사용하여 darkmode을 전역 상태로 관리하기

 

 

 

 

 

const DarkmodeBtn = () => {
  const [darkMode, setDarkMode] = useRecoilState(darkModeState);

  const toggleDarkMode = () => {
    setDarkMode(!darkMode);
  };

  return (
    <>
      <button onClick={toggleDarkMode}>
        <img
          className={`w-[70%] ${darkMode ? "hidden" : ""}`}
          src={Darkmode_icon}
          alt="dark mode icon"
        />
        <img
          className={`w-[70%] ${darkMode ? "" : "hidden"}`}
          src={Lightmode_icon}
          alt="light mode icon"
        />
      </button>
    </>
  );
};

- DarkmodeBtn 컴포넌트를 만들고

- useRecoilState을 사용해서 만들어두었던 recoil darkModeState 사용하기

- 다크모드 버튼에 클릭이벤트로 toggle함수를 만들어서 darkmode일때는 ligth_icon 이미지에 보이기 설정

 

 

 

 

 

const Header = () => {
  const darkMode = useRecoilValue(darkModeState);

  return (
    <>
      <div className={`${darkMode ? "dark" : ""}}>
          <DarkmodeBtn />
      </div>
    </>
  );
};

export default Header;

- Header 컴포넌트

- useRecoilValue로 darkModeState를 사용하여 div class에 darkmode일때 dark 스타일 적용

 

 

 

 

 

function App() {
  const darkMode = useRecoilValue(darkModeState);

  useEffect(() => {
    document.body.classList.toggle("dark", darkMode);

    return () => {
      document.body.classList.remove("dark");
    };
  }, [darkMode]);

  return (
    <>
      <CssBaseline />
      <div className="app">
        <Header />
        <Routes>
          <Route path="/" element={<Main />} />
        </Routes>
      </div>
    </>
  );
}

- app.js

- useRecoilValue 훅을 사용하여 darkModeState의 값을 가져오기

   → 다크 모드가 활성화되었는지 여부확인!

 

- useEffect를 사용하여 컴포넌트가 마운트되거나 darkMode 상태가 변경될 때마다 실행

  → document.body.classList.toggle을 통해 다크 모드 클래스인 "dark"를 추가하거나 제거함!

 

 

 

 

 <div className="dark:text-black">text<div>

- 다크모드를 적용하고 싶을 경우 className="dark:원하는걸" 적으면 된다!

---

※ tailwind component로 만들어둔 button에 다크모드를 적용시키고 싶을경우

const Button = ({ variant, size, children, label, ...props }) => {
  const darkMode = useRecoilValue(darkModeState);
  return (
    <button
      className={cn(ButtonVariants({ variant, size }), {
        "dark:bg-accent-blue dark:text-white": darkMode,
      })}
      {...props}
    >
      {children && children}
      {label && label}
    </button>
  );
};