다크 모드 감지 사용

웹 사이트의 색 구성표를 변경하는 것은 기본적으로 요즘 요구 사항이며 새롭고 가벼운 블로그에 멋지고 간단한 버전을 추가하기로 결정했습니다.
몇 주 전에 웹을 검색하는 동안 새로운 미디어 쿼리를 발견했고 그것을 시도해야 한다는 것을 알았습니다!

나는 현재 토글 스위치를 사용하는 대신 prefers-color-scheme의 미디어 쿼리를 사용하여 사용자가 선호하는 색 구성표를 가져왔습니다.

결국 어딘가에 멋진 토글이나 스위치로 끝날 것입니다. 하지만 저는 제가 알게 된 이 미디어 쿼리를 가지고 놀고 싶었습니다!

결과적으로 훨씬 더 간단해졌고 브라우저가 선호하는 색 구성표와 연결된다는 점에서 사용자를 위한 거의 "네이티브"애플리케이션으로 작동합니다.

미디어 쿼리는 비교적 직관적이며, 저는 이렇게 구현했습니다.

@media (prefers-color-scheme: dark) {
  :root {
    --black: #ffffff;
    --white: #232c33;
    --off-white: #111111;
    --blue-hl: var(--pewter);
    --blue: #3a6a92;
  }
}

그리고 제 경우에는 이 미디어 쿼리 직전에 다음을 사용하여 내 사이트의 일반 색상을 설정하고 있습니다.

:root {
  --blue: #172a3a;
  --blue-hl: #3a6a92;
  --black: #232c33;
  --pewter: #76949f;
  --white: #ffffff;
  --off-white: #fdfdfd;
}

전체적으로 설정하는 데 약 15분이 걸렸습니다. 다크 모드로 전환할 때 색상을 조정하는 것만으로도 웹사이트를 사용할 준비가 되었습니다!