【Chrome 개발자 툴】라이트 모드와 다크 모드의 전환 방법

소개



나는 항상 어두운 모드에서 브라우징을하고 있습니다.
최근에는 다크 모드에 대응한 웹 사이트도 많습니다만, 그 때문에 라이트 모드로의 웹 사이트의 디자인을 배견할 때, 나는 OS로부터 그 때마다 다크 모드의 설정을 해제하고 있었기 때문에, 번거로움을 느꼈습니다.

라이트 모드에서의 디자인을 보고 싶다! OS → OS 설정에서 라이트 모드로 전환 → 브라우징 → → 원래 설정으로 되돌리기

를 반복해야 하고 번거로웠습니다.

그러나 Chrome의 개발자 도구로 쉽게 전환이 가능하다는 것을 알았으므로 여기에 그 절차를 기재했습니다.

절차는 다음과 같습니다.

1. Chrome 개발자 도구(검증) 열기



열람하고 싶은 페이지상에서 더블 탭이나 오른쪽 클릭등으로 “검증”을 엽니다.


(표시중인 페이지에 "Web 크리에이터 박스"를 빌리고 있습니다.이 페이지에서는 다크 모드 대응뿐만 아니라 전환 바 등도 구현되고있는 것 같습니다.)

2. Rendering 패널 열기



(1)Ctrl+Shift+P(macOS는 command+shift+P)를 눌러 툴내 검색 화면을 엽니다.

(2) "Show Rendering"을 입력하고 후보에서 선택합니다.



3. 표시를 전환한다



"Emulate CSS media feature prefers-color-scheme"에서 모드를 전환하여 페이지를 확인합니다.


사이고에게



어두운 모드는 시각에 과민성을 가진 사람에게는 부드러운 디자인이라고합니다.
저도 밝은 곳이 서투르고 PC의 휘도도 가능한 한 낮추어 작업하고 있는 것이 많습니다만, 다크 모드로 하고 있으면 화면으로부터 받는 스트레스나 눈의 피로등도 어느 정도는 편한 생각이 듭니다.

일반적으로 말해지고 있는, 배터리의 열화를 억제하는 효과라든지 수면의 방해가 되기 어렵다고 하는 것에 대해서는 자세하지 않습니다만, 다크 모드에 한정하지 않고 모두가 스트레스 없이 열람할 수 있는 디자인의 Web 사이트·서비스 하지만 앞으로 더 늘면 좋겠으면 좋겠습니다.

좋은 웹페이지 즐겨찾기