요즘 점점 더 많은 분들이 다크모드를 적용하고 있습니다. 이 글에서는 워드프레스에서 플러그인 없이 다크모드로 전환하는 방법에 대해 자세히 설명하도록 하겠습니다.
워드프레스에서 플러그인 없이 다크모드로 전환하는 방법
1. 라이트/다크 모드 효과 비교
눈의 피로를 줄이기 위해 점점 많은 분들이 다크모드를 적용하고 있습니다. 이러한 추세에 맞춰 저도 저의 블로그에 라이트/다크 모드 전환 기능을 추가하였습니다. 아래 첫 번째 화면은 라이트 모드(디폴트)를 적용한 화면이고, 두 번째 화면은 다크모드를 적용한 화면입니다.
저는 개인적으로 다크모드를 사용하지는 않습니다. 라이트 모드가 눈에 익어서인지 다크 모드를 적용하면 왜인지 모를 답답함이 느껴지기 때문입니다. 하지만 저의 블로그를 방문하는 분들의 편의를 위해 아래 화면의 빨간색 테두리 부분에 Dark/Light 모드를 변경하는 버튼을 추가하여 사용자의 기호대로 라이트/다크 모드를 전환할 수 있도록 하였습니다.
- 라이트 모드 적용
- 다크 모드 적용
2. 라이트/다크 모드 버튼 추가 위치 설정
라이트/다크 모드 버튼을 화면의 어느 위치에 추가할지를 설정해야 합니다. 저의 경우에는 언어 변환 버튼 뒤에 위치하도록 설정을 하였는데요. 아래와 같이 크롬 브라우저에서 개발자 도구(단축키 F12)를 활성화한 다음, ①번을 클릭한 후 마우스로 원하는 요소 위로 가져가면 ③번과 같이 해당 요소의 class 명을 알 수 있습니다. 저는 언어전환 버튼 뒤에 표시되도록 할 것이기 때문에 .gt_switcher-popup
로 설정하도록 하겠습니다.
3. 라이트/다크 모드 전환 코드 작성
라이트/다크 모드 전환 코드는 아래와 같습니다.
- 코드에서 108번째 줄에 있는
const targetElement = document.querySelector('.gt_switcher-popup');
에서.gt_switcher-popup
를 여러분이 선택한 class 명으로 변경합니다.
function add_theme_switcher() {
?>
<style>
/* 전역 전환 효과 */
body {
transition: background-color 0.3s ease, color 0.3s ease !important;
}
.dark-mode {
background-color: #1a1a1a !important;
color: #ffffff !important;
}
.dark-mode * {
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
background-color: #1a1a1a !important;
color: #ffffff !important;
}
.dark-mode a {
color: #66b3ff !important;
}
.dark-mode input,
.dark-mode textarea {
background-color: #333333 !important;
color: #ffffff !important;
border-color: #444444 !important;
}
#theme-switch {
position: relative;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 1px 3px 3px;
padding: 0;
width: 46px;
height: 22px;
background: #333333 !important;
color: #ffffff !important;
border: 1px solid #333333;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
font-family: Arial, sans-serif;
font-weight: bold;
vertical-align: bottom;
transition: all 0.3s ease !important;
box-shadow: none;
-webkit-font-smoothing: antialiased;
backface-visibility: hidden;
transform: translateZ(0);
will-change: background-color, color, border-color, transform;
}
.dark-mode #theme-switch {
background: #ffffff !important;
color: #333333 !important;
border-color: #ffffff;
}
#theme-switch:hover {
transform: scale(1.1);
}
.gt_switcher-popup + #theme-switch {
margin-left: 6px;
}
</style>
<script>
// 페이지 로드 전에 테마 적용
(function() {
const isDarkMode = localStorage.getItem('darkMode') === 'true';
if (isDarkMode) {
document.documentElement.classList.add('dark-mode');
}
})();
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 성능 최적화를 위한 변수 캐싱
const body = document.body;
let button;
// 테마 전환 함수
function toggleTheme(isDark) {
requestAnimationFrame(() => {
if (isDark) {
document.documentElement.classList.add('dark-mode');
body.classList.add('dark-mode');
button.innerHTML = 'Light';
} else {
document.documentElement.classList.remove('dark-mode');
body.classList.remove('dark-mode');
button.innerHTML = 'Dark';
}
});
}
// 기존 버튼 제거
const existingButton = document.getElementById('theme-switch');
if (existingButton) {
existingButton.remove();
}
// 새 버튼 생성
button = document.createElement('button');
button.id = 'theme-switch';
button.innerHTML = localStorage.getItem('darkMode') === 'true' ? 'Light' : 'Dark';
// gt_switcher-popup 요소 찾기 및 버튼 삽입
const targetElement = document.querySelector('.gt_switcher-popup');
if (targetElement) {
targetElement.parentNode.insertBefore(button, targetElement.nextSibling);
}
// 버튼 클릭 이벤트
button.addEventListener('click', function(e) {
e.preventDefault();
const isDark = document.documentElement.classList.contains('dark-mode');
toggleTheme(!isDark);
localStorage.setItem('darkMode', (!isDark).toString());
});
});
</script>
<!-- 깜빡임 방지를 위한 스크립트 -->
<script>
// 페이지 언로드 시 현재 테마 상태 유지
window.addEventListener('beforeunload', function() {
const isDark = document.documentElement.classList.contains('dark-mode');
localStorage.setItem('darkMode', isDark.toString());
});
</script>
<?php
}
// head 태그에 초기 테마 스타일 추가
function add_theme_init() {
?>
<script>
// 페이지 로드 전에 실행되는 인라인 스크립트
(function() {
if (localStorage.getItem('darkMode') === 'true') {
document.documentElement.classList.add('dark-mode');
}
})();
</script>
<?php
}
add_action('wp_head', 'add_theme_init');
add_action('wp_footer', 'add_theme_switcher');
4. 라이트/다크 모드 전환 코드 적용
다음으로 준비된 라이트/다크 모드 전환 코드를 functions.php에 적용해야 합니다. 워드프레스 관리자 화면에서 ‘모양’ → ‘테마 파일 편집기’ 를 순서대로 클릭한 다음, 오른쪽 사이드에서 ‘functions.php’를 클릭하여 오픈한 후 파일 맨 끝에 위의 코드를 복사하여 붙여넣기 합니다.
코드를 붙여넣기 한 후 ‘파일 업데이트’를 클릭하면 적용됩니다.
5. 적용 결과 확인
라이트/다크 모드 전환 기능에 추가가 완료되었습니다. 적용 결과는 아래와 같습니다.
첫 번째 화면은 디폴트 모드인 라이트 모드가 적용된 화면이고 두 번째 화면은 다크 모드를 적용한 결과입니다.
- 라이트 모드 적용 화면
- 다크 모드 적용 화면
오늘은 워드프레스에서 플러그인 없이 다크모드로 전환하는 방법에 대해 자세히 설명드렸습니다. 블로그를 운영하시는 분들 중 플러그인 없이 다크 모드를 적용해 보고 싶으신 분들은 이 글을 참고하셔서 적용해 보시기 바랍니다. 위의 방법이 복잡하고 어렵게 느껴지실 경우 ‘WP Dark Mode’ 플러그인을 사용해 보시는 것도 좋겠습니다.