워드프레스에서 플러그인 없이 다크 모드를 구현하는 방법

ㆍ
워드프레스 대학교

다크 모드는 사용자 경험(UX)을 향상 시키고, 야간에 눈의 피로를 줄여주는 중요한 기능입니다. 최근에는 많은 웹사이트와 애플리케이션이 기본적으로 다크 모드를 지원하며, 워드프레스에서도 이를 적용하는 사이트가 점점 늘어나고 있습니다.

보통 다크 모드를 추가하는 가장 쉬운 방법은 플러그인을 사용하는 것이지만, 플러그인을 과도하게 사용하면 웹사이트의 성능과 속도가 감소되는 문제가 발생할 수도 있습니다. 그렇다면 별도의 플러그인 없이 워드프레스에 다크 모드를 적용할 수 있다면 어떨까요?

이번 아티클에서는 플러그인 없이 간단한 코드만으로 다크 모드를 구현하는 방법과 이를 응용하는 방법 등을 단계별로 설명해보려 합니다 😉.🐋

다크 모드 토글을 미리 체험해 보세요!

다크 모드 토글 HTML 삽입하기

플러그인 없이 다크 모드를 구현하기 위해서는 HTML, CSS 그리고 JavaScript 코드를 적절히 사용해야 합니다. 먼저 아래와 같은 다크 모드 토글의 HTML 코드를 원하는 위치에 HTML 블록을 사용해 삽입해 주세요.

이 때, 웹사이트 전반에 걸쳐 다크 모드가 유지되도록 하려면, 헤더, 네비게이션 등 모든 페이지에서 공통으로 로드되는 요소에 코드를 추가해야 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var isDarkMode = localStorage.getItem('darkMode') === 'true';

            if (isDarkMode) {
                document.documentElement.classList.add('dark-mode');
                document.body.classList.add('dark-mode');
            }

            document.querySelector('.image-container').addEventListener('click', function() {
                isDarkMode = !isDarkMode;
                document.documentElement.classList.toggle('dark-mode', isDarkMode);
                document.body.classList.toggle('dark-mode', isDarkMode);
                localStorage.setItem('darkMode', isDarkMode);
            });
        });
    </script>
</head>
<body>
    <div class="image-container">
        <svg class="theme-icon" width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5Zm0 7c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2Zm4.95-6.95a1.49 1.49 0 0 1 0-2.12l1.41-1.41a1.49 1.49 0 0 1 2.12 0c.59.59.59 1.54 0 2.12l-1.41 1.41c-.29.29-.68.44-1.06.44s-.77-.15-1.06-.44Zm-9.9 9.9c.59.59.59 1.54 0 2.12l-1.41 1.41c-.29.29-.68.44-1.06.44s-.77-.15-1.06-.44a1.49 1.49 0 0 1 0-2.12l1.41-1.41a1.49 1.49 0 0 1 2.12 0ZM3.51 5.64a1.49 1.49 0 0 1 0-2.12 1.49 1.49 0 0 1 2.12 0l1.41 1.41c.59.59.59 1.54 0 2.12-.29.29-.68.44-1.06.44s-.77-.15-1.06-.44L3.51 5.64Zm16.97 12.73c.59.59.59 1.54 0 2.12-.29.29-.68.44-1.06.44s-.77-.15-1.06-.44l-1.41-1.41a1.49 1.49 0 0 1 0-2.12 1.49 1.49 0 0 1 2.12 0l1.41 1.41Zm3.51-6.36c0 .83-.67 1.5-1.5 1.5h-2c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5h2c.83 0 1.5.67 1.5 1.5ZM3.5 13.5h-2C.67 13.5 0 12.83 0 12s.67-1.5 1.5-1.5h2c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5Zm7-10v-2c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v2c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5Zm3 17v2c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5v-2c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5Z"/>
        </svg>
    </div>
</body>
</html>

이 코드는 다크 모드를 적용하고 토글할 수 있는 기능을 포함하고 있습니다. 이를 통해 웹사이트 방문자가 다크 모드를 켜고 끌 수 있으며, 한 번 설정한 값이 유지되도록 로컬 스토리지(LocalStorage) 를 활용하고 있습니다.

다크 모드 토글 CSS 코드 삽입하기

다음으로는 토글 아이콘과 다크 모드 상태에서의 기본적인 배경 및 텍스트 색상 등을 정해주는 CSS 코드를 삽입해야 합니다.

아래의 CSS 코드를 추가 css 또는 코드 블록에서는 <style> 태그를 사용해서 입력해주세요.

/* 다크 모드 스타일 */
body.dark-mode {
    background-color: #222;
    color: #ffffff;
}

/* 기본 모드 아이콘 색상 */
.theme-icon {
    fill: #474747;
}

/* 다크 모드 아이콘 색상 */
body.dark-mode .theme-icon {
    fill: #ffffff;
}

/* 토글 버튼 스타일 */
.image-container {
    position: relative;
    margin: 0 20px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.image-container svg {
    pointer-events: none;
    transition: fill 0.3s ease;
}

다크 모드 스타일 지정 시 주의할 점

이번 아티클에서 소개하는 방법으로 다크 모드를 적용할 때, 테마 커스터마이징을 통해 색상을 직접 지정하는 경우 다크 모드가 올바르게 동작하지 않을 수 있습니다. 이를 해결하기 위해서는 CSS를 이용하여 원하는 요소에 기본 색상과 다크 모드 시 색상을 적용해야 합니다.

CSS를 이용해 다크 모드 색상을 적용할 때는 “body.dark-mode .class-name” 형식을 사용하면 되는데요, 이해하기 쉽도록 사이트의 헤더에 대해 라이트 모드와 다크 모드 색상을 각각 적용하는 아래의 예제를 참고해주세요.

/* 기본 라이트 모드 */
.site-header {
    background-color: white;
    color: black;
}

/* 다크 모드 */
body.dark-mode .example {
    background-color: black;
    color: white;
}

이렇게 해서 워드프레스에서 플러그인 없이 다크 모드를 적용하는 방법을 알아보았습니다. 이 방법을 활용하면 웹사이트의 성능을 저하시키지 않으면서도, 사용자에게 편리한 다크 모드를 제공할 수 있습니다!

궁금하신 점이 있다면 댓글을 통해 남겨주세요.

감사합니다!

© 2025 워드프레스 대학교