[ Vite + React ] DarkMode&WhiteMode Toggle Button

 

다크모드를 만들기 위해 toggle을 만들어서 누른것에 따라 다크모드와 화이트 모드가 되도록 토글 버튼을 구현

 

---

Toggle Component

toggle의 전체 영역의 크기를 부모에서 설정하여 toggle 버튼이 또 필요할 경우 이를 활용하고자

전체크기를 설정하는 toggle component를 구현

import {ReactNode} from "react";
import './ToggleComponent.scss'

interface ToggleComponentProps {
    children: ReactNode;
}

const ToggleComponent = ({children}: ToggleComponentProps ) =>{
    return(
        <>
            <div className='toggle_container'>
                {children}
            </div>
        </>
    )
}

export default ToggleComponent

 

css로 너비와 높이를 설정

.toggle_container {
  cursor: pointer;
  width: 120px;
  height: 40px;
  border-radius: 50px;
}

 

---

Toggle Button

toggleComponent안에 같은 크기의 영역을 잡아주고 아이콘과 현재 어떤 모드인지를 나타내는 텍스트를 추가

해당 영역을 클릭했을때 isDarkMode의 값을 바꿔주어서 class를 추가 혹은 제거

<ToggleComponent>
    <div onClick={toggleTheme}  className={`toggle_button_switch ${isDarkMode ? 'active' : ''}`}>
    <div className={`toggle_button ${isDarkMode ? 'active' : ''}`}>
        {icon}
    </div>
        <div className={`toggle_button_name ${isDarkMode ? 'active' : ''}`}>
            {isDarkMode ? 'NIGHTMODE' : 'DAYMODE'}
        </div>
    </div>
</ToggleComponent>

 

css는 scss를 활용하여 작성

isDarkMode가 활성화시 active 클래스가 추가되며 transition을 주어 왼쪽으로 이동하게 처리

.toggle_button_switch{
  display: flex;
  padding: 5px;
  gap: 25px;
  align-items: center;
  border-radius: 50px;
  background-color: #C7C8CC;

  &.active {
    background-color: #222831;
    color: white;
  }

  .toggle_button {
    width: 18px;
    background-color: #ffffff;
    border-radius: 50%;
    position: relative;
    transition: 0.5s all;
    left: 0;
    z-index: 1;
    padding: 5px;

    &.active {
      left: 75%;
    }

    svg {
      display: flex;
      width: 100%;
      height: 100%;
    }
  }

  .toggle_button_name {
    width: 20px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: 0.5s all;
    right: 0;
    z-index: 0;

    &.active{
      right: 20px;
    }
  }
}