[jquery] toggle버튼 이용하여 테마바꾸기

toggle버튼을 눌렀을때 클래스를 추가 삭제하여 html테마 바꾸기 (야간모드 활용가능)

body.dark{
    background: #f0f0f0;
}
.dark header .logo{
    background:url(../img/Logo_black.svg) no-repeat;
}
.dark .navButton span{
    background: #40305f;
}

✅css
1) body 태그에 클래스명을 붙여 배경색을 수정해준다
2) 수정을 원하는 태그 앞에 클래스명을 붙여 변경사항을 css로 적어준다

$("input:checkbox").on('click', function () {
    if ($(this).prop('checked')) {
        $(this).parent().addClass("selected");
        $('body').addClass("dark");
    } else {
        $(this).parent().removeClass("selected");
        $('body').removeClass("dark");
    }
});

✅jquery
1) input check박스가 클릭 했을때
2) 만약 checked되어있으면
3) 해당 input의 부모요소에 selected 클래스를 추가한다
4) body태그에 dark class를 추가한다 -> 클래스를 추가하고 작성한 css가 반영된다
5) checked되어 있지 않은경우
6) 해당 input의 부모요소에 selected 클래스를 제거한다
7) body태그에 dark class를 제거한다 -> 기존 css가 반영된다

 

https://rara-code.tistory.com/20?category=1072320

toggle버튼 만들기 참고하기

[css] toggle 버튼 만들기

✔ 테마 뿐 아니라 다양한 이벤트에도 addClass를 이용하여 활용가능