나무위키:테마

#!if 넘어옴1 != null
'''다크 테마'''{{{#!if 넘어옴2 != null
, ''''''}}}{{{#!if 넘어옴3 != null
, ''''''}}}{{{#!if 넘어옴4 != null
, ''''''}}}{{{#!if 넘어옴5 != null
, ''''''}}}{{{#!if 넘어옴6 != null
, ''''''}}}{{{#!if 넘어옴7 != null
, ''''''}}}{{{#!if 넘어옴8 != null
, ''''''}}}{{{#!if 넘어옴9 != null
, ''''''}}}{{{#!if 넘어옴10 != null
, ''''''}}}은(는) 여기로 연결됩니다. 

#!if 설명 == null && 리스트 == null
{{{#!if 설명1 == null
다른 뜻에 대한 내용은 아래 문서를}}}{{{#!if 설명1 != null
{{{#!html 화면을 어둡게 만드는 기능}}}에 대한 내용은 [[다크 모드]] 문서{{{#!if (문단1 == null) == (앵커1 == null)
를}}}{{{#!if 문단1 != null & 앵커1 == null
의 [[다크 모드#s-|]]번 문단을}}}{{{#!if 문단1 == null & 앵커1 != null
의 [[다크 모드#|]] 부분을}}}}}}{{{#!if 설명2 != null
, {{{#!html 나무위키의 스킨}}}에 대한 내용은 [[위키/스킨]] 문서{{{#!if (문단2 == null) == (앵커2 == null)
를}}}{{{#!if 문단2 != null & 앵커2 == null
의 [[위키/스킨#s-1.1|1.1]]번 문단을}}}{{{#!if 문단2 == null & 앵커2 != null
의 [[위키/스킨#|]] 부분을}}}}}}{{{#!if 설명3 != null
, {{{#!html }}}에 대한 내용은 [[]] 문서{{{#!if (문단3 == null) == (앵커3 == null)
를}}}{{{#!if 문단3 != null & 앵커3 == null
의 [[#s-|]]번 문단을}}}{{{#!if 문단3 == null & 앵커3 != null
의 [[#|]] 부분을}}}}}}{{{#!if 설명4 != null
, {{{#!html }}}에 대한 내용은 [[]] 문서{{{#!if (문단4 == null) == (앵커4 == null)
를}}}{{{#!if 문단4 != null & 앵커4 == null
의 [[#s-|]]번 문단을}}}{{{#!if 문단4 == null & 앵커4 != null
의 [[#|]] 부분을}}}}}}{{{#!if 설명5 != null
, {{{#!html }}}에 대한 내용은 [[]] 문서{{{#!if (문단5 == null) == (앵커5 == null)
를}}}{{{#!if 문단5 != null & 앵커5 == null
의 [[#s-|]]번 문단을}}}{{{#!if 문단5 == null & 앵커5 != null
의 [[#|]] 부분을}}}}}}{{{#!if 설명6 != null
, {{{#!html }}}에 대한 내용은 [[]] 문서{{{#!if (문단6 == null) == (앵커6 == null)
를}}}{{{#!if 문단6 != null & 앵커6 == null
의 [[#s-|]]번 문단을}}}{{{#!if 문단6 == null & 앵커6 != null
의 [[#|]] 부분을}}}}}}{{{#!if 설명7 != null
, {{{#!html }}}에 대한 내용은 [[]] 문서{{{#!if (문단7 == null) == (앵커7 == null)
를}}}{{{#!if 문단7 != null & 앵커7 == null
의 [[#s-|]]번 문단을}}}{{{#!if 문단7 == null & 앵커7 != null
의 [[#|]] 부분을}}}}}}{{{#!if 설명8 != null
, {{{#!html }}}에 대한 내용은 [[]] 문서{{{#!if (문단8 == null) == (앵커8 == null)
를}}}{{{#!if 문단8 != null & 앵커8 == null
의 [[#s-|]]번 문단을}}}{{{#!if 문단8 == null & 앵커8 != null
의 [[#|]] 부분을}}}}}}{{{#!if 설명9 != null
, {{{#!html }}}에 대한 내용은 [[]] 문서{{{#!if (문단9 == null) == (앵커9 == null)
를}}}{{{#!if 문단9 != null & 앵커9 == null
의 [[#s-|]]번 문단을}}}{{{#!if 문단9 == null & 앵커9 != null
의 [[#|]] 부분을}}}}}}{{{#!if 설명10 != null
, {{{#!html }}}에 대한 내용은 [[]] 문서{{{#!if (문단10 == null) == (앵커10 == null)
를}}}{{{#!if 문단10 != null & 앵커10 == null
의 [[#s-|]]번 문단을}}}{{{#!if 문단10 == null & 앵커10 != null
의 [[#|]] 부분을}}}}}}

#!if 설명 == null
{{{#!if 리스트 != null
다른 뜻에 대한 내용은 아래 문서를}}} 참고하십시오.

#!if 리스트 != null
{{{#!if 문서명1 != null
 * {{{#!if 설명1 != null
화면을 어둡게 만드는 기능: }}}[[다크 모드]] {{{#!if 문단1 != null & 앵커1 == null
문서의 [[다크 모드#s-|]]번 문단}}}{{{#!if 문단1 == null & 앵커1 != null
문서의 [[다크 모드#|]] 부분}}}}}}{{{#!if 문서명2 != null
 * {{{#!if 설명2 != null
나무위키의 스킨: }}}[[위키/스킨]] {{{#!if 문단2 != null & 앵커2 == null
문서의 [[위키/스킨#s-1.1|1.1]]번 문단}}}{{{#!if 문단2 == null & 앵커2 != null
문서의 [[위키/스킨#|]] 부분}}}}}}{{{#!if 문서명3 != null
 * {{{#!if 설명3 != null
: }}}[[]] {{{#!if 문단3 != null & 앵커3 == null
문서의 [[#s-|]]번 문단}}}{{{#!if 문단3 == null & 앵커3 != null
문서의 [[#|]] 부분}}}}}}{{{#!if 문서명4 != null
 * {{{#!if 설명4 != null
: }}}[[]] {{{#!if 문단4 != null & 앵커4 == null
문서의 [[#s-|]]번 문단}}}{{{#!if 문단4 == null & 앵커4 != null
문서의 [[#|]] 부분}}}}}}{{{#!if 문서명5 != null
 * {{{#!if 설명5 != null
: }}}[[]] {{{#!if 문단5 != null & 앵커5 == null
문서의 [[#s-|]]번 문단}}}{{{#!if 문단5 == null & 앵커5 != null
문서의 [[#|]] 부분}}}}}}{{{#!if 문서명6 != null
 * {{{#!if 설명6 != null
: }}}[[]] {{{#!if 문단6 != null & 앵커6 == null
문서의 [[#s-|]]번 문단}}}{{{#!if 문단6 == null & 앵커6 != null
문서의 [[#|]] 부분}}}}}}{{{#!if 문서명7 != null
 * {{{#!if 설명7 != null
: }}}[[]] {{{#!if 문단7 != null & 앵커7 == null
문서의 [[#s-|]]번 문단}}}{{{#!if 문단7 == null & 앵커7 != null
문서의 [[#|]] 부분}}}}}}{{{#!if 문서명8 != null
 * {{{#!if 설명8 != null
: }}}[[]] {{{#!if 문단8 != null & 앵커8 == null
문서의 [[#s-|]]번 문단}}}{{{#!if 문단8 == null & 앵커8 != null
문서의 [[#|]] 부분}}}}}}{{{#!if 문서명9 != null
 * {{{#!if 설명9 != null
: }}}[[]] {{{#!if 문단9 != null & 앵커9 == null
문서의 [[#s-|]]번 문단}}}{{{#!if 문단9 == null & 앵커9 != null
문서의 [[#|]] 부분}}}}}}{{{#!if 문서명10 != null
 * {{{#!if 설명10 != null
: }}}[[]] {{{#!if 문단10 != null & 앵커10 == null
문서의 [[#s-|]]번 문단}}}{{{#!if 문단10 == null & 앵커10 != null
문서의 [[#|]] 부분}}}}}}

1. 개요

2. 사용법

• 다크 테마로 전환 (어두운 화면)
  사용 중인 기기의 운영체제나 브라우저에서 다크 모드를 활성화하면 자동으로 적용된다. 다크 모드를 지원하지 않는 기기를 사용 중이거나, 기기 설정과 별개로 나무위키에서 다크 모드를 항상 활성화하려면 상단 오른쪽의 그라바타 아이콘(Member menu) > 설정 > 위키 > 테마 → 다크[1]을 체크하면 된다.
• 다크 테마 배경색 변경 (#1c1d1f → #000)
  설정 > 스킨 > 검은 화면으로를 체크하면 다크 테마의 배경색을 변경할 수 있다.

3. 색상 차이

#!if (문단 == null) == (앵커 == null)
를

#!if 문단 != null & 앵커 == null
의 [[나무위키:문법 도움말#s-|]]번 문단을

#!if 문단 == null & 앵커 != null
의 [[나무위키:문법 도움말#기본 헥스 코드|기본 헥스 코드]][[나무위키:문법 도움말#|]] 부분을

• 라이트 테마에서는 배경이 흰색이나, 다크 테마에서는 검정에 가까운 회색이다.
• 라이트 테마에서는 글씨나 틀/분류/목차의 테두리 등 각종 선이 검은색이나, 다크 테마에서는 밝은 회색이다.
• 라이트 테마에서는 하이퍼링크와 각주, 문단 번호가 파란색(#0275D8)이나, 다크 테마에선 주황색(#eca019)이다.[A]
• 라이트 테마에서는 나무위키 자체 상단바와 모바일 자체 상단바가 청록색(#008275)이나, 다크 테마에서는 어두운 회색(#2d2f34)이다.[A]
• HTML이나 \{{{#!wiki style= 등의 문법을 사용하여 배경색은 지정하였으나 글자색은 지정하지 않은 텍스트의 경우, 기본색상을 따라서 밝은 화면에서는 글자가 검은색이나, 다크 테마에서는 밝은 회색이다.

4. 가독성 문제

• 배경색만 지정하고 글자색은 지정하지 않은 경우
  라이트 테마에서는 어두운 색의 배경으로 지정하지만 않았다면 편하게 읽을 수 있으나, 다크 테마에서는 글자가 회색이다 보니 대부분의 배경색에서 읽기가 매우 불편해진다.
• 글자색만 지정하고 배경색은 지정하지 않은 경우
  링크를 사용하면서도 글자색을 유지하기 위해 강제로 어두운 색으로 설정해놓은 글자의 경우 다크 테마에서는 읽기가 매우 불편해진다.
  
  위 두 경우, 테마 교체에 따른 가독성 문제를 해결하기 위해 다음과 같은 방법을 생각할 수 있다.
• 글자색과 배경색을 전부 지정하지 않는 방법(투명 배경). 어느 한 쪽의 색상이 지정되지 않았고, 상징색이나 가독성 문제도 없어서 색상 요소가 불필요한 곳인데 표의 배경색이 하얀색으로 지정되어있는 등의 경우라면 불필요한 문법을 삭제한다는 측면에서 권장되는 방법이다. 이 경우 별도 문법 없이도 현재 테마의 색상이 자동으로 반영된다.
  표 문법 예시 : || 텍스트 ||
  

  텍스트

• 글자색과 배경색을 전부 지정해서 테마와 관계없이 일정한 색상으로 출력되도록 고정하는 방법. 배경색을 지정하기 어려운 경우에는 사용하기 곤란한 방법이다.
  표 문법 예시 : ||<bgcolor=#00A495><color=#FFF> 나무위키 고유색 ||
  

  나무위키 고유색

• {{{#373a3c,#dddddd ○○}}}와 같이 다크 테마용 색상을 별도로 지정해, 라이트 테마일 경우 #373a3c 색상이 출력되고 다크 테마일 경우 #dddddd 색상이 출력되도록 설정하는 방법이 있다.
  표 문법 예시 : ||<bgcolor=#00A495,#1F2023><color=#FFF,#00A495> 나무위키 고유색 다크에서는 반전 ||
  

  나무위키 고유색 다크에서는 반전

• 기본 배경색과 글자색 모두를 강제 지정하고, 셀에는 개별 색을 지정하는 방법. 흰색 배경의 표에서 다크 테마의 가독성을 향상시킨다. 아래 표 문법 예시는 라이트 테마에서는 서로 차이가 없지만, 다크 테마에서는 서로 차이가 있다.
  {{{||<tablebgcolor=#fff><bgcolor=#00377C><color=#fff> 나무위키 ||

• 배경이 투명하고 내용물이 흰색 또는 검은색에 가까운 사진의 경우
  파일:폴리크레줄렌 구조식.svg처럼 배경이 없는데 검은색 또는 회색 위주로 이루어진 PNG 사진은 다크 테마에선 보기가 어렵다. 가장 두드러지는 곳이 화합물(특히 유기화합물) 문서의 구조식 이미지. 반대로 배경이 없는데 흰색 위주로 이루어진 사진은 라이트 테마에선 보기 어렵다.
• 이런 경우에는 '[[파일:폴리크레줄렌 구조식.svg|bgcolor=#ffffff]]'와 같이 배경색을 사진에 맞는 색상으로 바꾸어 해결할 수 있다.
  
  

  ▲ 배경색 지정 전. [[파일:폴리크레줄렌 구조식.svg|width=100%]]

  ▲ 배경색 지정 후. [[파일:폴리크레줄렌 구조식.svg|width=100%&bgcolor=#ffffff]]

  
  

  (※ 나무위키 다크 모드 기준의 색상 설정임.)

  
  다만 상황에 따라 이미지가 차지하는 면적이 일정 크기 이상인 경우 위에서 설명하였던 것과 같이 화면 대부분이 밝게 나와 눈이 부시는 등의 문제가 있을 수 있으므로 라이트모드에서는 완전 백색, 다크모드에서는 가독성 범위 내에서 완전 백색이 아닌 회색 계열이 표시되도록 하는 것도 검토하여 볼 수 있다.
  

  <nopad>

  <nopad>

  
  

  완전 백색에서의 이미지

  회색 배경에서의 이미지

  
  이 경우 현재 파일 삽입 문법에서는 다크모드를 지원하지 않기 때문에 이미지를 표에 넣어서 표의 배경색을 라이트모드에서의 백색과 다크모드에의 회색으로 각각 대응하도록 할 수 있다.
• 한편, 라이트 모드에서 출력할 사진과 다크 모드에서 출력할 사진을 따로 업로드하여 해결하는 방법도 있다. 사진 두개를 연달아 붙이고 하나에는 라이트 모드 문법을, 다른 하나에는 다크 모드 문법을 삽입하면 된다.
  
  
  

  ---

  
  [[기동전사 건담 수성의 마녀|[[파일:기동전사 건담 수성의 마녀 한국어 로고.svg|width=80%&theme=light]][[파일:기동전사 건담 수성의 마녀 한국어 로고 화이트.svg|width=80%&theme=dark]]]] ||
• 나무위키에서 #!wiki style= 문법으로 색상을 지정 하는 경우[4], 다음과 같이 작성하면 다크 테마 전용 색상이나 배경 등을 지정할 수 있다.
  {{{{{{#!wiki style="color: black;" dark-style="color: white;"
  ...}}}}}}