리버티게임:다크 모드
리버티게임은 어두운 곳에서도 눈이 편하게 게임을 즐길 수 있도록 배경을 어둡게 하는 다크 모드를 제공합니다.
사용법[원본 편집]
지원하는 스킨을 사용할 경우, OS나 브라우저의 설정에서 다크 모드를 활성화하면 리버티게임에도 자동으로 다크 모드가 활성화됩니다.
OS나 브라우저의 설정과 상관 없이 리버티게임의 다크/라이트 모드 설정을 변경하려면 현재 사용 중인 스킨에 맞는 설정 방법에 따라 설정해 주세요.
벡터 2022 (기본 스킨)[원본 편집]
데스크탑과 같은 넓은 화면에서는 문서 오른쪽 도구 메뉴 아래에 보이기 메뉴가 있습니다. 모바일과 같은 좁은 화면이라면 상단에 안경 모양 아이콘이 있습니다. 아이콘을 누르면 보이기 메뉴가 열립니다.
보이기 메뉴 아랫쪽의 색 옵션에서 OS 및 브라우저의 설정에 맞추는 '자동', '라이트', '다크' 중 원하는 모드를 선택할 수 있습니다.
시티즌[원본 편집]
데스크탑과 같은 넓은 화면에서는 화면 왼쪽에, 모바일과 같은 좁은 화면에서는 화면 아래쪽에 리버티게임 로고, 메뉴, 검색, 사용자 메뉴와 함께 톱니바퀴 모양의 환경 설정 버튼이 있습니다. 버튼을 누르면 색상 테마 옵션에서 OS 및 브라우저의 설정에 맞추는 '자동', '라이트', '다크' 중 원하는 모드를 선택할 수 있습니다.
그 외 스킨[원본 편집]
사용자 링크가 있는 곳 근처에 어두운 모드 버튼을 누르면 라이트 모드에서 다크 모드로 전환됩니다. 반대로 기본 모드 버튼을 누르면 다크 모드에서 라이트 모드로 전환됩니다.
방식[원본 편집]
리버티게임의 다크 모드는 사용하는 스킨에 따라 두 가지 방식으로 다크 모드를 구현합니다.
다크 모드 스킨[원본 편집]
벡터 2022, 시티즌 스킨은 자체적으로 다크 모드를 지원합니다. 스킨에서 대응하는 다크 모드는 처음부터 다크 모드를 고려해서 디자인되었기 때문에 버그가 적고 스킨 및 문서 작성자가 의도한 색상이 표시되는 장점이 있습니다. 하지만, 다크 모드를 직접 대응하지 않은 스킨이나 게임에서는 라이트 모드의 색상이 표시되기 때문에 혼자 쨍해 보일 수 있습니다. 제작자에게는 다크 모드를 지원하기 위해 일일이 직접 CSS를 수정해야 해서 번거롭습니다.
다크 모드 확장 기능[원본 편집]
벡터 레거시, 모노북, 타임리스와 같이 다크 모드를 직접 지원하지 않는 스킨은 DarkMode 확장 기능을 통해 다크 모드를 지원합니다. 이 확장 기능은 라이트 모드로 만들어진 페이지를 자동으로 다크 모드로 변환하기 때문에 모든 문서에서 일관적으로 다크 모드를 경험하실 수 있습니다. 하지만, 스킨이나 문서 작성자가 원래 의도한 색상이 아니므로 어색해 보일 수도 있습니다.
대응[원본 편집]
게임이나 틀 제작자는 다크 모드 스킨에 대응하기 위해 CSS나 HTML 태그 스타일에 별도의 조치가 필요합니다. CSS에서는 다크 모드 사용 여부에 따라 표시할 디자인이나 색상을 다르게 표시하는 문법이 존재합니다. CSS 문법을 잘 모를 경우 이 문단을 읽기 전에 리버티게임:CSS 문서를 먼저 읽을 것을 권장합니다.
light-dark 함수 (권장)[원본 편집]
일반적인 경우 라이트 모드에서 밝은 배경에 어두운 글씨를 사용하지만, 다크 모드에서는 어두운 배경에 밝은 글씨를 사용하므로 각 디자인 요소의 색상을 변경해야 합니다. 모드에 따라 색상만을 변경할 경우, CSS의 light-dark 함수를 통해 이를 간단히 구현할 수 있습니다. background-color, color, border-color 같이 색상을 입력하는 속성의 값으로 [light-dark(라이트 모드의 색상, 다크 모드의 색상)을 입력할 수 있습니다. 이 함수는 #css 파서 함수와 HTML 태그의 style 속성 모두 사용할 수 있으며, 브라우저 및 OS의 설정과 위키의 스킨 설정을 모두 반영하기 때문에 간편합니다.
예를 들어, 라이트 모드에서 흰 배경에 검은 글씨를 표시하고 다크 모드에서 검은 배경에 흰 글씨를 표시하려면 다음과 같이 작성할 수 있습니다:
.pretty-block {
background-color: light-dark(white, black);
color: light-dark(black, white);
}
단, 이 기능은 2024년에 주요 브라우저에서 도입되었기 때문에 일부 오래된 브라우저에서 작동하지 않을 수 있습니다.
media 쿼리[원본 편집]
다크 모드에서 단순히 색상만을 바꾸는 것을 넘어 다른 속성을 많이 바꿔야 하거나, 여러 요소에 걸쳐 스타일을 변경해야 하는 경우, 또는 오래된 브라우저를 지원해야 하는 경우 @media 쿼리의 prefers-color-scheme 특성을 사용할 수 있습니다. @media 쿼리는 HTML 태그의 style 속성에 사용할 수 없으며, 반드시 #css 파서 함수를 사용해야 합니다. @media 쿼리는 사용자가 접속한 환경에 따라 스타일을 분기할 수 있는 문법으로, @media 옆에 괄호를 열어서 원하는 특성을 입력할 수 있습니다. 다크 모드를 사용하는 경우는 (prefers-color-scheme: dark)으로 선택할 수 있고, 라이트 모드를 사용하는 경우는 (prefers-color-scheme: light)로 선택할 수 있습니다. @media 문에는 각 요소의 스타일을 나타내는 CSS 규칙을 여러 개 넣을 수 있습니다.
예를 들어, pretty-block 클래스가 적용된 태그가 라이트 모드에서 흰 배경에 검은 글씨를 표시하고 다크 모드에서 검은 배경에 흰 글씨를 표시하게 하려면 다음과 같이 작성할 수 있습니다:
@media (prefers-color-scheme: light) {
.pretty-block {
background-color: white;
color: black;
}
}
@media (prefers-color-scheme: dark) {
.pretty-block {
background-color: black;
color: white;
}
}
단, 이 문법은 브라우저나 OS에서 선택한 다크 모드 설정만 반영하고 위키의 스킨 설정에서 사용자가 선택한 모드는 반영되지 않으므로 내장 클래스를 함께 사용해야 합니다.
내장 클래스[원본 편집]
미디어위키에서는 head 요소에 스킨 설정에서 사용자가 선택한 모드를 나타내는 클래스를 제공합니다. 라이트 모드를 사용할 경우 head 요소에 skin-theme-clientpref-day 클래스가 적용되고, 다크 모드를 사용할 경우 skin-theme-clientpref-night 클래스가 적용됩니다. 브라우저나 OS의 설정에 맞추는 자동 모드는 skin-theme-clientpref-os 클래스가 적용됩니다. 모든 요소는 head의 자식 요소이기 때문에 셀렉터 앞에 띄어쓰기와 내장 클래스를 넣어 자손 선택자를 이용할 수 있습니다.
예를 들어, pretty-block 클래스가 적용된 태그가 라이트 모드에서 흰 배경에 검은 글씨를 표시하고 다크 모드에서 검은 배경에 흰 글씨를 표시하게 하려면 다음과 같이 작성할 수 있습니다:
.skin-theme-clientpref-day .pretty-block {
background-color: white;
color: black;
}
.skin-theme-clientpref-night .pretty-block {
background-color: black;
color: white;
}
skin-theme-clientpref-os 클래스를 사용하는 자동 모드에도 대응하려면 media 쿼리와 함께 사용합니다:
@media (prefers-color-scheme: light) {
.skin-theme-clientpref-os .pretty-block {
background-color: white;
color: black;
}
}
@media (prefers-color-scheme: dark) {
.skin-theme-clientpref-os .pretty-block {
background-color: black;
color: white;
}
}
자세한 내용은 mw:Recommendations for night mode compatibility on Wikimedia wikis 문서를 참조하시기 바랍니다.
색 반전 예외[원본 편집]
확장 기능으로 제공되는 다크 모드는 다크 모드 대응 여부와 상관없이 모든 색상을 반전시켜버리기 때문에 의도하지 않은 색상이 표시될 수 있습니다. (라이트 모드를 기준으로 색이 반전됩니다.) 이때, 색 반전을 원하지 않는 요소에 mw-no-invert 클래스를 적용하면 색 반전 대상에서 제외됩니다.
다음 예시에서 초록색 테두리의 상자는 확장 기능을 통한 다크 모드가 적용되어도 하얀 배경으로 표시됩니다.
- 벡터 레거시로 보기