<nav class="navbar navbar-expand-lg bg-light">
        <div class="container-fluid">
            <span class="navbar-brand" href="#">Navbar</span>
            <span class="badge bg-dark">Dark 🔄</span>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
</nav>

• Dark 버튼을 누르면 원하는 컴포넌트들의 검은색으로 변하게하는 클래스를 붙여주면 될 듯하다. 하지만 복잡해보인다..

변수

• var 변수명 = 넣을자료;

      <script>
        var count = 1;

        $('.badge').on('click', function() {
            if (count == 1){
                $('.badge').html('Light 🔄')
                console.log("true");
            } else {
                $('.badge').html('Dark 🔄')
                console.log("false");
            }

            count ^= 1;
        })

      </script>

• 버튼을 눌를 때마다 Dark를 Light로, Light를 Dark로 변경시켜봤다.
• % 나머지 연산자로도 구현이 가능하다.
• 변수는 함수안에서 만들면 사용 가능 범위가 함수 내부다. 바깥에서 자유롭게 쓸 수 없다.
• 변수는 재할당도 가능하다.
• let : 재선언이 불가능 -> 이름 같은 실수 방지 가능
• const : 재선언 불가능, 재할당 불가능 -> 한 번 넣으면 바뀌지 않는 값 보관
• 범위는 모두 {} 안이다.