mir.pe (일반/밝은 화면)
최근 수정 시각 : 2024-04-17 21:10:58

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

다크 모드 프로젝트에서 넘어옴

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

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

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. 참가자 서명

1. 개요

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

2. 프로젝트 참여

어두운 화면에서의 가독성 저하는 주로 다음과 같은 경우에 많이 발생합니다.

3. 예시



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

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

각 문서의 문서의 상황을 고려하여 대표적으로 아래와 같은 3가지의 방법을 생각해 볼 수 있습니다.

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

3.1. 테마별 색상표

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


파일:CC-white.svg 이 문단의 내용 중 전체 또는 일부는
문서의 r618
, 17번 문단
에서 가져왔습니다. 이전 역사 보러 가기
파일:CC-white.svg 이 문단의 내용 중 전체 또는 일부는 다른 문서에서 가져왔습니다.
[ 펼치기 · 접기 ]
문서의 r618 ( 이전 역사)
문서의 r ( 이전 역사)
<rowcolor=#fff> 분류 라이트 테마 다크 테마
<colbgcolor=#f5f5f5,#2d2f34> 페이지 배경 #fff|white #1c1d1f[5]
#010101[6]
텍스트 (문서명·문단명·본문)[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
네임스페이스[10] #545454 #c7c7c7
위험 버튼[11] #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

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

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



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

3.2.1. wiki style 관련 다크모드 문법

파일:상세 내용 아이콘.svg   자세한 내용은 나무위키:문법 도움말/심화 문서
2번 문단을
부분을
참고하십시오.
{{{#!wiki style="속성 목록" dark-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
다크모드 비설정 링크 하나에 둘다 적용[16] 2개의 링크에 따로 적용[17]

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. 도움이 필요한 문서

6. 프로젝트 성과

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

7. 참가자 서명[21]

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

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


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