CSS와 JavaScript를 사용하여 웹사이트를 다크 모드로 전환하는 방법

소개

어두운 모드는 밝은 텍스트와 요소가 있는 어두운 배경을 사용하는 디스플레이 설정입니다. 보기에도 좋고 여러 가지 실용적인 장점이 있어서 인기를 얻었습니다.

다크 모드의 장점은 다음과 같습니다.

1. 눈의 피로 감소:다크 모드는 화면에서 방출되는 밝은 빛의 양을 줄여주므로 특히 저조도 환경에서 눈을 편안하게 해줍니다.
2. OLED 화면의 배터리 수명 향상:OLED(유기 발광 다이오드) 화면에서 어두운 모드는 검은색 픽셀이 본질적으로 꺼져서 밝은 색상을 표시하는 것보다 전력을 덜 소모하므로 배터리 수명을 절약할 수 있습니다.

이 튜토리얼에서는 CSS와 JavaScript를 사용하여 웹사이트를 다크 모드로 전환하는 방법을 다룹니다. 간단한 밝은 테마의 웹 페이지 템플릿으로 시작해 밝은/어두운 모드를 전환할 수 있는 웹사이트로 변환하여 사용자가 밝은 테마와 어두운 테마 사이를 원활하게 전환할 수 있도록 하겠습니다.

프로젝트 설정

간단한 밝은 테마의 웹 페이지 템플릿부터 시작해 보겠습니다. 그런 다음 사용자가 밝은 테마와 어두운 테마 사이를 전환할 수 있도록 밝은/어두운 모드를 전환할 수 있는 웹사이트로 변환하겠습니다.

다크 모드 스타일 구현

색상 선택

첫 번째 단계는 사용 중인 모든 색상을 나열하고 각 색상에 대해 어두운 테마 버전을 선택하는 것입니다. 아래 표에는 페이지의 모든 색상과 해당 어두운 버전이 나열되어 있습니다.

맞춤 변수

그런 다음 CSS 변수를 사용하여 해당 변수로 몸체에 어둡고 밝은 클래스를 만듭니다.

으아아아

CSS 사용자 정의 속성 사용에서 CSS 변수에 대해 읽을 수 있습니다. 기본적으로 이는 문서에서 재사용할 값을 저장하는 두 개의 대시(--)를 사용하여 정의된 엔터티입니다. CSS 변수는 변경 사항이 자동으로 업데이트되도록 하여 유지 관리를 더 쉽게 해줍니다.

동적 요소 색상

CSS 변수의 값을 삽입하기 위해 var() CSS 함수를 사용합니다. 이렇게 하면 각 변수를 수동으로 변경하는 대신 동적으로 색상을 변경하고 하나의 변수를 업데이트하여 전체 문서의 변경 사항을 반영할 수 있습니다.

다음은 nav 요소와 해당 하위 요소의 예입니다.

으아아아

JavaScript로 라이트/다크 모드 전환

이제 바디 클래스를 어두움이나 밝음으로 변경하여 테마를 전환할 수 있습니다. 먼저, 헤더에 버튼을 추가하고 클릭 이벤트에 대한changeTheme() 함수를 설정하세요.

으아아아

본문의 클래스를 전환하는 ChangeTheme() 함수를 정의하세요.

으아아아

이제 사용자는 버튼을 클릭하여 웹사이트 테마를 변경할 수 있습니다.

아래 CodePen에서 튜토리얼 코드를 보실 수 있습니다

다음 단계

또한 사용자의 테마 기본 설정을 로컬 저장소에 저장할 수 있습니다. 선택한 테마를 저장하고 페이지가 로드될 때 확인하도록 ChangeTheme() 함수를 업데이트하면 사용자의 선택이 기억되어 다음 방문 시 자동으로 적용됩니다.

으아아아

색 구성표 추가: 어두움; 어두운 테마에 있을 때 속성을 사용하면 스타일을 지정하기 어려운 일부 요소의 스타일이 브라우저에 의해 변경되도록 할 수도 있습니다.

으아아아

결론

결론적으로 웹사이트에 다크 모드를 추가하면 OLED 화면에서 눈의 피로를 줄이고 배터리 수명을 연장하여 사용자 경험을 향상시킬 수 있습니다. 이 가이드를 따르면 CSS 및 JavaScript를 사용하여 밝은/어두운 모드 전환을 쉽게 설정할 수 있습니다. 디자인에 맞게 다크 모드를 맞춤설정하세요.

아래 댓글로 구현 내용을 공유하거나 질문하세요.

위 내용은 CSS와 JavaScript를 사용하여 웹사이트를 다크 모드로 전환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!