Context API로 다크모드 구현

갑자기 해보고 싶어 건드려본 다크모드 구현

Context API

전역적 상태관리 도구로 Context API를 사용했다.

context 코드

import { createContext, useContext, useEffect, useState } from 'react';

const DarkModeContext = createContext();

const updateDarkMode = darkMode => {
  if (darkMode) {
    localStorage.theme = 'dark';
    document.documentElement.classList.add('dark'); // html 클래스 추가
  } else {
    localStorage.theme = 'light';
    document.documentElement.classList.remove('dark');
  }
};

export function DarkModeProvider({ children }) {
  const [darkMode, setDarkMode] = useState(false);

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

  useEffect(() => {
    const isDark =
      localStorage.theme === 'dark' ||
      (!('theme' in localStorage) &&
        window.matchMedia('(prefers-color-scheme: dark)').matches);
    // 사용자 기종 다크모드 확인
    setDarkMode(isDark);
    updateDarkMode(isDark);
  }, []);

  return (
    <DarkModeContext.Provider value={{ darkMode, toggleDarkMode }}>
      {children}
    </DarkModeContext.Provider>
  );
}

export const useDarkMode = () => useContext(DarkModeContext);

리액트에서 제공하는 createContext 함수를 이용하여 Context생성

const DarkModeContext = createContext();

컴포넌트끼리 공유하고자 하는 값을 value 라는 Props로 설정하면 해당 값을 전역적으로 접근하여 사용할 수 있다

  return (
    <DarkModeContext.Provider value={{ darkMode, toggleDarkMode }}>
      {/* // value에 사용하고자 하는 값들을 담아줌 = */}
      {children}
    </DarkModeContext.Provider>
  );

만든 Provider 컴포넌트로 다크모드를 적용할 컴포넌트들을 감싸주면 되는데
간단하게 웹 페이지 전체를 감싸주기 위해 Router 연결해주던 부분을 통째로 감싸주었다.

const App = () => {
  return (
    <DarkModeProvider>
      <Router />
    </DarkModeProvider>
  );
};

export default App;

토글 버튼 만들기

이왕할거 MUI 써서 예쁜 토글 버튼 만들기

MUI 사용을 위한 패키지 설치

$ npm install @mui/material @emotion/react @emotion/styled

필요한 UI부분 잘 골라서 컴포넌트화 시켜준다.

import * as React from 'react';
import { styled } from '@mui/material/styles';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';
import { useDarkMode } from '../../context/Darkmode';

const MaterialUISwitch = styled(Switch)(({ theme }) => ({
  width: 62,
  height: 34,
  padding: 7,
  '& .MuiSwitch-switchBase': {
    margin: 1,
    padding: 0,
    transform: 'translateX(6px)',
    '&.Mui-checked': {
      color: '#fff',
      transform: 'translateX(22px)',
      '& .MuiSwitch-thumb:before': {
        backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
          '#fff'
        )}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`,
      },
      '& + .MuiSwitch-track': {
        opacity: 1,
        backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',
      },
    },
  },
  '& .MuiSwitch-thumb': {
    backgroundColor: theme.palette.mode === 'dark' ? '#003892' : '#001e3c',
    width: 32,
    height: 32,
    '&:before': {
      content: "''",
      position: 'absolute',
      width: '100%',
      height: '100%',
      left: 0,
      top: 0,
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center',
      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
        '#fff'
      )}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`,
    },
  },
  '& .MuiSwitch-track': {
    opacity: 1,
    backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',
    borderRadius: 20 / 2,
  },
}));

토글버튼에 사용하기 위해 context에 설정한 value들을 연결해주고

export default function DarkToggle() {
  const { darkMode, toggleDarkMode } = useDarkMode();
  return (
    <FormControlLabel
      control={
        <MaterialUISwitch
          sx={{ m: 1 }}
          checked={darkMode}
          onChange={toggleDarkMode}
        />
      }
    />
  );
}

dark일 때 style을 html에 적용해주면 끝!

// common.scss

html.dark {
  background-color: #303030;
}

동작 확인

darkmode state가 true이면
localStorage의 theme 값이 dark로 설정되고

html class에 'dark'가 추가된다. 🥰