[React] 다크모드 구현하기 🌝🌚

리액트로 다크모드 구현하기

다크모드는 다양한 브랜드들과 웹 사이트에서 이제는 거의 필수라고 봐도 될 정도로 흔하게 적용되는 기능 중 하나이다.
나 역시 휴대폰, 노트북, 채팅 어플 등에서 다크모드를 매우 애용하고 있고 프론트엔드 개발자라면 이제는 필수 기능이 된 다크모드를 구현할 줄 알아야한다고 생각해서 이번 개인 프로젝트 기획에 추가하게 되었다.

🤓 진행 순서

1. 라이트모드, 다크모드 디자인
2. 라이트/다크 theme.js 세팅
3. 다크모드 구현
   • 토글버튼
   • 상태 관리
   • 모드 유지 기능

---

🎨 디자인 (feat. Figma)

전체적인 라이트/다크 모드의 디자인은 위와 같이 만들어보았다.
각 컴포넌트들은 투명도를 주고 전체적인 색감은 파란빛이 돈다. 다크모드일 때에는 완전히 검은색이 아니라 아주 어두운 남색계열로 골랐다.
다크모드의 경우, 폰트 컬러를 #FFFFFF로 하니까 눈이 아파서 약간 회색빛이 들어가게 #FAFAFA로 나중에 수정했다.

귀여운 다크모드 토글버튼도 간단히 디자인했다!
디자인이라고 하기도 민망하지만..😅 각 컴포넌트에 준 투명도를 토글버튼에도 똑같이 줘서 통일감을 주었다. 구글링해보니 다른 분들은 되게 멋있게 잘 만드셨던데 난 일단 초초간단으로ㅎㅎ..

---

⚙️ theme.js 세팅

export const lightTheme = {
  fontSizes,
  colors: {
    colorMain: "#ffffff4d",
    colorBg: "#F7F7FA",
    colorMainFont: "#000000",
    colorSkyBlue: "#E6F4FE",
    colorBlue: "#0057BC",
    colorDisabled: "#C4C4C4",
    colorGray: "#D9D9D9",
    colorDarkGray: "#a5a4a4",
    colorWhite: "#FFFFFF",
    colorRed: "#FC585A",
    colorDiRed: "#FE9090",
    colorShadow: "0 3px 6px rgba(0, 0, 0, .16)",
    colorDarkShadow: "0 3px 6px rgba(0, 0, 0, .5)",
  },
};

export const darkTheme = {
  fontSizes,
  colors: {
    colorMain: "#585D6E4d",
    colorBg: "#1B1D25",
    colorMainFont: "#FAFAFA",
    colorSkyBlue: "#E6F4FE",
    colorBlue: "#3190ff",
    colorDisabled: "#C4C4C4",
    colorGray: "#D9D9D9",
    colorDarkGray: "#a5a4a4",
    colorWhite: "#FFFFFF",
    colorRed: "#FC585A",
    colorDiRed: "#FE9090",
    colorShadow: "0 4px 7px rgb(68 68 68 / .8)",
    colorDarkShadow: "0 3px 6px rgba(255, 255, 255, .5)",
  },
};

라이트모드와 다크모드에 각각 사용할 theme을 설정해주었다.

theme 적용

App.js

const [themeMode, setThemeMode] = useState(lightTheme);
const theme = themeMode === "lightTheme" ? lightTheme : darkTheme;

return (
   <>
     <ThemeProvider theme={theme}>
       <Globalstyle />
       <Routes>
         <Route
           path="/home"
           element={<Home themeMode={themeMode} />}
          />
         <Route path="/signup" element={<Signup />} />
         <Route path="/" element={<Login />} />
       </Routes>
     </ThemeProvider>
   </>
);

ThemeProvider를 최상위 파일인 App.js에 적용시킨다.
이때, props로 theme를 전달받는데 theme는 themeMode가 라이트면 라이트모드 컬러칩을 할당받고 그렇지 않으면 다크모드 컬러칩을 할당 받는다. (컬러칩 : 위에서 세팅해준 theme.js)

최상위 파일인 App.js에 ThemeProvider를 적용시키면 이제 모든 컴포넌트에서 사용할 수 있게 된다.

토글 버튼 구현

import React from "react";
import { ThemeModeWrapper } from "./styled";

export const ThemeModeButton = ({ toggleTheme, themeMode }) => {
  return (
    <ThemeModeWrapper onClick={toggleTheme}>
      {themeMode === "lightTheme" ? "🌝" : "🌚"}
    </ThemeModeWrapper>
  );
};

// styled.jsx
import { css, styled } from "styled-components";

export const ThemeModeWrapper = styled.button`
  position: absolute;
  top: 0;
  right: 0;

  width: 80px;
  margin: 10px;
  border: none;
  border-radius: 10px;

  ${({ theme }) => {
    return css`
      background-color: ${(props) => props.theme.colors.colorMain};
      box-shadow: ${(props) => props.theme.colors.colorShadow};
    `;
  }}
`;

버튼을 클릭하면 onClick 이벤트를 통해 toggleTheme 함수가 실행되도록 했다.
그리고 현재 themeMode도 props로 전달받아 라이트모드이면 🌝을 표시하고, 다크모드이면 🌚를 표시하도록 하고 버튼의 배경과 그림자 스타일도 앞서 정의했던 theme에 맞게 변경되도록 작성했다.

토글 버튼 함수 구현 - 상태관리

const theme = themeMode === "lightTheme" ? lightTheme : darkTheme;

const toggleTheme = () => {
  if (themeMode === "lightTheme") {
    setThemeMode("darkTheme");
    window.localStorage.setItem("theme", "darkTheme");
  } else {
    setThemeMode("lightTheme");
    window.localStorage.setItem("theme", "lightTheme");
  }
};

토글버튼 클릭 시 동작할 toggleTheme 함수를 구현했다.
현재 themeMode가 "lightTheme"인지 "darkTheme"인지 판별하고, 그에 따라 상태값을 업데이트하고 로컬 스토리지에도 저장한다.

다크모드 유지 - localStorage

const localThemeMode = window.localStorage.getItem("theme" || "lightTheme");
const [themeMode, setThemeMode] = useState(localThemeMode);

그리고 기존에는 themeMode의 초깃값이 "lightTheme"였는데 로컬스토리지에 저장된 값을 가져와서 themeMode의 초깃값으로 넣어주었다. 이렇게하면 다크모드를 하고 새로고침을 했을 때에도 로컬에 저장된 값을 가져와서 현재 themeMode의 상태값으로 넣어주기 때문에 그 기능을 유지할 수 있다.

---

✨ 결과

---

🧐 리팩토링을 한다면?

✔️ context, redux, recoil 등을 이용해 상태관리해보기
✔️ 커스텀 훅 만들어보기