> For the complete documentation index, see [llms.txt](https://leeans-dev-book.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://leeans-dev-book.gitbook.io/docs/lecture/javascript/dark-mode.md).

# 변수와 Dark Mode 버튼 만들기

🌛Dark Mode는 우리가 보던 Bootstrap이나 MDN 등 다양한 웹사이트에서 지원하는 기능 중 하나

우선은 다크모드 전체를 구현하는 것 보단 버튼을 만들고 해당 버튼을 클릭 했을 때 

내부 글자를 Dark > Light 로 변경 해보자.

navbar 안에 아래 코드 추가 

```html
<span class="badge bg-dark">Dark Mode 🌛</span>
```

이렇게 하고 위 badge를 클릭 할때마다 글자를 변경

```javascript
var 변수이름 = 변수에 넣을 값;

var age = 25; 
console.log(age);

var name = 'lee';
console.log(name);

```

&#x20;\== 는 '같다'라는 비교 연산자&#x20;

&#x20;\= 는 오른쪽 값을 왼쪽에 넣는 할당 연산자

🎈변수를 쓰는 이유&#x20;

`var 경고문 = '아이디를 확인해주세요' ;`

이렇게 하면 위 경고문이 필요할 때 마다 alert(경고문); 이렇게 해서 쓸 수 있다.

(회원가입, 로그인 등)&#x20;

특정 값을 기억할 때&#x20;

&#x20;badge를 클릭 한 횟수가 홀수번이면 Light로 변경

&#x20;badge를 클릭 한 횟수가 짝수번이면 Dark로 변경

&#x20; `var count = 1;`

```javascript
var 변수 = 20; 
var 변수 = '이름';
var 변수 = document.getElementById('email');
```

```javascript
 //badge 클릭 시 글자를 Dark > Light 변경

var count = 0;
$('.badge').on('click', function (){
    count++;
    // count += 1;
    // count = count+1;
    console.log(count);
    console.log(count % 2);

    if(count % 2 === 0){
        $('.badge').html('Dark 🌛');
    }else if(count %2 === 1){
        $('.badge').html('Light 🌞');
    }

});
```

&#x20;다크 모드 예시

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