다크 모드 라이트 모드 토글스위치 기능(Javascript/JQuery)

다크 모드 라이트 모드 토글스위치

CSS와 JavaScript를 활용한 다크 모드 라이트 모드 토글스위치 기능을 내 사이트에 추가하는 방법입니다. 해외 사이트들을 참고하여, 현재 적용되어 있는 그대로의 코드값입니다. 버튼의 형태나 디자인 등은 사용자의 취향에 맞게 수정할 수 있으며, 위치 등도 조절해서 사용하시길 바랍니다.

버튼이 아닌 라벨 태그로도 구성할 수 있습니다. 이 경우에는 버튼 태그로 HTML 블록을 만들어주고 클릭 시 발생하는 자바스크립트인 onclick()를 활용한 방법입니다. 이미지(해)와 이미지(달) 간의 스위칭(토글 전환)은 removeClass와 addClass 자바스크립트로 구성하며, 버튼은 클릭했을 때 toggleClass로 'dark'로 전환되는 과정입니다.

HTML과 JavaScript

 <!-- Dark Mode🌙-->

                <!-- 토글을 이용한 스위치 기능 -->
<button class="switch" onclick="toggleTheme()">
  <svg class="sun" fill="none" stroke="#fbb046" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-sun" viewBox="0 0 24 24"><defs/><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
  <svg class="moon" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-moon" viewBox="0 0 24 24"><defs/><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
</button>

                <script>
                     // 토글을 이용한 스위치 기능
$(document).ready(function(){
  $('a').click(function(){
    $('a').removeClass("active");
    $(this).addClass("active");
  });
  $('button').click(function(){
    $('body').toggleClass('dark');
  });
});
                 </script>
      <script>
        // 테마의 컬러스킴을 셋팅할 수 있습니다.
        function setTheme(themeName) {
            localStorage.setItem('theme', themeName);
            document.documentElement.className = themeName;
        }

        // 라이트 모드와 다크 모드 사이의 토글 세션(로컬 스토리지)
        function toggleTheme() {
            if (localStorage.getItem('theme') === 'theme-dark') {
                setTheme('theme-light');
            } else {
                setTheme('theme-dark');
            }
        }

        // 초기 로드 시 테마를 설정하는 즉시 호출되는 기능
        (function () {
            if (localStorage.getItem('theme') === 'theme-dark') {
                setTheme('theme-dark');
            } else {
                setTheme('theme-light');
            }
        })();
      </script>
        <!-- //Dark Mode🌙 -->

CSS

/* Dark Mode🌙 */
/* 밝을 때 표시되는 색상을 지정합니다. */
.theme-light {
  --color-primary: #1C2451;
  --color-secondary: #3949A3;
  --color-accent: #1C2451;
  --font-color: #131836;
  --color-bg: #FFF;
  --color-footer: #f7f7f7;
}
/* 어두울 때 표시되는 색상을 지정합니다. */
.theme-dark {
  --color-primary: #7985CB;
  --color-secondary: #B2B9E1;
  --color-accent: #3F51B5;
  --font-color: #ECEEF8;
  --color-bg: #131836;
  --color-footer: #1C2451;
}
//* --color-는 색상을 지정할 수 있으며, Color: var()로 컬러를 적용합니다. *//

/* 토글 스위치의 사이즈값 */
.switch {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: transparent;
  border: none;
  color: #ddd;
  outline: none;
  cursor: pointer;
} 

/* svg 이미지의 트랜지션과 높이값 */
svg {
    width:0;
    height: 24px;
    transition: all .3s ease-in;
    transform-origin: center;
}
.moon { opacity: 0; width: 0;} /* 밝을 땐 보이지 않습니다. */
.sun {    width: 24px;
             position: fixed; /* 밝을 때 보이며, 고정 위치값을 지정합니다. */
             bottom: 20px !important;
             left: 20px; 
}
.dark .moon {
  opacity: 1;
  width: 24px;
  position: fixed; /* 어두울 때 보이며, 고정 위치값을 지정합니다. */
  bottom: 20px !important;
  left: 20px;
}

.dark .sun { opacity: 0; width: 0; /* 어두울 땐 보이지 않습니다. */}

적용방법

HTML과 JavaScript를 적절한 위치에 찾아 적용합니다. (위치를 고정으로 잡을 것이기에 본문 어디에나 크게 상관은 없습니다.) 그다음 CSS를 작성한 뒤 사용하고 있는 테마나 스킨에 맞게 CSS를 커스텀하면 됩니다.

Javascript(JQuery)

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

• .ready() // DOM이 로드되었을 때 실행되어야 하는 메서드
• .click() // 선택한 요소를 클릭했을 때, 특정 작업을 수행할 수 있게 메서드
• .removeClass() // 선택한 요소에서 클래스 값을 제거하는 메서드
• .addClass() // 선택한 요소에 클래스 값을 추가하는 메서드
• .toggleClass() // 선택한 요소에 클래스 값을 전환하는 메서드(넣었다/뺐다)

HTML5

• localStorage.setItem() 로컬 스토리지에 저장합니다.
• setTheme() 재사용이 가능한 함수로 테마의 이름을 인수로 받습니다. 테마를 설정한 후에 그것을 저장하기 위해 쿠키를 사용하는데 이를 통해 테마를 전환할 수 있습니다.