다크/라이트 모드를 부드럽게 변환하는 방법

알겠습니다. 현재 웹사이트는 어두운 모드입니다. 하지만 당신은 조명 모드를 선호합니다(그렇다면 그게 당신의 특권인가요?). 오전 3시입니다. 어두운/밝은 모드 토글을 클릭합니다. 갑자기, 번쩍! 일시적인 실명이 뒤이어 이명과 발작이 뒤따릅니다. 나중에 비용이 많이 들고 응급실로 가야 하고(미국 의료 시스템에 감사드립니다!) 수천 명이 손실을 입게 됩니다.

좀 과장된 표현이긴 하지만, 거슬리는 테마 전환이 확실히 짜증스럽습니다. 문제를 해결하자! 최첨단 CSS(최첨단 아닌)을 사용하면 원활한 전환을 구현할 수 있습니다. 코드와 설명을 올려드리겠습니다.

먼저 테마 전환기가 필요합니다. 아직 지침이 없다면 이 링크를 확인하여 지침을 확인하세요. 이 방법은 CSS 변수(--color: blue;) 및 유사한 접근 방식과 호환됩니다.

코드는 다음과 같습니다.

* {
  transition-duration: 1s;
}

1s(1초)을 원하는 전환 속도로 조정하세요.

별표(*)는 범용 선택기로서 페이지의 모든 요소가 영향을 받는다는 의미입니다. transition-duration을 설정하면 요소의 속성이 변경될 때마다 부드러운 전환을 적용하도록 브라우저에 지시합니다. 간단해요!

읽어주셔서 감사합니다!

앤드류 맥실리온

위 내용은 다크/라이트 모드를 부드럽게 변환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!