웹사이트에 다크 모드를 추가하는 가장 쉬운 방법

어두운 모드에서 웹사이트와 애플리케이션을 사용하는 기능은 최근 몇 년간 인기가 높아졌습니다. 눈의 피로를 덜어주고, OLED 화면 장치의 배터리 수명을 연장하며, 전통적인 조명 테마를 미학적으로 만족스러운 대체물로 제공합니다. 이 튜토리얼에서는 JavaScript를 사용하여 테마를 전환하고 CSS 변수를 사용하여 웹 사이트에 다크 모드를 추가하는 방법을 보여줍니다.

1단계: HTML 설정

먼저 기본적인 HTML 구조부터 시작해 보겠습니다. 다음 콘텐츠로 index.html 파일을 만듭니다.

이 HTML 파일에는 제목이 있는 헤더와 어두운 모드를 전환하는 버튼, 일부 텍스트가 포함된 기본 콘텐츠 영역, CSS 및 JavaScript 파일에 대한 링크가 포함되어 있습니다.

2단계: CSS 변수 정의

이제 CSS에서 변수를 정의해 보겠습니다. 다음 내용으로 styles.css 파일을 만듭니다.

우리는 :root를 사용하여 이 CSS 파일에서 CSS 변수 그룹을 정의합니다. 조명 모드의 경우 이러한 변수는 배경색, 텍스트 색상 및 헤더 배경색을 결정합니다. 또한 .dark-mode 클래스가 정의되어 있으며 해당 설정이 이러한 변수보다 우선합니다. 테마 간의 원활한 전환은 body 요소의 전환 속성으로 보장됩니다.

3단계: 테마 전환을 위한 JavaScript 추가

이제 테마 전환을 처리하는 JavaScript를 추가해 보겠습니다. 다음 콘텐츠로 script.js 파일을 만듭니다.

이 스크립트는 테마 토글 버튼과 본문 요소를 선택합니다. 버튼을 클릭하면 본체의 dark-mode 클래스가 전환됩니다. 또한 스크립트는 사용자의 테마 기본 설정을 localStorage에 저장하므로 페이지를 다시 로드해도 테마가 유지됩니다.

4단계: 구현 테스트

웹 브라우저를 실행하고 index.html 파일을 열어 구현을 테스트하세요. 밝은 테마와 어두운 테마 사이를 전환하려면 "어두운 모드 전환" 버튼을 클릭하세요.
페이지 새로고침이 테마 기본 설정에 영향을 주어서는 안 된다는 점을 기억하세요.

결론

CSS 변수와 약간의 JavaScript를 활용하여 웹사이트에 다크 모드 토글을 빠르게 추가할 수 있습니다. 이 방법론은 원활한 테마 전환을 촉진하고 향상된 사용자 경험을 제공합니다. 이 강의를 기반으로 페이지에 더 많은 요소를 추가하고 스타일을 수정해 보세요.

행복한 코딩하세요 :D

위 내용은 웹사이트에 다크 모드를 추가하는 가장 쉬운 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!