[include(틀:회원수정)]
[include(틀:관련 문서, top1=나무위키:프로젝트/다크 모드)]
[목차]

== 개요 ==
[[the seed]] 엔진에서 테마를 바꿀 수 있는 기능. 기본 모드인 라이트 테마와 화면이 어둡게 나오는 다크 테마가 존재한다. {{{#ffffff,#dddddd 현재 이 문장이 보인다면 다크 테마다.}}}
== 차이점 ==
 * 라이트 테마에서는 배경이 흰색이나, 다크 테마에서는 회색이다.
 * 라이트 테마에서는 글씨나 틀/분류/목차의 테두리 등 각종 선이 검은색이나, 다크 테마에서는 흰색이다. 단, 해당 내용이 표 안에 있을 경우, 양쪽에서 다 검은색이다.
 * 라이트 테마에서는 [[하이퍼링크]]가 파란색이나, 다크 테마에선 주황색이다.
 * 라이트 테마에서는 나무위키 자체 상단바와 모바일 자체 상단바가 청록색이나, 다크 테마에서는 회색이다.
 * 라이트 테마에서 문서의 두 버전을 비교하면 추가된 내용은 초록색, 삭제된 내용은 분홍빛 빨간색 배경에 나타나나, 다크 테마는 이 둘이 서로 반대이다.
 * [[HTML]]이나 \{{{#!wiki style= 등의 문법을 사용하여 배경색은 지정하였으나 글자색은 지정하지 않은 텍스트의 경우, 밝은 화면에서는 글자가 검은색이나, 다크 테마에서는 회색이다.

== 색상 ==
||<|2> ||<|2> 라이트 테마 ||<-2> 다크 테마 ||
|| 기본 (회색) || 검정 ||
|| 텍스트 ||<bgcolor=#ffffff><color=#373a3c> {{{#373A3C}}} ||<-2><bgcolor=#1f2023><color=#dddddd> {{{#DDDDDD}}} ||
|| 배경 ||<bgcolor=#ffffff><color=#373a3c> {{{#FFFFFF}}} ||<bgcolor=#1f2023><color=#dddddd> {{{#1F2023}}} ||<bgcolor=#010101><color=#dddddd> {{{#010101}}} ||
|| 표 배경 ||<bgcolor=#f5f5f5><color=#373a3c> {{{#F5F5F5}}} ||<-2><bgcolor=#2d2f34><color=#dddddd> {{{#2D2F34}}} ||
|| 표 테두리 ||<bgcolor=#dddddd><color=#373a3c> {{{#DDDDDD}}} ||<-2><bgcolor=#383b40><color=#dddddd,#dddddd> {{{#383B40}}} ||
|| 링크 ||<bgcolor=#ffffff><color=#0275d8> {{{#0275D8}}} ||<-2><bgcolor=#1f2023><color=#ec9f19> {{{#EC9F19}}} ||
|| 네비게이션 바 배경 ||<bgcolor=#008275><color=#ffffff> {{{#008275}}} ||<-2><bgcolor=#2d2f34><color=#ffffff> {{{#2D2F34}}} ||
|| 네비게이션 바 텍스트 ||<bgcolor=#008275><color=#ffffff> {{{#FFFFFF}}} ||<-2><bgcolor=#2d2f34><color=#ffffff> {{{#FFFFFF}}} ||

== 가독성 문제 ==
대부분의 나무위키 이용자들이 밝은 화면을 기준으로 편집하여 다크 테마에서는 보기 불편한 문서도 종종 생기며 드물게 다크 테마를 기준으로 편집하여 밝은 화면에선 읽기 어려운 경우도 생긴다.

이러한 문제의 예시를 들면,
 * 배경색만 지정하고 글자색은 지정하지 않은 경우: 밝은 화면에서는 어두운 색의 배경으로 지정하지만 않았다면 편하게 읽을 수 있으나, 다크 테마에서는 글자가 회색이다 보니 대부분의 배경색에서 읽기가 매우 불편해진다.
 * 글자색만 지정하고 배경색은 지정하지 않은 경우: 링크를 사용하면서도 글자색을 유지하기 위해 강제로 어두운 색으로 설정해놓은 글자의 경우 다크 테마에서는 읽기가 매우 불편해진다.
 
 위 두 경우, 테마 교체에 따른 가독성 문제를 해결하기 위해 다음과 같은 방법을 생각할 수 있다.
  * 글자색과 배경색을 전부 지정해서 테마와 관계없이 일정한 색상으로 출력되도록 고정하는 방법[* 배경색을 지정하기 어려운 경우에는 사용하기 곤란한 방법이다.]
  * {{{{{{#373A3C,#DDDDDD ○○}}}}}}와 같이 다크 테마용 색상을 별도로 지정해, 라이트 화면일 경우 #373A3C 색상이 출력되고 다크 화면일 경우 #DDDDDD 색상이 출력되도록 설정하는 방법

 * [[:파일:800px-Imgur_logo.svg.png]]처럼 배경이 없는데 검은색 또는 회색 위주로 이루어진 [[PNG]] 사진은 다크 테마에선 보기가 어렵다. 가장 두드러지는 곳이 화합물(특히 [[유기화합물]]) 문서의 [[구조식]] 이미지. 반대로 배경이 없는데 흰색 위주로 이루어진 사진은 밝은 화면에선 보기 어렵다.
 
 이 경우 {{{[[파일:800px-Imgur_logo.svg.png|bgcolor=#FFFFFF]]}}}와 같이 이미지 배경색을 지정해 해결할 수 있다.

 * 나무위키에서 정식 문법이 아니지만 용례는 찾아볼 수 있는 텍스트 배경 그라데이션 효과 문법의 경우 다크 테마용 색상을 별도로 지정할 수 없기 때문에, 라이트 테마와 다크 테마를 분리해서 색을 지정할 수 없다.

[[분류:나무위키의 기능]]