웹사이트에 다크 모드를 추가하는 가장 쉬운 방법
- WBOY원래의
- 2024-07-29 04:46:23569검색
최근 몇 년간 다크 모드에서 웹사이트와 애플리케이션을 사용하는 기능이 인기를 끌었습니다. 눈의 피로를 덜어주고, OLED 화면 장치의 배터리 수명을 연장하며, 전통적인 조명 테마를 미학적으로 만족스러운 대체물로 제공합니다. 이 튜토리얼에서는 JavaScript를 사용하여 테마를 전환하고 CSS 변수를 사용하여 웹사이트에 다크 모드를 추가하는 방법을 보여줍니다.
1단계: HTML 설정
먼저 기본 HTML 구조부터 시작해 보겠습니다. 다음 내용으로 index.html 파일을 만듭니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to Dark Mode Tutorial</h1>
<button id="theme-toggle">Toggle Dark Mode</button>
</header>
<main>
<p>This is a sample website to demonstrate dark mode implementation.</p>
</main>
<script src="script.js"></script>
</body>
</html>
이 HTML 파일에는 제목이 있는 헤더와 어두운 모드를 전환하는 버튼, 일부 텍스트가 포함된 기본 콘텐츠 영역, CSS 및 JavaScript 파일에 대한 링크가 포함되어 있습니다.
2단계: CSS 변수 정의
이제 CSS에서 변수를 정의해 보겠습니다. 다음 내용으로 styles.css 파일을 만듭니다.
:root {
--background-color: #ffffff;
--text-color: #000000;
--header-background-color: #f1f1f1;
}
body {
background-color: var(--background-color);
color: var(--text-color);
font-family: Arial, sans-serif;
transition: background-color 0.3s, color 0.3s;
}
header {
background-color: var(--header-background-color);
padding: 20px;
text-align: center;
}
button {
padding: 10px 20px;
margin-top: 20px;
cursor: pointer;
}
.dark-mode {
--background-color: #181818;
--text-color: #ffffff;
--header-background-color: #242424;
}
:root를 사용하여 이 CSS 파일에서 CSS 변수 그룹을 정의합니다. 조명 모드의 경우 이러한 변수는 배경색, 텍스트 색상 및 헤더 배경색을 결정합니다. 또한 .dark-mode 클래스가 정의되어 있으며 해당 설정이 이러한 변수보다 우선합니다. body 요소의 전환 속성을 통해 테마 간 원활한 전환이 보장됩니다.
3단계: 테마 전환을 위한 JavaScript 추가
이제 테마 전환을 처리하는 JavaScript를 추가해 보겠습니다. 다음 콘텐츠로 script.js 파일을 만듭니다.
const themeToggle = document.getElementById('theme-toggle');
const body = document.body;
// Check for saved user preference
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
body.classList.add(savedTheme);
}
// Toggle dark mode
themeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');
// Save user preference
if (body.classList.contains('dark-mode')) {
localStorage.setItem('theme', 'dark-mode');
} else {
localStorage.removeItem('theme');
}
});
이 스크립트는 테마 토글 버튼과 본문 요소를 선택합니다. 버튼을 클릭하면 본체의 다크 모드 클래스가 토글됩니다. 또한 스크립트는 사용자의 테마 기본 설정을 localStorage에 저장하므로 페이지를 다시 로드해도 테마가 유지됩니다.
4단계: 구현 테스트
웹 브라우저를 실행하고 index.html 파일을 열어 구현을 테스트합니다. 밝은 테마와 어두운 테마 사이를 전환하려면 "어두운 모드 전환" 버튼을 클릭하세요.
페이지 새로고침이 테마 기본 설정에 영향을 주어서는 안 된다는 점을 기억하세요.
결론
CSS 변수와 약간의 JavaScript를 활용하여 웹사이트에 다크 모드 토글을 빠르게 추가할 수 있습니다. 이 방법론은 원활한 테마 전환을 촉진하고 향상된 사용자 경험을 제공합니다. 이 강의를 토대로 페이지에 더 많은 요소를 추가하고 스타일을 수정해 보세요.
행복한 코딩하세요 :D
위 내용은 웹사이트에 다크 모드를 추가하는 가장 쉬운 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!