최근 변경최근 토론
특수 기능
 

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

최근 수정 시각:
51
편집
IP 우회 수단(프록시 서버, VPN, Tor 등)이나 IDC 대역 IP로 접속하셨습니다. (#'30183489')
(VPN이나 iCloud의 비공개 릴레이를 사용 중인 경우 나타날 수 있습니다.)
잘못된 IDC 대역 차단이라고 생각하시는 경우 게시판에 문의하시길 바랍니다.
토론역사
분류
 
 
 
 
나무위키프로젝트나무위키프로젝트 c7c7c7
이 문서는 나무위키 프로젝트 관련 문서입니다.

나무위키 프로젝트에 참가하여 주시는 여러분들께 감사드립니다. 참가자 분들은 나무위키:프로젝트 문서와 참가하는 프로젝트 문서에 있는 내용을 꼭 숙지하여 주시기 바랍니다.
가독성 개선
다크 모드
대문 기념일
맞춤법 개선
문서 규범화
봇 운용
분류 개선
역링크 개선
이미지 벡터화
틀 개선
파일 분류 개선
나무위키 다크 모드 프로젝트 ...나무위키 다크 모드 프로젝트 ...
위 이미지는 밝은 화면에서는 검은색으로,
어두운 화면에서는 흰색으로 보입니다.
나무위키 다크 모드 프로젝트
 
 
 
 
1. 개요2. 프로젝트 참여3. 예시
3.1. 테마별 색상표3.2. 테이블/글자 색상지정 문법
3.2.1. 배경색 고정
3.3. 색상 변경 도움말
4. 프로젝트 홍보5. 도움이 필요한 문서6. 프로젝트 성과7. 참가자 서명
7.1. 서명 방법7.2. 목록
 
 
 
 

1. 개요[편집]

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

2. 프로젝트 참여[편집]

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

2025년 4월 6일 다크모드에서의 색상이 지정이 되지 않은 경우 자동으로 색상을 대응(색상 반전)시키는 업데이트가 있었습니다. 이로 인해 색상이 이상해지거나 글자색이 흐려져 가독성이 떨어지는 등의 문제가 발생하였기 때문에 관련 문서의 편집이 필요합니다.
 
 
 
 

3. 예시[편집]

 
 
 
 
상세 내용 아이콘   자세한 내용은 나무위키:테마 문서의 가독성 문제 부분을 참고하십시오.
CC-white 이 문단의 내용 중 전체 또는 일부는 문서의 r225 판, 4번 문단에서 가져왔습니다. 이전 역사 보러 가기
  • 각 모드에서 볼 때의 예시
||<tablebgcolor=#ffffff,#1c1d1f> 제목 ||
라이트 모드에서 볼 때
다크 모드에서 볼 때
제목
제목
||<tablebgcolor=#ffffff><tablecolor=#212529> 제목 ||
라이트 모드에서 볼 때
다크 모드에서 볼 때[4]
제목
제목
위와 같이 배경이 백색[5] 등 밝은 색으로만 설정되어 있는 경우, 문법에 #010101, #1c1d1f, #1f2023, #2d2f34, #191919, #000000 등 다크 모드에 대응하는 색상도 추가해주세요.

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

각 문서의 문서의 상황을 고려하여 대표적으로 아래와 같은 3가지의 방법을 생각해 볼 수 있습니다.
  • 각 사례별 문법 적용 예시
    • 글자색과 배경색을 전부 지정하지 않는 방법(투명 배경). 어느 한 쪽의 색상이 지정되지 않았고, 상징색이나 가독성 문제도 없어서 색상 요소가 불필요한 곳인데 표의 배경색이 하얀색으로 지정되어있는 등의 경우라면 불필요한 문법을 삭제한다는 측면에서 권장되는 방법이다. 이 경우 별도 문법 없이도 현재 테마의 색상이 자동으로 반영된다.
      표 문법 예시 : || 텍스트 ||
      텍스트
    • 글자색과 배경색을 전부 지정해서 테마와 관계없이 일정한 색상으로 출력되도록 고정하는 방법. 배경색을 지정하기 어려운 경우에는 사용하기 곤란한 방법이다.
      표 문법 예시 : ||<bgcolor=#00A495><color=#FFF> 나무위키 고유색 ||
      나무위키 고유색
    • {{{#373a3c,#dddddd ○○}}}와 같이 다크 테마용 색상을 별도로 지정해, 라이트 테마일 경우 #373a3c 색상이 출력되고 다크 테마일 경우 #dddddd 색상이 출력되도록 설정하는 방법이 있다.
      표 문법 예시 : ||<bgcolor=#00A495,#1C1D1F><color=#FFF,#00A495> 나무위키 고유색 다크에서는 반전 ||
      나무위키 고유색 다크에서는 반전
    • 기본 배경색과 글자색 모두를 강제 지정하고, 셀에는 개별 색을 지정하는 방법. 흰색 배경의 표에서 다크 테마의 가독성을 향상시킨다. 아래 표 문법 예시는 라이트 테마에서는 서로 차이가 없지만, 다크 테마에서는 서로 차이가 있다.
      ||<tablebgcolor=#fff><bgcolor=#00377C><color=#fff> 나무위키 ||
|| 여러분이 가꾸어 나가는 지식의 나무 ||
      나무위키
      여러분이 가꾸어 나가는 지식의 나무
      ||<tablebgcolor=#fff><tablecolor=#000><bgcolor=#00377C><color=#fff> 나무위키 ||
|| 여러분이 가꾸어 나가는 지식의 나무 ||
      나무위키
      여러분이 가꾸어 나가는 지식의 나무
      ||<tablebgcolor=#fff,#000><tablecolor=#000,#fff><bgcolor=#00377C><color=#fff> 나무위키 ||
|| 여러분이 가꾸어 나가는 지식의 나무 ||
      나무위키
      여러분이 가꾸어 나가는 지식의 나무
[1] 주로 어두운 화면 색상 지정이 추가되기 이전에 서술된 문서들.[2] #e0e0e0(■)[3] 현재 다크모드 기본 링크 색이 예전보다 다소 밝아졌는데, 밝아지기 이전엔 따로 색상을 안 넣어도 글자가 보여서 굳이 별도 색상을 안 넣었다가 패치 이후 문제가 된 경우도 있습니다.[4] 가장 흔하게 문제되는 사례가 백색(white or #ffffff)입니다.[5] 다만 이는 상술했듯 눈이 아플 수 있으므로 되도록 쓰지 않는 것을 권장합니다.

 
 
 
 

3.1. 테마별 색상표[편집]

 
 
 
 
상세 내용 아이콘   자세한 내용은 나무위키:문법 도움말 문서의 기본 헥스 코드 부분을 참고하십시오.
CC-white 이 문단의 내용 중 전체 또는 일부는 문서의 r876 판, 18번 문단에서 가져왔습니다. 이전 역사 보러 가기
분류
라이트 테마
다크 테마
페이지 배경
#fff｜white
#1c1d1f[6]
#000[7]
텍스트 (문서명·문단명·본문)[B]
#212529
#e0e0e0
주석
#008000
#608b4e
표[B]
배경
#f5f5f5
#2d2f34
테두리
#ddd
#383b40
하이퍼링크
각주[B][C]
존재하는 문서
일반
#0275d8
#ec9f19
호버
#0263b8
#bd7f14
존재하지 않는 문서
#f00｜red
#dc4343
외부 링크
바깥 고리 기호
#008000｜green
텍스트
일반
#090
호버
취소선
#808080｜gray｜grey
문단
접힘 여부
표시 기호 (V표)
#666
수평줄
#ccc
#383b40
인용문[C]
줄 색깔
#71bc6d
#666c75
배경
#eee
#2d2f34
테두리
#ccc
#383b40
리다이렉트 시 알림
배경
#cee2fd
#2d2f34
텍스트
#0b3574
#ec912a
네임스페이스[13]
배경[14]
#d4f0e3
#545c5b[15]
위험 버튼[16]
#d9534f
문서 기여 시
글자수 변화 알림
감소
#f00｜red
무변화
#808080｜gray｜grey
증가
#008000｜green
문서 역사 비교
배경
삭제
#fdd
#943838
삽입
#cfc
#3b5a3b
수정 배경
삭제
#fff｜white
#d05d5d
삽입
#50ff50
#1c751c
수정 텍스트
삭제
#999
#ddd
삽입
#212529
#e0e0e0
토론
토론 상태
중지됨
#b1b1b7
#828282
닫힘
#639
#442167
토론 댓글
발제자
#b0d3ad
#324432
참가자
#d5d5d5
#2d2f34
배경
#f4f4f4
#27292d
테두리
경계선
#808080｜gray｜grey
#383b40
상태 변경
#fc6
#54411a
닫힌 토론 댓글 달기
배경
#eceeef
#27292d
텍스트
#55595c
#ddd
내비게이션 바
배경
#008275
#2d2f34
텍스트
#fff｜ffffff｜white
특수 권한 알림[D]
논 호버
#ffa500｜orange
호버[E]
#f00｜red
차단 알림[D]
논 호버
#f00｜red
호버[E]
#00f｜blue
차단
일반 차단
#808080｜gray
로그인 허용 차단
#008000｜green
IDC 차단
#f8c471
서버 점검 알림
상단 알림바 배경
#f0ef75
나무위키 색상
#00a495
#2d2f34
나무위키
브랜드 색상
espejo 스킨
기본색1
#00a69c
#2e3033
기본색2
#28b472
밝은색1
#bfe9d5
#c0c1c2
밝은색2
#d4f0e3
liberty 스킨
기본색
#008275
#2d2f34
어두운색
#00413b
#16171a
밝은색
#80c1ba
#383b40
[6] 기본 스킨 espejo의 배경색으로, 2024년 1월 26일 이전의 기본 스킨이었던 senkawa는 배경색으로 #1f2023를 사용했었다.[7] "검은화면으로" 설정을 켰을 때의 배경색[B] 8.1 8.2 8.3 기재된 색상은 기본값을 의미하며, 색상 문법을 이용해 편집자가 원하는 색상으로 변경 가능.[C] 11.1 11.2 색을 바꿀 수 없다.[13] 이 문서 제목의 '나무위키:' 같은 것을 의미합니다. 일반 문서의 네임스페이스는 '문서:'이나, 디폴트 네임스페이스이므로 문서 제목에 출력되지 않습니다.[14] espejo의 배경색으로, 2024년 1월 26일 이전의 기본 스킨이었던 senkawa는 글자색(#545454,#c7c7c7)으로 처리 했었다.[15] 투명도 30%[16] 문서 삭제 버튼, API Token 발급 버튼 등[D] 17.1 17.2 사칭을 방지하기 위해 사용자 문서 본문에 포함되지 않으며, 색이 변하는 것을 이용해 가짜 틀과 구분할 수 있다.[E] 18.1 18.2 PC에서는 마우스를 틀 내에 위치시킴, 모바일에서는 틀을 터치

 
 
 
 

3.2. 테이블/글자 색상지정 문법[편집]

 
 
 
 
상세 내용 아이콘   자세한 내용은 나무위키:문법 도움말 문서의 테이블의 크기와 색상 부분을 참고하십시오.
CC-white 이 문단의 내용 중 전체 또는 일부는 문서의 r769 판, 13.4번 문단에서 가져왔습니다. 이전 역사 보러 가기
  • 색상 관련 공통 사항
    • 자세한 색상 표기 방법은 텍스트 색상 문단을 참고하시기 바랍니다.
    • 색상 지정 우선 순위: 개별 셀 지정 > 한 열 지정 > 한 행 지정 > 테이블 전체 지정
    • 주의: 텍스트 색상 문법과는 달리, CSS 색상명을 사용할 경우 앞에 #를 붙이지 않습니다.
      • 예시: <bgcolor=white>, <tablecolor=black>...
    • 색상 지정시 (기본 색상),(다크 테마용 색상)과 같이 콤마(,)로 구분하여 다크 테마용 색깔을 지정할 수 있습니다.
      • <bgcolor=#RRGGBB>: 테마와 관계없이 언제나 동일한 색상이 적용됩니다.
      • <bgcolor=#RRGGBB,#RRGGBB>: 첫 번째 색상은 라이트 테마, 두 번째 색상은 다크 테마에서 적용됩니다.
      • 예시: <bgcolor=#00a495,#2d2f34>, <tablecolor=#00a495,#2d2f34>...
    • 다크 모드에서는 아래와 같이 문서가 표현될 수 있도록 서술하는 것을 우선합니다. 이 때 문서의 배경과 텍스트의 색을 지정할 때 고대비(명암비[21] 4.5 이상)를 권장합니다.
      • 배경: 어두운 색상(다크 모드 배경 - 문서 배경 간 명암비 3 이하)
      • 텍스트: 밝은 색상(문서 배경 - 텍스트 간 명암비 4.5 이상)
  • 테이블 배경색
    • 개별 셀 지정: <bgcolor=#RRGGBB>
      • 주의: 앞에 bgcolor=이 없는 <#RRGGBB>나 <red> 형식은 지원이 중단될 예정입니다.
      • 비표준 문법으로 셀 배경에 그라데이션을 적용할 수 있습니다. 심화 문법의 응용 예시 참고.
    • 한 열 지정: <colbgcolor=#RRGGBB>
      • 색상을 지정한 셀부터 아래로만 적용됩니다. 빈 셀에는 색상이 적용되지 않습니다.
      • 주의: <col bgcolor=#RRGGBB>는 지원하지 않습니다.
    • 한 행 지정: <rowbgcolor=#RRGGBB>
      • 주의: <row bgcolor=#RRGGBB>는 지원하지 않습니다.
    • 테이블 전체 지정: <tablebgcolor=#RRGGBB> 또는 <table bgcolor=#RRGGBB>
    • 우선 순위: bgcolor > colbgcolor > rowbgcolor > tablebgcolor
      tablebgcolor
      colbgcolor
      rowbgcolor
      bgcolor
      • 2칸 이상이 합쳐진 셀의 경우, 셀을 합치는 명령어 <-2>/<|2>같은 명령어가 입력된 셀의 것을 따라갑니다. 즉 입력한 숫자 값만큼 왼쪽/위의 셀의 것을 따라갑니다.
        tablebgcolor
        <|2>
        colbgcolor
        rowbgcolor
        <-2>
        bgcolor
    • 다크 테마용 색상 관련 주의: 다크 테마용 색상을 적용시킨 한 열 지정 문법과 셀 지정 문법이 충돌하게 되면, 셀 지정 문법에 다크 테마용 색상을 적용시키지 않는 이상 다크 테마에서는 셀 지정 문법의 색상 코드가 사라지는 버그가 있습니다.
      • 예시: <colbgcolor=#FFF,#000>와 <bgcolor=#F5F5F5>가 충돌할 경우 라이트 테마에서는 #F5F5F5, 다크 테마에서는 #000 색상으로 출력됩니다. 다크 테마에서도 #F5F5F5 색상을 유지하고 싶은 경우엔 <bgcolor=#F5F5F5,#F5F5F5>로 입력해야 합니다.
  • 글자색
    • 개별 셀 지정: <color=#RRGGBB>, <color#RRGGBB>
    • 한 열 지정: <colcolor=#RRGGBB>
      • 색상을 지정한 셀부터 아래로만 적용됩니다.
      • 주의: <col color=#RRGGBB>는 지원하지 않습니다.
    • 한 행 지정: <rowcolor=#RRGGBB>
      • 주의: <row color=#RRGGBB>는 지원하지 않습니다.
    • 테이블 전체 지정: <tablecolor=#RRGGBB> 또는 <table color=#RRGGBB>
    • 우선 순위: color > colcolor > rowcolor > tablecolor
  • 테두리색: <tablebordercolor=#RRGGBB> 또는 <table bordercolor=#RRGGBB>
    테두리색 옵션을 줄 경우 테두리의 굵기가 기존 1px에서 2px로 변경되어 색을 더 잘 보이게 해줍니다. 그에 따라 셀 안쪽의 너비가 좁아지는데 웹 브라우저에 따라 구현이 다르므로 주의해야 합니다. 익스플로러, 파이어폭스의 경우 가장 좌측 셀의 너비가 1 줄어들고, 오페라의 경우 가장 우측 셀의 너비가 1 줄어듭니다. 정밀하게 셀 크기를 조정할 때 참고해야 합니다.
 
 
 
 

3.2.1. 배경색 고정[편집]

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

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

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

3.3. 색상 변경 도움말[편집]

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

4. 프로젝트 홍보[편집]

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

5. 도움이 필요한 문서[편집]

 
 
 
 
 
 
 
 

6. 프로젝트 성과[편집]

 
 
 
 
상세 내용 아이콘   자세한 내용은 나무위키:프로젝트/다크 모드/프로젝트 성과 문서를 참고하십시오.
 
 
 
 

7. 참가자 서명[27][편집]

 
 
 
 

7.1. 서명 방법[편집]

 
 
 
 
  • 나무위키의 닉네임이나 아이피를 그대로 적어주세요.
  • 비로그인 유저의 경우
    * [[https://namu.wiki/contribution/ip/아이피/document|아이피]]
    * --[[https://namu.wiki/contribution/ip/아이피/document|아이피]]-- - 영구차단됨
    '아이피' 자리에 참가자의 아이피를 그대로 적어주세요.
  • 로그인 유저의 경우
    * [[사용자:닉네임|닉네임]]
    * --[[사용자:닉네임|닉네임]]-- - 영구차단됨
    '닉네임' 자리에 참가자의 나무위키에서의 닉네임을 그대로 적어주세요.
 
 
 
 

7.2. 목록[편집]

 
 
 
 
참가자는 참가한 순서대로 정렬합니다. 신규 참가자는 문단 맨 밑에 서명을 남겨주세요.
[21] 명암비는 구글 개발자 도구의 devtools-cvd 또는 Contrast Checker를 통해 확인할 수 있습니다.[22] 나무위키 유저가 자체적으로 제작한 사이트#[접속불가] 23.1 23.2 [25] 마리오 카트 시리즈/캐릭터, 마리오 카트 시리즈/아이템, 마리오 카트 8/캐릭터, 마리오 카트 8/커스터마이징 등[26] 마리오 카트 7, 마리오 카트 투어, 마리오 카트 아케이드 그랑프리 시리즈 등[27] 꼭 서명을 하지 않으셔도 자유롭게 참여 가능합니다.[대사면] 28.1 28.2 28.3 28.4 28.5 2023년 5월 7일에 진행된 대사면으로 인해 영구 차단이 해제된 사용자[영구차단] 31.1 31.2 31.3 31.4 31.5 31.6 31.7 [32] 계정 이전
CC-white 이 문서의 내용 중 전체 또는 일부는 문서의 r33 판에서 가져왔습니다. 이전 역사 보러 가기

크리에이티브 커먼즈 라이선스
이 저작물은 CC BY-NC-SA 2.0 KR에 따라 이용할 수 있습니다. (단, 라이선스가 명시된 일부 문서 및 삽화 제외)
기여하신 문서의 저작권은 각 기여자에게 있으며, 각 기여자는 기여하신 부분의 저작권을 갖습니다.

나무위키는 백과사전이 아니며 검증되지 않았거나, 편향적이거나, 잘못된 서술이 있을 수 있습니다.
나무위키는 위키위키입니다. 여러분이 직접 문서를 고칠 수 있으며, 다른 사람의 의견을 원할 경우 직접 토론을 발제할 수 있습니다.

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
더 보기