CSS: 간편한 다크 모드

어두운 모드는 웹사이트나 애플리케이션의 색상 테마를 밝은 배경(어두운 텍스트)에서 어두운 배경(밝은 텍스트)으로 전환하는 디스플레이 옵션입니다. 이 모드는 저조도 환경에서 눈의 피로를 줄이고, OLED 화면이 있는 장치의 에너지를 절약하며, 기존 조명 테마에 대한 시각적으로 매력적인 대안을 제공하는 이점으로 인해 인기가 높아졌습니다.
일반적으로 어두운 모드, 밝은 모드, 시스템 테마 설정의 3가지 모드 간에 전환할 수 있습니다.

옛날 방식

지금까지 우리는 Prefers-color-scheme CSS 미디어 기능을 사용했습니다:

prefers-color-scheme CSS 미디어 기능은 사용자가 밝은 색상 테마나 어두운 색상 테마를 요청했는지 감지하는 데 사용됩니다. 사용자는 운영 체제 설정(예: 밝은 모드 또는 어두운 모드) 또는 사용자 에이전트 설정을 통해 선호도를 나타냅니다.

@media (prefers-color-scheme: dark) {
  .post {
    background: #753;
    color: #dcb;
  }
}

@media (prefers-color-scheme: light) {
  .post {
    background: #bcd;
    color: #334;
  }
}

보시다시피 모드별로 하나씩 총 2개의 테마를 유지해야 합니다.
대규모 애플리케이션에서는 이 접근 방식을 취하는 것이 어려울 수 있습니다.

새롭고 더 나은 방법

다행히도 CSS는 우리의 삶을 더 쉽게 만들어 주는 light-dark()라는 새로운 속성을 도입했으며 이 속성은 모든 주요 브라우저에서 지원됩니다.

light-dark() CSS 함수를 사용하면 속성에 두 가지 색상을 설정할 수 있습니다. 개발자가 밝거나 어두운 색 구성표를 설정했는지 또는 사용자가 밝거나 어두운 색 테마를 요청했는지 감지하여 두 가지 색상 옵션 중 하나를 반환합니다. 선호 색상 구성표 미디어 기능 쿼리 내에 테마 색상을 포함할 필요가 없습니다.

:root {
  color-scheme: light dark;
}

body {
  color: light-dark(#292524, #f5f5f4);
  background-color: light-dark(#f5f5f4, #292524);
}

모드 간에 전환하려는 각 요소에 light-dark() 속성을 사용하면 됩니다!

위 내용은 CSS: 간편한 다크 모드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!