최근 수정 시각 : 2024-10-01 21:09:30

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


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

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

파일:나무위키 다크모드 프로젝트.svg 파일:나무위키 다크모드 프로젝트 화이트.svg [1]

1. 개요2. 프로젝트 참여3. 예시
3.1. 테마별 색상표3.2. 테이블/글자 색상지정 문법
3.2.1. wiki style 관련 다크모드 문법
3.3. 이미지 다크모드 대응법
3.3.1. 테마별 이미지 업로드3.3.2. 배경색 고정
3.4. 색상 변경 도움말
4. 프로젝트 홍보5. 도움이 필요한 문서6. 프로젝트 성과7. 참가자 서명

[clearfix]

1. 개요

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

2. 프로젝트 참여

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

3. 예시



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

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

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

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

3.1. 테마별 색상표

파일:상세 내용 아이콘.svg   자세한 내용은 나무위키:문법 도움말 문서
번 문단을
기본 헥스 코드 부분을
참고하십시오.


파일:CC-white.svg 이 문단의 내용 중 전체 또는 일부는 문서의 r618에서 가져왔습니다. 이전 역사 보러 가기
파일:CC-white.svg 이 문단의 내용 중 전체 또는 일부는 다른 문서에서 가져왔습니다.
[ 펼치기 · 접기 ]
문서의 r618 ( 이전 역사)
문서의 r ( 이전 역사)
<rowcolor=#fff> 분류 라이트 테마 다크 테마
<colbgcolor=#f5f5f5,#2d2f34> 페이지 배경 #fff|white #1c1d1f[6]
#010101[7]
텍스트 (문서명·문단명·본문)[B] #212529 #e0e0e0
[B] <colbgcolor=#f5f5f5,#2d2f34> 배경 #f5f5f5 #2d2f34
테두리 #ddd #383b40
하이퍼링크[B] 존재하는 문서 #0275d8 #ec9f19
존재하지 않는 문서 #f00|red #dc4343
외부 링크 외부 링크 기호 #008000|green
텍스트 #090
취소선 #808080|gray|grey
문단 접힘 여부 표시 기호 (V표) #666
수평줄 #ccc #383b40
리다이렉트 시 알림 배경 #d9edf7 #2d2f34
텍스트 #0287e0 #ec912a
네임스페이스[11] #545454 #c7c7c7
위험 버튼[12] #d9534f
문서 기여 시
글자수 변화 알림
감소 #f00|red
무변화 #808080|gray|grey
증가 #008000|green
문서 역사 비교 배경(삭제) #fdd #943838
배경(삽입) #cfc #3b5a3b
수정 배경(삭제) #fff|white #d05d5d
수정 배경(삽입) #50ff50 #1c751c
수정 텍스트(삭제) #999 #ddd
수정 텍스트(삽입) #212529 #e0e0e0
토론 댓글 발제자 #b0d3ad #324432
참가자 #d5d5d5 #2d2f34
배경 #f4f4f4 #27292d
테두리·경계선 #808080|gray|grey #383b40
상태 변경 #fc6 #54411a
닫힌 토론 댓글 달기 배경 #eceeef #27292d
텍스트 #55595c #ddd
내비게이션 바 배경 #008275 #2d2f34
텍스트 #fff|ffffff|white
특수 권한 알림[C] 논 호버 #ffa500|orange
호버[D] #f00|red
차단 알림[C] 논 호버 #f00|red
호버[D] #00f|blue
서버 점검 알림 상단 알림바 배경 #f0ef75

[6] 기본 스킨 espejo의 배경색으로, 2024년 1월 26일 이전의 기본 스킨이었던 senkawa는 배경색으로 #1f2023를 사용했었다. [7] 다크는 회색이 아니라 검정입니다!를 켰을 때의 배경색 [B] 기재된 색상은 기본값을 의미하며, 색상 문법을 이용해 편집자가 원하는 색상으로 변경 가능. [B] [B] [11] 이 문서 제목의 '나무위키:' 같은 것을 의미합니다. 일반 문서의 네임스페이스는 '문서:'이나, 디폴트 네임스페이스이므로 문서 제목에 출력되지 않습니다. [12] 문서 삭제 버튼, API Token 발급 버튼 등 [C] 사칭을 방지하기 위해 사용자 문서 본문에 포함되지 않으며, 색이 변하는 것을 이용해 가짜 틀과 구분할 수 있다. [D] PC에서는 마우스를 틀 내에 위치시킴, 모바일에서는 틀을 터치 [C] [D]

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.2.1. wiki style 관련 다크모드 문법

파일:상세 내용 아이콘.svg   자세한 내용은 나무위키:문법 도움말/심화 문서
2번 문단을
부분을
참고하십시오.
{{{#!wiki style="속성 목록" dark-style="다크모드 전용 속성"
속성이 적용된 텍스트}}}
  • 다크모드 전용 속성인 dark-style 경우 기존 속성 목록도 그대로 적용되고 다크모드 모드인 경우 추가적으로 해당 속성이 적용됩니다. 기존 style 속성이랑 겹치는 경우 다크모드 속성으로 적용됩니다.
  • 기존에 화이트 모드에서 고려된 그라데이션 효과를 다크모드에 대응 할 수 있습니다.

3.3. 이미지 다크모드 대응법

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

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

3.3.1. 테마별 이미지 업로드

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

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

3.3.2. 배경색 고정

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

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

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

3.4. 색상 변경 도움말

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

4. 프로젝트 홍보

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

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

5. 도움이 필요한 문서

#ff9933 #9d4e00
#ff9966 #b73d00
#ffcc66 #926200

6. 프로젝트 성과

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

7. 참가자 서명[22]

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

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

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

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

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

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


[17] 특정 링크 아이콘만 포함했을 때 생략이 되는 방식이어서, 이미지 2개가 삽입되자 초록색 외부 링크 아이콘이 다시 나타남. [18] 다크모드 아이콘에는 따로 초록색 외부 링크 아이콘 생략이 적용되지 않아 다크모드 아이콘은 이미지만 숨겨지고 초록 아이콘은 보임. [19] 나무위키 유저가 자체적으로 제작한 사이트 # [20] 마리오 카트 시리즈/캐릭터, 마리오 카트 시리즈/아이템, 마리오 카트 8/캐릭터, 마리오 카트 8/커스터마이징 [21] 마리오 카트 7, 마리오 카트 투어, 마리오 카트 아케이드 그랑프리 시리즈 [22] 꼭 서명을 하지 않으셔도 자유롭게 참여 가능합니다. [대사면] 2023년 5월 7일에 진행된 대사면으로 인해 영구 차단이 해제된 사용자 [대사면] [대사면] [영구차단] [27] 계정 이전 [영구차단] [영구차단] [대사면] [대사면] [영구차단] [영구차단] [영구차단]


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