WordPress에 다크 모드 적용 – Droit Dark Mode

본 포스팅은 WordPress에 Droit Dark Mode 플러그인을 설치하고 적용하는 방법을 소개합니다.

개요

다크 모드는 콘텐츠를 어두운 배경과 밝은 텍스트를 표시하는 기능이다. 눈의 피로를 줄이고 텍스트를 뚜렷하게 만들어 준다는 장점이 있어서 대부분의 웹 페이지는 다크 모드를 지원한다.

WordPress는 기본적으로 다크 모드를 제공하지 않으므로 WordPress에 다크 모드를 사용하려면 다음 방법 중 하나를 선택하면 된다.

다크 모드를 제공하는 테마 사용
다크 모드를 제공하지 않는 테마인 경우 스타일 파일(style.css) 수정
다크 모드 플러그인 사용

본 포스팅은 Droit Dark Mode라는 플러그인을 사용하여 WordPress에 다크 모드를 적용하는 방법을 소개한다.

Droit Dark Mode 플러그인 소개

Droit Dark Mode는 WordPress에 다크 모드를 적용할 수 있는 플러그인 중 하나로 Free 버전과 Pro 버전으로 분류된다.

Free 버전은 기본 기능만 제공하며, Pro 버전은 Free 버전보다 더 많은 기능을 제공하고 플러그인에 문제가 있는 경우 공식적으로 도움을 받을 수 있다. 자세한 내용은 아래 사이트에서 확인할 수 있다.

Droit Dark Mode 플러그인 공식 사이트: https://droitthemes.com/droit-dark-mode/

WordPress 플러그인 사이트: https://wordpress.org/plugins/droit-dark-mode/

Droit Dark Mode 플러그인 설치

WordPress에 Droit Dark Mode 플러그인을 설치하는 방법은 아래 과정을 차례대로 진행한다.

Step 1: 관리자 페이지 > 플러그인 > 새로추가

WordPress 관리자 계정으로 로그인하고 대시보드의 ‘플러그인 > 새로추가’ 메뉴를 선택한다. “Droit Dark Mode”를 검색하고 지금 설치를 클릭한다.

Step 2: Droit Dark Mode 플러그인 활성화

Droit Dark Mode 플러그인 설치가 완료되면 지금 설치 버튼이 활성화 버튼으로 변경된다. 플러그인을 사용하기 위해 활성화 버튼을 클릭한다.

Step 3: Droit Dark Mode 플러그인 활성화 확인

활성화 버튼을 클릭하면 웹 페이지가 새로고침되고 관리자 페이지에 Droit Dark Mode가 추가된다.

Droit Dark Mode 플러그인 사용 방법

이제 Droit Dark Mode 플러그인을 사용하여 WordPress에 다크 모드를 적용해보자. Droit Dark Mode 플러그인 설정 페이지에 들어가면 총 7개의 항목을 볼 수 있는데, 본 포스팅은 다음 세 개의 항목에 대해서만 설명한다.

General Settings
Display Settings
Preset Color

다음 네 개의 항목은 Pro 버전에서만 사용할 수 있다.

Advance Settings
Dark Image
Time Base
OS Base

Display Settings

Display Settings에서 방문자에게 다크 모드를 선택할 수 있도록 다크 모드 변경 아이콘 스타일과 위치를 설정할 수 있다. Switch Style로 다크 모드 변경 아이콘을 선택할 수 있으며, Body Position로 다크 모드 변경 아이콘 위치를 설정할 수 있다.

참고로 관리자 페이지의 다크 모드 변경 아이콘의 위치는 Body Position 옵션을 무시하고 항상 상단에 배치된다.

Preset Color

Preset Color에서 사용자에게 다크 모드를 어떤 스타일로 표시할 것인지 설정할 수 있다.

General Settings

General Settings에서 방문자 전용 페이지, 관리자 전용 페이지에 다크 모드를 활성화할 것인지 설정할 수 있다. Front-End Options는 방문자 전용 페이지 다크 모드 활성화 옵션이며, Backend Options은 관리자 전용 페이지 다크 모드 활성화 옵션이다.

Enable Backend Dark Mode를 활성화하면 관리자 전용 페이지의 다크 모드 스타일을 선택할 수 있는 기능이 활성화된다.