한 번에 GitHub/Qiita/Teratail/StackOverflow/Google 등 모든 사이트에서 다크 테마를 사용하는 방법

소개

프로그래밍하고 있는 여러분은 IDE라든지 코드 에디터로 배경을 검정으로 하는 「다크 테마」 사용하고 있는 분 많지요?
저도 그 혼자서, VisualStudioCode와 같은 코드 에디터 뿐만이 아니라, Evernote등의 노트 앱이나 Mac, iPhone의 OS 설정에 이르기까지 다크 모드로 해 몸을 칠흑으로 염색하고 있습니다. (주2병감)

최근이라면 웹 서비스도 다크 모드에 대응하는 콘텐츠가 늘어났습니다.
유명한 장소라면 YouTube나 GoogleKeep 등을 들 수 있네요.
그러나 아직도 대다수의 웹사이트 배경은 눈부시게 남아 있습니다.
나와 같은 어둠에 사는 다크 모드 신자는 눈이 눈부심으로 굽는 고통을 견디면서 날마다 생활하고(구구) 있습니다.

다크 테마를 지원하지 않는 웹 사이트에 일괄 적용하는 방법

플라우자는 Google Chrome을 가정합니다.
방법은 크게 나누어 두 가지가 있습니다.

Google 크롬의 플래그로 설정

Chrome 확장 프로그램 적용

Chrome78에서 chrome://flags 의 설정 항목으로 강제 다크 모드로 할 수 있게 되었습니다만, 사이트에 따라서는 흑백 이외의 색이 어둡고 보기 힘든, 사이트 마다 ON/OFF를 설정할 수 없다든가 , 가려운 곳에 손이 닿지 않는 느낌이 남아 있습니다.
따라서 이 기사에서는 확장 기능을 사용

강제 다크 모드 확장 기능 "Dark Reader"

Chrome 웹 스토어에 게시되었습니다.
Dark Reader - Chrome 웹 스토어

공식 사이트↓
Dark Reader

그 밖에도 사이트에 강제 다크 모드를 적용하는 확장 기능이 있습니다만, 필자가 사용한 느낌으로는 제일 표시가 안정되어 있었습니다.
사이트마다 콘트라스트 등의 설정이나 다크 모드의 ON/OFF를 기억시켜 두면, 다음에 액세스했을 때에 자동적으로 그 설정으로 표시해 주는 것은 훌륭하네요.

Chrome에 추가하면 주소창 오른쪽에 아이콘이 표시됩니다.


그것을 클릭하면 이러한 설정 화면이 나타납니다.


오픈 소스로 개발되었습니다.
GitHub - darkreader/darkreader: Dark Reader Chrome and Firefox extension

필자는 시도하지 않았지만 Firefox와 Safari에도 대응하고있는 것 같습니다.

적용 결과

설정은 디폴트인 채입니다만, 사이트측에서 대응하고 있는 것은? 라고 생각해 버릴 정도로 표시가 깨끗합니다.

GitHub

Qiita

Google

Teratail

그래도 다크 테마가 되지 않는 사이트에 대한 대처법

Google 검색결과의 pdf에서도 사용하고 싶은 경우 캐시를 로드하면 html로 표시되므로 어두운 모드가 적용됩니다.