리버티게임:다크 모드
리버티게임은 어두운 곳에서도 눈이 편하게 게임을 즐길 수 있도록 배경을 어둡게 하는 다크 모드를 제공합니다.
사용법[원본 편집]
지원하는 스킨을 사용할 경우, OS나 브라우저의 설정에서 다크 모드를 활성화하면 리버티게임에도 자동으로 다크 모드가 활성화됩니다.
OS나 브라우저의 설정과 상관 없이 리버티게임의 다크/라이트 모드 설정을 변경하려면 현재 사용 중인 스킨에 맞는 설정 방법에 따라 설정해 주세요.
벡터 2022 (기본 스킨)[원본 편집]
데스크탑과 같은 넓은 화면에서는 문서 오른쪽 도구 메뉴 아래에 보이기 메뉴가 있습니다. 모바일과 같은 좁은 화면이라면 상단에 
안경 모양 아이콘 이 있습니다. 아이콘을 누르면 보이기 메뉴가 열립니다.
보이기 메뉴 아랫쪽의 색 옵션에서 OS 및 브라우저의 설정에 맞추는 '자동'과 '라이트', '다크' 중 원하는 모드를 선택할 수 있습니다.
시티즌[원본 편집]
데스크탑과 같은 넓은 화면에서는 화면 왼쪽에, 모바일과 같은 좁은 화면에서는 화면 아래쪽에 리버티게임 로고, 메뉴, 검색, 사용자 메뉴와 함께
환경 설정 버튼이 있습니다. 버튼을 누르면 색상 테마 옵션에서 OS 및 브라우저의 설정에 맞추는 '자동'과 '라이트', '다크' 중 원하는 모드를 선택할 수 있습니다.
그 외 스킨[원본 편집]
사용자 링크가 있는 곳 근처에 ☾ 어두운 모드 버튼을 누르면 라이트 모드에서 다크 모드로 전환됩니다. 반대로 ☼ 기본 모드 버튼을 누르면 다크 모드에서 라이트 모드로 전환됩니다.
방식[원본 편집]
리버티게임의 다크 모드는 사용하는 스킨에 따라 두 가지 방식으로 다크 모드를 구현합니다.
다크 모드 스킨[원본 편집]
벡터 2022, 시티즌 스킨은 자체적으로 다크 모드를 지원합니다. 이 방식은 처음부터 다크 모드를 고려해서 의도적으로 디자인할 수 있기 때문에 때문에 버그가 적고 스킨 및 문서 작성자가 의도한 색상이 표시되는 장점이 있습니다. 하지만, 다크 모드를 지원하지 않는 스킨이나 게임 UI에서는 라이트 모드의 색상이 표시되기 때문에 혼자 쨍해 보일 수 있습니다. 제작자에게는 다크 모드를 지원하기 위해 일일이 직접 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에서 선택한 다크 모드 설정만 반영하고 위키의 스킨 설정에서 사용자가 선택한 모드는 반영되지 않으므로 내장 클래스를 함께 사용해야 합니다.
내장 클래스[원본 편집]
미디어위키에서는 최상위 html 요소에 스킨 설정에서 사용자가 선택한 모드를 나타내는 클래스를 제공합니다. 라이트 모드를 사용할 경우 html 요소에 skin-theme-clientpref-day 클래스가 적용되고, 다크 모드를 사용할 경우 skin-theme-clientpref-night 클래스가 적용됩니다. 브라우저나 OS의 설정에 맞추는 자동 모드는 skin-theme-clientpref-os 클래스가 적용됩니다. 모든 요소는 html의 자식 요소이기 때문에 셀렉터 앞에 띄어쓰기와 내장 클래스를 넣어 자손 선택자를 이용할 수 있습니다.
예를 들어, 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 클래스를 적용하면 색 반전 대상에서 제외됩니다.
다음 예시에서 초록색 테두리의 상자는 확장 기능을 통한 다크 모드가 적용되어도 하얀 배경으로 표시됩니다.
- 벡터 레거시로 보기