이 보도는 니프티 그룹 Advent Calendar 2019 11일째 보도입니다.
어제는 @iNakamura의 트위터의 붕괴 여부를 자연어로 예측하는 이야기!
대학 시절 트위터 API의 한계에 부딪혀 한숨을 쉬던 때가 생각난다.

입문

소스 코드: https://codepen.io/rodhamjun/pen/rNaLGLW
그러면 이번 웹 페이지도 OS의 Dark Mode와 연동할 수 있게 되었다.
요즘은 다양한 OS가 하나하나 어둠의 패턴에 대응하고 있고, 다양한 회사들이 그 대응에 쫓기고 있다.
이런 상황에서 며칠 전Chrome Dev Summit 2019의 영상을 보고 사이트에서도 어두운 패턴에 대처할 수 있고 방법도 간단하다는 것을 알게 되어 공유하고 싶습니다.

다크 모드 지원

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff;
  }
}

이게 다야.
응답 디자인에 익숙한 @media 미디어 조회를 사용합니다.
이 구문을 사용하여 운영 체제 설정에서 암흑 모드가 활성화된 경우 배경은 검은색, 문자는 흰색으로 설정합니다.prefers-color-scheme에서 지정할 수 있는 값은 다음과 같습니다.

no-preference

dark

light

브라우저 가용성

현재 세계 인구의 76퍼센트의 브라우저는 이미 대응하여 충분히 보급되고 있다.

https://caniuse.com/#feat=prefers-color-scheme

Chrome Dev Tools에서 스위치 전환

※ Chrome Canary

현재 Chrome 구축은 지원되지 않지만 Chrome Canary(조기 평가판)를 사용하면 개발자 도구에서 Dark Mode의 열기와 닫기를 전환할 수 있습니다.
장래에는 보통 접시도 이것을 할 수 있을 것이다.・・・ → More Tools → Rendering → prefers-color-scheme

Dark Mode 대응 기술

JavaScript에서 Dark Mode 켜짐 확인

if (matchMedia('(prefers-color-scheme: dark)').matches) {
  // OS の dark mode がオンになっています
} else {
  // OS の dark mode がオフになっています
}

JavaScript에서 스위치를 확인할 때도 미디어 질의를 사용합니다.
이미 사이트에 Dark Mode를 제공했는데 OS 설정과 연동시키려면 이걸 사용하면 돼요.

CSS 변수 사용

@media (prefers-color-scheme: light) {
  --background-color: white;
  --font-color: black;
  --primary-color: blue;
}

@media (prefers-color-scheme: dark) {
  --background-color: black;
  --font-color: white;
  --primary-color: darkblue;
}

body {
  background-color: var(--background-color);
  color: var(--font-color);
}

a {
  color: var(--primary-color);
}

light와 dark로 나뉜 경우 같은 CSS를 두 번 쓰는 것은 관리하기 어렵다.
이런 상황에서 CSS 변수는 매우 편리하다.
브라우저의 대응 상황을 확인하고 함께 사용하십시오.

이미지 포화도 감소

img {
  filter: grayscale(30%);
}

배경이 어두워지면 이미지가 떠요.
이것을 해결하는 방법으로grayscale를 낮추면 됩니다.
참조: https://medium.com/dev-channel/re-colorization-for-dark-mode-19e2e17b584b

SVG 아이콘 색상 반전

img[src*=svg] {
  filter: invert(100%) grayscale(30%);
}

검은색svg 아이콘의 아이콘 색깔이 반전되면 두 개를 만들 필요가 없습니다.

이미지 바꾸기

<picture>
    <source srcset="night.jpg" media="(prefers-color-scheme: dark)">
    <img src="day.jpg">
</picture>

색상 반전에 대응하지 못하는 경우
picture 태그를 사용하면img 태그의 src 이미지를 대체할 수 있습니다.
참조: https://stackoverflow.com/questions/55787167/how-to-change-image-source-based-on-css-prefers-color-scheme

기타 유사 미디어 조회

이번 prefers-color-scheme 외에도 보조 기능과 관련된 미디어 조회가 많이 이뤄졌다.
사이트에 액세스 권한이 있는 경우 운영 체제 설정에 따라 설정을 열고 닫을 수 있습니다.같이 확인해 주세요.

inverted-colors: 색상 반전의 설정

prefers-reduced-motion: 시차 효과 감소 설정

prefers-reduced-transparency: 투사 표시 감소 설정

prefers-contrast: 명암비 모드 설정

forced-colors: 강제 색상 지정 설정

마지막

어때요?
6월 WWDC 2019에서 iOS13이 암흑모드에 대응하자 회사 선배는 "사이트도 암흑모드에 대응하지 않는 시대가 올까..."라고 말했다.나는 했던 말이 생각났다.
또한 Chrome Dev Summit 2019 동영상도 많이 있습니다.
또 표 요소의 디자인이 디자인되어 선택 상자에서 아이콘을 사용할 수 있는 이야기도 있다.
마음에 드는 사람은 아래 링크에서 공연 일람을 확인하세요.
https://www.youtube.com/watch?v=F1UP7wRCPH8&list=PLNYkxOF6rcIDA1uGhqy45bqlul0VcvKMr
내일은 @mito1296k의 Ansible 관계에 대한 보도입니다.기대해주세요!