[JS]Dark mode Toggle

과제 진행 전에 연습용으로 JS로 기능 구현해본 것을 정리해보았다.

 

.dark 클래스가 body에 추가되면 body에 다크 모드로 지정한 css가 적용되도록 했고, 클릭 시 버튼 아이콘이 회전하도록 했다. localStorage를 이용해 새로고침을 해도 이전에 설정한 상태가 유지되도록 했다.

 

HTML

<div class="navWrapper">
        <div class="navbar">
            <div class="menus">
                <button class="menu-btn">
                    <i class="icon-menu"></i>
                </button>
                <!-- 사이즈 따라 생기고 사라지고 -->
                <h2 class="logo"><a href="/">JS Shop</a></h2>
                <div class="category">
                    <a class="category-item" href="category.html">패션</a>
                    <a class="category-item" href="category.html">액세서리</a>
                    <a class="category-item" href="category.html">디지털</a>
                </div>
            </div>
            <div class="sub">
                <input type="checkbox" id="changeMode">
                <label class="mode" for="changeMode">
                    <i class="icon-light-mode"></i>
                </label>
                <!-- 클릭시 다크모드/라이트모드 변경 -->
                <input type="search" placeholder="검색">
                <button class="search-btn">
                    <i class="icon-search"></i>
                </button>
                <!-- 사이즈 작아지면 검색 버튼 클릭 시 하단부에 검색창이 등장 -->
                <a class="cart-btn" href="cart.html">
                    <span class="count-item">0</span>
                    <i class="icon-shopping-bag"></i>
                </a>
            </div>
        </div>
    </div>

 

JS

const DarkModeToggle=()=>{
    const body=document.body
    const mode=document.querySelector('.mode')
    const icon=mode.querySelector('i')

    //dark/light mode localStorage
    if (localStorage.getItem('darkMode')===null){
        localStorage.setItem('darkMode', "false");
    }

    checkStatus()

    function checkStatus(){
        if (localStorage.getItem('darkMode')==="true"){
            mode.checked=true;
            icon.classList.remove('icon-light-mode')
            icon.classList.add('icon-dark-mode')
            body.classList.add('dark-mode')
        } else {
            mode.checked=false;
            icon.classList.remove('icon-dark-mode')
            icon.classList.add('icon-light-mode')
            body.classList.remove('dark-mode')
        }
    }

    function changeStatus(){
        if (localStorage.getItem('darkMode')==="true"){          
            localStorage.setItem('darkMode', "false");  
            icon.classList.remove('icon-dark-mode')
            icon.classList.add('icon-light-mode')
            body.classList.remove('dark-mode')
        } else{
            localStorage.setItem('darkMode', "true");
            icon.classList.remove('icon-light-mode')
            icon.classList.add('icon-dark-mode')
            body.classList.add('dark-mode')
        }
    }

    mode.addEventListener('click',()=>{ changeStatus() })
}

export default DarkModeToggle