본문 바로가기
> IT 노트/활용

[JS] 다크모드 설정하기

by 자몽주스 2024. 3. 23.
728x90
반응형
다크 모드 만들기
 <span class="badge bg-dark">Dark</span>
var count = 0;

$('.badge').on('click', function(){
  count += 1;
  if (count % 2 == 1) {
    $('.badge').html('Light');
  } else {
    $('.badge').html('Dark')
  }
});

변수(count) 에 클릭 몇 번 했는지 

그 숫자를 담아준다.

 

그리고 숫자를

.badge 라는 클래스를 가진 버튼을 클릭할 때마다

count + 1 해주므로

숫자를 +1 씩 증가시켜준다.

 

if 문 사용 ) 

그리고 2로 나눠 떨어지지 않고 1이라는 나머지가 나오면 

Light 로 글자 변경

 

그게 아니면 ( 2로 나눠 떨어지지 않고 1이라는 나머지가 나오지않으면 )

html 을 Dark 로 변경

 

1 을 2 로 나누면 나머지 = 1

728x90
반응형