나무위키:테마

덤프버전 : r20200302


파일:나무위키+넘겨주기.png   관련 문서: 나무위키:프로젝트/다크 모드

1. 개요
2. 차이점
3. 색상
4. 가독성 문제



1. 개요[편집]


the seed 엔진에서 테마를 바꿀 수 있는 기능. 기본 모드인 라이트 테마와 화면이 어둡게 나오는 다크 테마가 존재한다. 현재 이 문장이 보인다면 다크 테마다.

2. 차이점[편집]


  • 라이트 테마에서는 배경이 흰색이나, 다크 테마에서는 회색이다.
  • 라이트 테마에서는 글씨나 틀/분류/목차의 테두리 등 각종 선이 검은색이나, 다크 테마에서는 흰색이다. 단, 해당 내용이 표 안에 있을 경우, 양쪽에서 다 검은색이다.
  • 라이트 테마에서는 하이퍼링크가 파란색이나, 다크 테마에선 주황색이다.
  • 라이트 테마에서는 나무위키 자체 상단바와 모바일 자체 상단바가 청록색이나, 다크 테마에서는 회색이다.
  • 라이트 테마에서 문서의 두 버전을 비교하면 추가된 내용은 초록색, 삭제된 내용은 분홍빛 빨간색 배경에 나타나나, 다크 테마는 이 둘이 서로 반대이다.
  • HTML이나 \{{{#!wiki style= 등의 문법을 사용하여 배경색은 지정하였으나 글자색은 지정하지 않은 텍스트의 경우, 밝은 화면에서는 글자가 검은색이나, 다크 테마에서는 회색이다.


3. 색상[편집]



라이트 테마
다크 테마
기본 (회색)
검정
텍스트
#373A3C

#DDDDDD

배경
#FFFFFF

#1F2023

#010101

표 배경
#F5F5F5

#2D2F34

표 테두리
#DDDDDD

#383B40

링크
#0275D8

#EC9F19

네비게이션 바 배경
#008275

#2D2F34

네비게이션 바 텍스트
#FFFFFF

#FFFFFF



4. 가독성 문제[편집]


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

이러한 문제의 예시를 들면,
  • 배경색만 지정하고 글자색은 지정하지 않은 경우: 밝은 화면에서는 어두운 색의 배경으로 지정하지만 않았다면 편하게 읽을 수 있으나, 다크 테마에서는 글자가 회색이다 보니 대부분의 배경색에서 읽기가 매우 불편해진다.
  • 글자색만 지정하고 배경색은 지정하지 않은 경우: 링크를 사용하면서도 글자색을 유지하기 위해 강제로 어두운 색으로 설정해놓은 글자의 경우 다크 테마에서는 읽기가 매우 불편해진다.

위 두 경우, 테마 교체에 따른 가독성 문제를 해결하기 위해 다음과 같은 방법을 생각할 수 있다.
  • 글자색과 배경색을 전부 지정해서 테마와 관계없이 일정한 색상으로 출력되도록 고정하는 방법[1]
  • {{{#373A3C,#DDDDDD ○○}}}
    와 같이 다크 테마용 색상을 별도로 지정해, 라이트 화면일 경우 #373A3C 색상이 출력되고 다크 화면일 경우 #DDDDDD 색상이 출력되도록 설정하는 방법

  • 파일:800px-Imgur_logo.svg.png처럼 배경이 없는데 검은색 또는 회색 위주로 이루어진 PNG 사진은 다크 테마에선 보기가 어렵다. 가장 두드러지는 곳이 화합물(특히 유기화합물) 문서의 구조식 이미지. 반대로 배경이 없는데 흰색 위주로 이루어진 사진은 밝은 화면에선 보기 어렵다.

이 경우
[[파일:800px-Imgur_logo.svg.png|bgcolor=#FFFFFF]]
와 같이 이미지 배경색을 지정해 해결할 수 있다.

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


[1] 배경색을 지정하기 어려운 경우에는 사용하기 곤란한 방법이다.