최근 수정 시각 : 2022-11-30 03:38:27

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


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

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


1. 개요2. 프로젝트 참여3. 예시
3.1. 테마별 색상표3.2. 테이블/글자 색상지정 문법3.3. 이미지 다크모드 대응법
3.3.1. 테마별 이미지 업로드3.3.2. 배경색 고정
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. 이미지 다크모드 대응법

파일:폴리크레줄렌 구조식.png

위와 같이 배경색이 투명으로 된 png 등의 이미지는 라이트, 다크 테마에 따라 배경이 다른 색상으로 보이게 됩니다. 아래는 위 이미지가 라이트 테마에서 봤을 때, 다크 테마에서 봤을 때 각각 어떻게 보이는지 설명하는 이미지입니다.
파일:폴리크레줄렌 구조식.png
파일:폴리크레줄렌 구조식.png
라이트 테마에서 보이는 이미지 다크 테마에서 보이는 이미지
이렇듯 배경색이 투명인데 흰색이나 검은색으로 된 이미지는 테마 변경에 따라 바뀌는 배경색으로 인해 이미지가 잘 보이지 않게 될 수도 있습니다. 이를 해결하기 위해선 몇가지 방법이 있습니다.

3.3.1. 테마별 이미지 업로드

2022년 11월 10일부터 나무위키에서 지원하는 방식으로, 다크 모드 이미지라이트 모드 이미지를 각각 업로드하여 현재 모드에 따른 이미지 표시 여부를 지정하는 방식이 있습니다.
[[파일:폴리크레줄렌 구조식.png|theme=light]][[파일:폴리크레줄렌 구조식 화이트.png|theme=dark]]
위와 같이 하면 일반적인 라이트 모드에서는 다크 모드 이미지가 보이지 않으며, 반대로 다크 모드에서는 라이트 모드 이미지가 보이지 않게 됩니다.
파일:폴리크레줄렌 구조식.png 파일:폴리크레줄렌 구조식 화이트.png
다크 모드로 변경시 이미지 바뀜

참고로 이 방식을 링크 아이콘에 사용하면, 원래 초록색 외부 링크 아이콘이 생략되는 아이콘에 아이콘이 생략되지 않는 문제가 있습니다.
파일:GitHub 아이콘.svg 파일:GitHub 아이콘.svg 파일:GitHub 아이콘 화이트.svg 파일:GitHub 아이콘.svg 파일:GitHub 아이콘 화이트.svg
다크모드 비설정 링크 하나에 둘다 적용[5] 2개의 링크에 따로 적용[6]

3.3.2. 배경색 고정

대부분의 상황에서는 위의 다크모드 이미지를 추가로 업로드하는 방식이 좋으나, 로고가 공식적으로 다른 색 버전을 지원하지 않거나 하는 등의 이유로 다크모드 이미지를 따로 업로드하기 곤란한 경우 배경색을 고정하는 방식을 사용할 수도 있습니다.

어두운 배경에서 잘 보이지 않는 이미지를 표 안에 넣고 이미지를 넣은 셀을 밝은 배경색으로 고정 설정하거나, 이미지 자체에 배경색을 부여하는 방법이 있습니다.
[[파일:파일명.png|bgcolor=#ffffff]]
위 예시와 같이 파일 삽입 문법에 'bgcolor' 문법을 추가하면 테마를 바꿔도 배경색이 무조건 설정한 색상으로 출력됩니다. 크기 문법과 함께 사용하고자 한다면 'width=100%&bgcolor=#ffffff' 식으로 문법을 추가하시면 됩니다.
파일:폴리크레줄렌 구조식.png
파일:폴리크레줄렌 구조식.png
완전 백색에서의 이미지 회색 배경에서의 이미지
다만 상황에 따라 이미지가 차지하는 면적이 일정 크기 이상인 경우 위에서 설명하였던 것과 같이 화면 대부분이 밝게 나와 눈이 부시는 등의 문제가 있을 수 있으므로 라이트모드에서는 완전 백색, 다크모드에서는 가독성 범위 내에서 완전 백색이 아닌 회색 계열이 표시되도록 하는 것도 검토하여 볼 수 있습니다.

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

3.4. 색상 변경 도움말

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

4. 프로젝트 홍보

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

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

5. 도움이 필요한 문서

6. 프로젝트 성과

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

7. 참가자 서명[10]

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

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

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

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

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

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

[1] 주로 어두운 화면 색상 지정이 추가되기 이전에 서술된 문서들. [2] 현재 다크모드 기본 링크 색이 예전보다 다소 밝아졌는데, 밝아지기 이전엔 따로 색상을 안 넣어도 글자가 보여서 굳이 별도 색상을 안 넣었다가 패치 이후 문제가 된 경우도 있습니다. [3] 가장 흔하게 문제되는 사례가 백색(white or #ffffff)입니다. [4] 다만 이는 상술했듯 눈이 아플 수 있으므로 되도록 쓰지 않는 것을 권장합니다. [5] 특정 링크 아이콘만 포함했을 때 생략이 되는 방식이어서, 이미지 2개가 삽입되자 초록색 외부 링크 아이콘이 다시 나타남. [6] 다크모드 아이콘에는 따로 초록색 외부 링크 아이콘 생략이 적용되지 않아 다크모드 아이콘은 이미지만 숨겨지고 초록 아이콘은 보임. [7] 2010년은 대응 완료. [8] 마리오 카트 시리즈/캐릭터, 마리오 카트 시리즈/아이템, 마리오 카트 8/캐릭터, 마리오 카트 8/커스터마이징 [9] 마리오 카트 7, 마리오 카트 투어, 마리오 카트 아케이드 그랑프리 시리즈 [10] 꼭 서명을 하지 않으셔도 자유롭게 참여 가능합니다. [영구차단] [영구차단] [영구차단] [영구차단] [15] 계정 이전 [영구차단] [영구차단] [영구차단]


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