CSS 다크/라이트 모드 전환기 만들기
- WBOY원래의
- 2024-07-16 13:28:17404검색
어두운 모드와 밝은 모드 전환기는 점점 더 대중화되어 사용자에게 선호하는 시각적 경험을 선택할 수 있는 유연성을 제공합니다. 눈의 피로를 줄이거나, 배터리 수명을 절약하거나, 단순히 개인 취향을 따르기 위해 어둡게/밝게 모드 전환기를 구현하면 사용자 경험을 크게 향상시킬 수 있습니다. 이 기사에서는 HTML, CSS 및 JavaScript를 사용하여 간단하면서도 효과적인 다크/라이트 모드 전환기를 만드는 방법을 안내합니다.
다크/라이트 모드를 구현하는 이유는 무엇입니까?
1. 사용자 선호도: 일부 사용자는 특히 저조도 환경에서 미관을 고려하거나 눈의 피로를 줄이기 위해 다크 모드를 선호합니다.
2. 접근성: 시각장애인에게 도움이 될 수 있는 테마를 제공하여 접근성을 향상시킵니다.
3. 배터리 절약: OLED 화면에서는 다크 모드를 사용하여 배터리 수명을 절약할 수 있습니다.
HTML 구조 설정
간단한 HTML 구조를 만드는 것부터 시작하세요. 어두운 모드와 밝은 모드 사이를 전환하려면 버튼이 필요합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark/Light Mode Switcher</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Dark/Light Mode Switcher</h1>
<button id="modeSwitcher">Switch to Dark Mode</button>
<p>Toggle the button to switch between dark and light modes.</p>
</div>
<script src="script.js"></script>
</body>
</html>
CSS를 사용한 스타일링
다음으로 어두운 모드와 밝은 모드에 대한 스타일을 정의하겠습니다. 테마 전환을 더 쉽게 하기 위해 CSS 변수를 사용하겠습니다.
/* styles.css */
:root {
--bg-color: #ffffff;
--text-color: #000000;
--button-bg-color: #000000;
--button-text-color: #ffffff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: Arial, sans-serif;
transition: background-color 0.3s ease, color 0.3s ease;
}
.container {
text-align: center;
margin-top: 50px;
}
button {
background-color: var(--button-bg-color);
color: var(--button-text-color);
border: none;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
button:hover {
opacity: 0.8;
}
body.dark-mode {
--bg-color: #333333;
--text-color: #ffffff;
--button-bg-color: #ffffff;
--button-text-color: #000000;
}
JavaScript 기능 추가
이제 테마 전환을 처리하기 위해 JavaScript를 추가하겠습니다. 또한 사용자의 선택 사항이 세션 전반에 걸쳐 유지되도록 사용자의 기본 설정을 localStorage에 저장할 것입니다.
// script.js
document.addEventListener('DOMContentLoaded', () => {
const switcher = document.getElementById('modeSwitcher');
const currentMode = localStorage.getItem('theme') || 'light';
if (currentMode === 'dark') {
document.body.classList.add('dark-mode');
switcher.textContent = 'Switch to Light Mode';
}
switcher.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
const mode = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
switcher.textContent = mode === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode';
localStorage.setItem('theme', mode);
});
});
설명
1. CSS 변수: CSS 변수를 사용하여 두 모드의 색상을 정의하므로 모드 간을 쉽게 전환할 수 있습니다.
2. JavaScript: 본문 요소의 어두운 모드 클래스를 전환하기 위해 버튼에 이벤트 리스너를 추가합니다. 또한 현재 모드를 기반으로 버튼 텍스트를 업데이트하고 해당 모드를 localStorage에 저장합니다.
3. 영구 테마: 페이지가 로드되면 localStorage에서 사용자 기본 설정을 확인하고 적절한 테마를 적용합니다.
결론
어둡게/밝게 모드 전환기를 구현하면 다양한 선호도와 조건에 맞는 시각적 옵션을 제공하여 사용자 경험이 향상됩니다. 단 몇 줄의 HTML, CSS 및 JavaScript만으로 웹 프로젝트에 이 유용한 기능을 추가할 수 있습니다.
부드러운 전환이나 추가 테마 등 고급 기능을 자유롭게 실험해 보세요. 가능성은 무궁무진하며 사용자는 추가된 유연성을 높이 평가할 것입니다.
즐거운 코딩하세요!
위 내용은 CSS 다크/라이트 모드 전환기 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!