최근 수정 시각 : 2022-07-03 14:18:58

나무위키:프로젝트/다크 모드


파일:나무위키프로젝트.png
이 문서는 나무위키 프로젝트 관련 문서입니다.

나무위키 프로젝트에 참가하여 주시는 여러분들께 감사드립니다. 참가자 분들은 나무위키:프로젝트 문서와 참가하는 프로젝트 문서에 있는 내용을 꼭 숙지하여 주시기 바랍니다.


1. 개요2. 프로젝트 참여3. 예시
3.1. 테마별 색상표3.2. 테이블/글자 색상지정 문법3.3. 이미지 색상지정 문법3.4. 색상 변경 도움말
4. 프로젝트 홍보5. 도움이 필요한 문서6. 프로젝트 성과7. 참가자 서명

1. 개요

나무위키:테마의 어두운 화면 색상 지정이 적용되지 않은 문서[1]를 어두운 화면에 대응하도록 수정하는 프로젝트입니다.

2. 프로젝트 참여

어두운 화면에서의 가독성 저하는 주로 다음과 같은 경우에 많이 발생합니다.
  • 문서에서 표 배경 색만 밝은 색으로 지정하고 글자는 색상을 지정하지 않았을 때.
    • 'e.g.' 표에서 배경 색을 <table bgcolor=white>로 지정했거나 그라데이션으로 설정했는데 글자 색상은 따로 지정하지 않았다면, 다크 모드 사용 시 배경은 설정한대로 흰색으로 나오는데 글자는 다크 모드 기본 텍스트 색상인 밝은 회색 계열로 나와 배경과 글자를 구분할 수 없게 됩니다.
    • 다크 모드의 하이퍼링크 색상이 밝은 오렌지색이라 배경 색이 밝은 계열이라면 하이퍼링크도 마찬가지로 배경과 글자가 잘 구분되지 않는 문제가 발생합니다. 하이퍼링크 색은 하이퍼링크마다 따로 문법을 넣어야 색상 지정이 가능하기에 일반 글자 색을 지정하더라도 하이퍼링크까진 미처 색상을 지정하지 않는 경우가 있어[2] 문제가 되기도 합니다.
  • 표의 넓은 범위를 밝은 색으로 지정했을 때.
    • 다크 모드는 말 그대로 화면을 최대한 어둡게 보기 위해 사용하는데, 화면을 넓게 차지하는 부분을 밝은 색으로 지정하면 다크 모드를 쓰더라도 화면 대부분이 밝게 나오게 됩니다.

3. 예시



파일:CC-white.svg 이 문단의 내용 중 전체 또는 일부는 문서의 r172에서 가져왔습니다. 이전 역사 보러 가기
파일:CC-white.svg 이 문단의 내용 중 전체 또는 일부는 다른 문서에서 가져왔습니다.
[ 펼치기 · 접기 ]
문서의 r172 ( 이전 역사)
문서의 r ( 이전 역사)
  • 각 모드에서 볼 때의 예시
{{{ <tablebgcolor=#ffffff}}},#1f2023{{{> 제목 }}}
라이트 모드에서 볼 때 다크 모드에서 볼 때
제목 제목
{{{ }}} 제목 {{{ }}}
라이트 모드에서 볼 때 다크 모드에서 볼 때[3]
<rowcolor=#373a3c> 제목 제목
위와 같이 배경이 백색[4] 등 밝은 색으로만 설정되어 있는 경우, 문법에 #010101, #1f2023, #2d2f34, #191919, #000000 등 다크 모드에 대응하는 색상도 추가해주세요.

혹은 배경과 글자 중 어느 한 쪽의 무의미한 색상 지정일 경우 지정되어있는 한 쪽의 색상 문법을 지정 해제(삭제)함으로서 투명(기본값)하게 만들어 테마에서 기본으로 지정된 색상을 자동으로 따라가도록 만드는 방법도 있습니다.

각 문서의 문서의 상황을 고려하여 대표적으로 아래와 같은 3가지의 방법을 생각해 볼 수 있습니다.
  • 각 사례별 문법 적용 예시
    • 글자색과 배경색을 전부 지정하지 않는 방법(투명 배경). 어느 한 쪽의 색상이 지정되지 않았고, 상징색이나 가독성 문제도 없어서 색상 요소가 불필요한 곳인데 표의 배경색이 하얀색으로 지정되어있는 등의 경우라면 불필요한 문법을 삭제한다는 측면에서 권장되는 방법이다. 이 경우 별도 문법 없이도 현재 테마의 색상이 자동으로 반영된다.
      표 문법 예시 : || 텍스트 ||
      텍스트
    • 글자색과 배경색을 전부 지정해서 테마와 관계없이 일정한 색상으로 출력되도록 고정하는 방법. 배경색을 지정하기 어려운 경우에는 사용하기 곤란한 방법이다.
      표 문법 예시 : ||<bgcolor=#00a495><color=#ffffff> 나무위키 고유색 ||
      나무위키 고유색
    • {{{#373a3c,#dddddd ○○}}}와 같이 다크 테마용 색상을 별도로 지정해, 라이트 테마일 경우 #373a3c 색상이 출력되고 다크 테마일 경우 #dddddd 색상이 출력되도록 설정하는 방법이 있다.
      표 문법 예시 : ||<bgcolor=#00a495,#1f2023><color=#ffffff,#00a495> 나무위키 고유색 다크에서는 반전 ||
      나무위키 고유색 다크에서는 반전

3.1. 테마별 색상표



파일:CC-white.svg 이 문단의 내용 중 전체 또는 일부는 문서의 r262에서 가져왔습니다. 이전 역사 보러 가기
파일:CC-white.svg 이 문단의 내용 중 전체 또는 일부는 다른 문서에서 가져왔습니다.
[ 펼치기 · 접기 ]
문서의 r262 ( 이전 역사)
문서의 r ( 이전 역사)
<rowcolor=#000,#ddd> 분류 라이트 테마 다크 테마
배경 <colcolor=#fff> #ffffff <colcolor=#fff> #1f2023
#010101
배경 #f5f5f5 #2d2f34
테두리 #dddddd #383b40
텍스트 #373a3c #dddddd
하이퍼링크 #0275d8 #ec9f19
존재하지 않는 문서 #ff0000 #dc4343
네임스페이스 #545454 #c7c7c7
문서 역사 비교 추가 #ccffcc #3b5a3b
제거 #ffdddd #943838
토론 스레드 발제자 #b0d3ad #324432
참가자 #d5d5d5 #2d2f34
배경 #f4f4f4 #27292d
테두리 #808080 #383b40
경계선
상태 변경 #ffcc66 #54411a
닫힌 토론 댓글 배경 #eceeef #27292d
텍스트 #55595c #dddddd

3.2. 테이블/글자 색상지정 문법



파일:CC-white.svg 이 문단의 내용 중 전체 또는 일부는 문서의 r1857에서 가져왔습니다. 이전 역사 보러 가기
파일:CC-white.svg 이 문단의 내용 중 전체 또는 일부는 다른 문서에서 가져왔습니다.
[ 펼치기 · 접기 ]
문서의 r1857 ( 이전 역사)
문서의 r ( 이전 역사)
  • 테이블 색상: 자세한 색상 표기 방법에 관해서는 텍스트 색상 문단을 참고하시기 바랍니다.
    • 색상 지정 우선 순위: 셀 지정 > 한 열 지정 > 한 행 지정 > 테이블 전체 지정
    • 주의: 텍스트 색상 문법과는 달리, CSS 색상명을 사용할 경우 앞에 #를 붙이지 않습니다.
    • 배경색
      tablebgcolor <colbgcolor=#80c0bb>colbgcolor

      rowbgcolor

      bgcolor
      • 셀 지정: <bgcolor=#RRGGBB>
        • 주의: 앞에 bgcolor=이 없는 <#RRGGBB><red> 형식은 지원이 중단될 예정입니다.
        • 비표준 문법으로 셀 배경에 그라데이션을 적용할 수 있습니다. 참고.
    • 글자색
      • 셀 지정: <color=#RRGGBB>
      • 테이블 전체 지정: <tablecolor=#RRGGBB> 또는 color=#RRGGBB>
      • 한 행 지정: <rowcolor=#RRGGBB>
      • 한 열 지정: <colcolor=#RRGGBB>
    • 테두리 색: <tablebordercolor=#RRGGBB> 또는 bordercolor=#RRGGBB>

3.3. 이미지 색상지정 문법

파일:external/upload.wikimedia.org/250px-Policresulen.svg.png

위와 같이 배경색이 투명으로 된 png 등의 이미지는 라이트, 다크 테마에 따라 배경이 다른 색상으로 보이게 됩니다. 아래는 위 이미지가 라이트 테마에서 봤을 때, 다크 테마에서 봤을 때 각각 어떻게 보이는지 설명하는 이미지입니다.
파일:external/upload.wikimedia.org/250px-Policresulen.svg.png
파일:external/upload.wikimedia.org/250px-Policresulen.svg.png
라이트 테마에서 보이는 이미지 다크 테마에서 보이는 이미지
이렇듯 배경색이 투명인 이미지는 테마 변경에 따라 바뀌는 배경색으로 인해 이미지가 잘 보이지 않게 될 수도 있습니다. 이를 해결하기 위해선 이미지를 표 안에 넣고 이미지를 넣은 셀에 적절한 배경색을 설정하거나, 이미지 자체에 배경색을 부여하는 방법이 있습니다.
[[파일:파일명.png|bgcolor=#ffffff]]
위 예시와 같이 파일 삽입 문법에 'bgcolor' 문법을 추가하면 테마를 바꿔도 배경색이 무조건 설정한 색상으로 출력됩니다. 크기 문법과 함께 사용하고자 한다면 'width=100%&bgcolor=#ffffff' 식으로 문법을 추가하시면 됩니다.

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

이 경우 현재 파일 삽입 문법에서는 다크모드를 지원하지 않기 때문에 이미지를 표에 넣어서 표의 배경색을 라이트모드에서의 백색과 다크모드에의 회색으로 각각 대응하도록 할 수 있습니다.
{{{ 파일:파일명.png }}}
웹페이지에서 자주 사용하는 회색
(참고용 : # + 동일 숫자나 영문(16진수) 3자리만을 입력해 자주 사용하던 것으로 절대적인 지침으로서의 색상은 아닙니다.)
#333
#666
#999
#ccc
#ddd
#eee

3.4. 색상 변경 도움말

색상 변경에 대해 어려운 점이 있다면 아래 사이트들을 참고하십시오. PC로 보시는 것을 권장합니다.

4. 프로젝트 홍보


파일:나무위키프로젝트.png 이 사용자는 나무위키:프로젝트/다크 모드의 참가자입니다.
파일:완료된프로젝트.png 이 사용자는 나무위키:프로젝트/다크 모드의 참가자였습니다.
파일:중단된프로젝트.png 이 사용자는 나무위키:프로젝트/다크 모드의 참가자였습니다.

사용자 문서에서 이 틀을 이용해 프로젝트를 홍보해 주세요. 틀을 사용하는 문법은 다음과 같습니다.
[include(틀:유저박스/프로젝트, 프로젝트=나무위키:프로젝트/다크 모드)]

5. 도움이 필요한 문서

6. 프로젝트 성과

파일:상세 내용 아이콘.svg   자세한 내용은 나무위키:프로젝트/다크 모드/프로젝트 성과 문서
번 문단을
부분을
참고하십시오.

7. 참가자 서명[6]

===# 서명 방법 #===
  • 나무위키의 닉네임이나 아이피를 그대로 적어주세요.
  • 비로그인 유저의 경우
    * [[https://namu.wiki/contribution/ip/아이피/document|아이피]]

    * --[[https://namu.wiki/contribution/ip/아이피/document|아이피]]-- - 영구차단됨

    '아이피' 자리에 참가자의 아이피를 그대로 적어주세요.
  • 로그인 유저의 경우
    * [[사용자:닉네임|닉네임]]

    * --[[사용자:닉네임|닉네임]]-- - 영구차단됨

    '닉네임' 자리에 참가자의 나무위키에서의 닉네임을 그대로 적어주세요.

===# 목록 #===
참가자는 참가한 순서대로 정렬합니다. 신규 참가자는 문단 맨 밑에 서명을 남겨주세요.


[1] 주로 어두운 화면 색상 지정이 추가되기 이전에 서술된 문서들. [2] 현재 다크모드 기본 링크 색이 예전보다 다소 밝아졌는데, 밝아지기 이전엔 따로 색상을 안 넣어도 글자가 보여서 굳이 별도 색상을 안 넣었다가 패치 이후 문제가 된 경우도 있습니다. [3] 가장 흔하게 문제되는 사례가 백색(white or #ffffff)입니다. [4] 다만 이는 상술했듯 눈이 아플 수 있으므로 되도록 쓰지 않는 것을 권장합니다. [5] 2010년은 대응 완료. [6] 꼭 서명을 하지 않으셔도 자유롭게 참여 가능합니다. [영구차단] [영구차단] [영구차단] [영구차단] [11] 계정 이전 [영구차단] [영구차단] [영구차단]


파일:CC-white.svg 이 문서의 내용 중 전체 또는 일부는 문서의 r33에서 가져왔습니다. 이전 역사 보러 가기
파일:CC-white.svg 이 문서의 내용 중 전체 또는 일부는 다른 문서에서 가져왔습니다.
[ 펼치기 · 접기 ]
문서의 r33 ( 이전 역사)
문서의 r ( 이전 역사)