macOS Mojave 10.14.4의 Safari가 커스텀 컬러 설정을 지원하는 웹 사이트에서 어두운 모드를 지원하는 것 같기 때문에 시도했습니다.

웹사이트가 커스텀 컬러 설정에 대응하고 있으면, macOS Mojave 10.14.4의 Safari에서 그것이 반영되게 되었다고 합니다.

macOS Mojave 10.14.4 공개, Safari 어두운 모드 지원 - iPhone Mania
h tps : // / p p 네네 마아. jp/네 ws-243495/

커스텀 컬러 설정을 지원하는 웹 사이트에서 다크 모드 지원

그럼 웹사이트에서 커스텀 컬러 설정하려면 어떻게 해야 하는가? 조사해 보았습니다.

prefers-color-scheme으로 미디어 쿼리 사용

이쪽의 기사를 참고로 했습니다.

macOS Mojave의 Safari에서 본 웹 사이트를 다크 모드에 대응시키는 방법 |
htps //w w. 헤아 dt. m/2018/11/2018-11-03. HTML
prefers-color-scheme 라는 미디어 쿼리를 이용하면 된다는 것. 사양에 대해서는 이쪽이 상세합니다.

prefers-color-scheme - CSS: 캐스케이딩 스타일시트 | MDN
htps : //에서 ゔぇぺぺr. 어쩌면. 오 rg / 그럼 / 드 cs / u b / Cs / @ Me / A / p rhu rs-ko r-s chie

브라우저의 대응을 보면 현시점(2019/03/28)에서 데스크탑용으로 Firefox 67과 Safari 12.1, 스마트폰용은 Android판 Firefox 67이 대응하고 있었습니다. Firefox 67은 여전히 베타입니다.

Google 크롬에 관해서는 절찬 개발 중인 것 같습니다.

Media Queries: prefers-color-scheme feature - Chrome Platform Status
htps //w w. ch 로메 s 타츠 s. 코m/후아트레/5109758977638400

889087 - Add support for CSS prefers-color-scheme media feature - chromium - Monorail
htps : // / gs. ch 로미우 m. 오 rg/p/ch 로미우 m/일단 s/로 하고 싶은 l? 예d=889087

확인하기 위해 준비한 HTML과 CSS는 다음과 같습니다.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ダークモード対応</title>
    <style type="text/css">
      .main {
        font-size: 30pt;
        width: 100%;
        text-align: center;
      }
      @media (prefers-color-scheme: light) {
        body {
          color: #000;
          background-color: #fff;
        }
        .main:after {
          content: "ライトモード";
        }
      }
      @media (prefers-color-scheme: dark) {
        body {
          color: #fff;
          background-color: #000;
        }
        .main:after {
          content: "ダークモード";
        }
      }
    </style>
  </head>
  <body>
    <div class="main">prefers-color-scheme:</div>
  </body>
</html>

확인해보기

macOS Mojave 10.14.3

수중의 MacBook Pro가 아직 macOS Mojave 10.14.3이었으므로, 대응하고 있지 않는 것을 확인했습니다.

브라우저 버전

Google 크롬: 73.0.3683.86

Safari: 12.0.3(14606.4.5)

Firefox: 66.0.2

설정 -> 일반 -> 외관 모드에서 라이트 다크 전환해도 변함 없음.