[자바스크립트] 변수를 이용하여 다크모드 버튼 만들어 보기

 

다크모드 버튼을 누르면 배경이 검정, 글자가 흰색으로 나오게 만들어 보자.

 

 

        var click_count = 0;
        $('.badge').on('click',function(){
            
            click_count+=1;
            if(click_count%2==1){
                $('.badge').html('Light');
                $('.navbar').addClass('navbar-dark');
                $('.navbar').addClass('bg-dark');
                $('.navbar').removeClass(
                'navbar-light');
                $('.navbar').removeClass(
                'bg-light');
                
                $('body').addClass('darkmode');
            }
            else{
                $('body').removeClass('darkmode');
                
                $('.badge').html('Dark');
                
                $('.navbar').removeClass('navbar-dark');
                $('.navbar').removeClass('bg-dark');
                $('.navbar').addClass(
                'navbar-light');
                $('.navbar').addClass(
                'bg-light');
                
            }
        });

var 변수명;으로 변수를 선언할 수 있다.

여기서는 var click_count=0;으로 클릭횟수를 셀 변수를 0으로 초기화 했고,

 

이벤트리스너를 이용해 다크모드가 클릭될 때마다 click_count가 1씩 증가하게 하였다.

click_count가 홀수이면 다크모드, 짝수이면 라이트모드로 변경되게 하였다.

 

body태그에는 간단하게 .darkmode라는 클래스를 추가하도록 했고(.darkmode: background: black; color:white;)

navbar의 경우는 부트스트랩에서 받아온 것이기 때문에

navbar-light bg-light 클래스를 삭제하고 navbar-dark gb-dark 클래스를 추가하도록 하면 되었다.