주의 이 기사에서 소개하는 방법은 개발 도중의 기능을 유효하게 하는 것을 포함합니다. 또한 이미지는 안드로이드 태블릿이며 화면과 버튼 배치가 다를 수 있습니다.

이 기사는 Google 크롬 88용입니다. 이전 버전을 사용하는 경우 기사 제목 오른쪽 상단의 세 점이 있는 메뉴의 편집 내역에서 이전 버전에 대한 방법을 볼 수 있습니다.

또한이 기사와 동일한 내용을 내 블로그에 게시했습니다.

UI를 어두운 테마로 만들기

간단합니다.

Chromeのメニュー（画面右上の丸が縦に3つ並んだマーク）> 設定 >
基本設定 > テーマ > 暗

을 선택하면 UI를 어두운 테마로 만들 수 있습니다.

웹 콘텐츠를 강제로 어두운 테마로 만들기

어두운 테마를 지원하는 사이트(콘텐츠의 모양을 설정하는 CSS 미디어 쿼리에서 prefers-color-scheme을 사용하는 사이트)이라면 위의 UI 변경만으로도 어두운 테마가 됩니다.

그런데 현시점에서 대응하고 있는 사이트는 거의 없습니다. 따라서 콘텐츠를 강제로 어두운 테마로 만들기 위해 Chrome 테스트 기능을 사용합니다.

먼저 Chrome을 열고 검색창에

chrome://flags

를 입력합니다.

그러면 개발 도중 기능의 유효/무효를 전환하는 메뉴가 표시됩니다.



페이지 내 검색 또는 화면 상단의 Search flags

dark

를 입력하고 Darken websites checkbox in themes setting이라는 항목을 Enabled로 설정합니다.

그러면 화면 하단에

Your changes will take effect the next time you relaunch Google 크롬.
번역: 변경사항은 다음에 Chrome을 다시 시작할 때 적용됩니다.

라고 표시되므로 [Relaunch]를 눌러 다시 시작합니다.

재부팅 후 설정 기본 설정 테마에서 시스템 기본값 또는 어두움을 선택합니다. '웹사이트를 어둡게 함'이라는 확인란이 표시되므로 체크합니다.

그러면 모든 웹 페이지가 어두운 모드로 표시됩니다. 잘 어두워지지 않으면 Chrome을 한 ​​번 더 닫고 다시 한 번 시작해 보세요.

결과

Chrome UI와 웹사이트 표시를 모두 어두운 모드로 설정하면 아래 이미지와 유사합니다(이미지는 Qiita의 톱 페이지). 이전 시험 기능의 다른 항목 밖에 방법이 없었을 때는 컨텐츠를 다크 테마로 하면 이미지의 색이 반전하고 있었습니다만, 지금은 문제 없습니다.



하지만 사이트에 따라 색 구성표가 부자연스러워질 수 있습니다. 또한 배경이 투명으로 설정된 이미지를 보기 어려워지거나 문자를 읽기 어려울 수 있습니다. 신경이 쓰이는 경우, 어두운 모드로 하는 것은 UI만으로 합시다.

아래의 이미지는 이전에 테스트 기능의 다른 항목 만 방법이 있었을 때 콘텐츠를 어두운 테마로했을 때의 스크린 샷입니다. 색상과 이미지의 색상이 부자연스러웠지만 현재는 개선되고 있음을 알 수 있습니다.

설정 해제

UI의 어두운 모드를 해제하려면 어두운 모드로 전환할 때 설정 화면에서 [밝기]를 선택합니다.

콘텐츠를 어두운 모드로 만드는 테스트 기능을 해제하려면 설정 기본 설정 테마에서 웹사이트 어둡게 확인란의 선택을 취소한 다음

chrome://flags

에서 [Darken websites checkbox in themes setting]을 [Default]로 되돌립니다.

그러면 화면 하단에

Your changes will take effect the next time you relaunch Google 크롬.
번역: 변경사항은 다음에 Chrome을 다시 시작할 때 적용됩니다.

라고 표시되므로 [Relaunch]를 눌러 다시 시작합니다.