다크 모드의 Google

my personal blog에서 이 문서를 찾을 수 있습니다.

나와 같은 사람이라면 무엇이든 다크 모드를 좋아해야 합니다. 더 시원하고 고급스러우면서도 눈이 더 편합니다. 이제 대부분의 사이트와 앱에서 더 많이 적응되고 있지만 아직 모든 사이트가 트렌드를 따라가는 것은 아닙니다.

우리 모두가 거의 매일 가장 많이 사용하는 웹사이트가 그 중 하나입니다. 모두가 좋아하는 검색 엔진인 Google은 다크 모드를 지원하지 않습니다. 그래서 재미삼아 구글의 다크 모드가 어떤 모습일지 상상해보기로 했습니다.

어두운 모드의 색상 팔레트에 Material's Dark theme을 사용하겠습니다.


이미 알고 계시겠지만 비교를 위해 Google은 기본적으로 다음과 같이 표시됩니다.



첫 번째 분명한 단계는 본문의 배경색을 어두운 색으로 변경하고 본문의 텍스트 색을 밝은 색으로 변경하는 것입니다. Material의 Dark Theme를 기준으로 본문에 사용할 어두운 색은 #121212이고 텍스트의 밝은 색은 #fff입니다.

이것이 내가 추가할 CSS입니다.

body {
    background-color: #121212;
    color: #fff;
}

결과는 다음과 같습니다.



더 많은 작업이 필요합니다. 본문에는 명시적으로 배경색이 흰색으로 설정된 섹션이 있습니다.

Chrome의 Devtools에서 요소를 검사한 후 흰색 배경색을 가진 요소가 탐색 모음의 경우 #hdtb 및 .yg51vc, 결과 표시줄의 경우 #appbar(발견된 결과 수를 표시하는 항목), .sfbg임을 발견했습니다. 헤더의 배경은 .RNNXgb, 입력의 배경색은 .RNNXgb입니다. 또한 #hdtb에는 테두리 하단이 있고 그 색상이 밝은 색상인 #ebebeb로 설정되어 있으므로 변경해야 합니다.

무슨 생각을 하는지 알고 있습니다. 이러한 클래스와 ID는 무작위로 생성되어야 합니다. 나도 그렇게 생각했지만 몇 번 시도한 후 무작위가 아니라는 것을 알았습니다. 그들은 항상 동일합니다.

그래서 추가한 다음 규칙은 다음과 같습니다.

#hdtb, .yg51vc, #appbar, .sfbg, .RNNXgb {
    background: #121212;
}

.RNNXgb {
    background: #2b2b2b !important; /** Give it a different color than the background to stand out **/
}

.gLFyf {
    color: #fff; /** The input for the search field **/
}

#hdtb {
    border-bottom-color: #1F1B24;
}

결과는 다음과 같습니다.



이제 배경이 어둡지만 할 일이 더 많습니다.

페이지의 거의 모든 텍스트는 본문 요소의 색상을 변경해도 영향을 받지 않았습니다. 따라서 요소를 검사하고 변경 방법을 확인해야 합니다.

내비게이션 바부터 시작했습니다. 검사 후 .hdtb-mitem a, .hdtb-mitem .GOE98c 및 .GshZze 요소의 색상이 #5f6368로 설정되었습니다. 그래서 다음 규칙을 추가했습니다.

.hdtb-mitem .GOE98c, .hdtb-mitem a, .GshZze {
    color: #FFFFFF !important;
}

결과는 다음과 같습니다.


다음으로 결과 표시줄입니다. 색상이 설정된 클래스는 .LHJvCe입니다. 그래서 다음 규칙을 추가했습니다.

.LHJvCe {
    color: #FFFFFF;
}

결과는 다음과 같습니다.


다음으로 결과의 텍스트와 링크로 이동했습니다. 텍스트로 시작하여 요소를 검사한 후 .IsZvec 및 .aCOpRe em 요소를 변경해야 합니다. .aCOpRe em이 검색 쿼리에 포함된 텍스트를 가리키는 데 사용되는 것을 확인하여 다른 색상을 지정하기로 결정했습니다.

다음 규칙을 추가했습니다.

.IsZvec {
    color: #adadad;
}

.aCOpRe em {
    color: #e4e4e4;
}

인용 또는 결과 위의 링크 이동 경로의 경우 변경해야 하는 요소는 인용이었습니다. 다음 규칙을 추가했습니다.

cite, cite a:link, cite a:visited {
    color: #9c9c9c;
}

결과는 다음과 같습니다.


이제 결과 링크에 대해 Google은 모든 요소에 색상 규칙을 설정합니다. "이 페이지 번역"링크의 경우 a.fl:link에 대한 규칙을 설정합니다. 아주 간단합니다. 그래서 다음 규칙을 추가하여 색상을 변경했습니다.

a, a.fl:link {
    color: #BB86FC;
}

a:visited {
    color: #9326ca; /** color for the visited links **/
}

그리고 마침내 결과는 다음과 같았습니다.



그리고 끝났습니다! 분명히 이것은 웹 사이트의 기본 결과 페이지에만 해당되지만 멋지게 보입니다.

결론

어떤 버전의 Google이 더 마음에 드셨나요? 그리고 어떤 웹사이트나 앱에 다크 모드가 있었으면 좋겠나요? 알려줘요!